前端開發常用的VS Code外掛總結

tyrocoder發表於2019-10-22

主題

主題這東西,找個自己喜歡習慣的就好了

1、Atom One Dark Theme

image-20191022115057989

2、vscode-icons

vscode預設的目錄結構沒有圖示,不友好,這個圖示外掛小巧美觀

必備

1、ESLint

程式碼規範限制和團隊協作,避免低階錯誤的利器

2、GitLens

檢視git的提交歷史,直接在程式碼裡面預覽最後的編輯人和時間利器

3、Prettier

限制程式碼規範,美化程式碼結構

4、Bracket Pair Colorizer 2

讓每個臨近的括號有不同顏色,可以很直觀的看到巢狀的程式碼的{([])}這些塊

5、indent-rainbow

很直觀的看到程式碼行的縮排級

6、Path Intellisense

路徑補全外掛

7、Debugger for Chrome

在瀏覽器裡面除錯用

8、open in browser

可以直接在瀏覽器裡面開啟某個html檔案

9、Auto Close Tag

自動閉合Html、XML標籤

10、Auto Rename Tag

自動完成另一側標籤的同步修改

11、HTML CSS Support

讓 html 標籤上寫class 智慧提示當前專案所支援的樣式

React開發

1、ES7 React/Redux/GraphQL/React-Native snippets

支援ES7提示,React全家桶程式碼塊,建議安裝

2、vscode-styled-components

Css in js的提示工具,對於在js裡面寫css很有用,styled-components依賴必備外掛

Vue開發

1、vetur

美化.vue檔案和部分提示

其他

1、Code Runner

一個不錯的外掛,可以滑鼠選中一段程式碼,然後右鍵點開選單選擇直接執行該段程式碼,支援多語言

2、gi

快速生成各種語言標準的.gitignore檔案

3、Markdown Preview Github Styling

美化vs code 裡面編寫的markdown文件預覽樣式

4、TranslationToolbox

翻譯工具,滑鼠移動到註釋上可以直接翻譯成中文,中文不好可以使用

相關文章