前端開發經常使用的VS Code插件總結

主題

主題這東西，找個本身喜歡習慣的就行了

一、Atom One Dark Theme

二、vscode-icons

vscode默認的目錄結構沒有圖標，不友好，這個圖標插件小巧美觀

必備

一、ESLint

代碼規範限制和團隊協做，避免低級錯誤的利器

二、GitLens

查看git的提交歷史，直接在代碼裏面預覽最後的編輯人和時間利器

三、Prettier

限制代碼規範，美化代碼結構

四、Bracket Pair Colorizer 2

讓每一個臨近的括號有不一樣顏色，能夠很直觀的看到嵌套的代碼的{([])}這些塊

五、indent-rainbow

很直觀的看到代碼行的縮進級

六、Path Intellisense

路徑補全插件

七、Debugger for Chrome

在瀏覽器裏面調試用

八、open in browser

能夠直接在瀏覽器裏面打開某個html文件

九、Auto Close Tag

自動閉合Html、XML標籤

十、Auto Rename Tag

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

十一、HTML CSS Support

讓 html 標籤上寫class 智能提示當前項目所支持的樣式

React開發

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

支持ES7提示，React全家桶代碼塊，建議安裝

二、vscode-styled-components

Css in js的提示工具，對於在js裏面寫css頗有用，styled-components依賴必備插件

Vue開發

一、vetur

美化.vue文件和部分提示

其餘

一、Code Runner

一個不錯的插件，能夠鼠標選中一段代碼，而後右鍵點開菜單選擇直接運行該段代碼，支持多語言

二、gi

快速生成各類語言標準的.gitignore文件

三、Markdown Preview Github Styling

美化vs code 裏面編寫的markdown文檔預覽樣式

四、TranslationToolbox

翻譯工具，鼠標移動到註釋上能夠直接翻譯成中文，中文很差可使用