2019年，前端工程師須要安裝的15個VSCode 插件

插件由Traversy Media提供，提到的插件基本都在用，並且真的蠻好用，因此推薦給你們，若是你有好用的插件能夠留言評論，分享給更多的前端開發者們。

1.Live Server

喚起瀏覽器開啓本地服務，對於

2.Live Sass Compiler

支持sass直接編譯成css文件

3.HTML CSS Support

支持html編寫class提示已經定義的類名

4.Auto Rename Tag

適用於 JSX、Vue、HTML，在修改標籤名時，能在你修改開始（結束）標籤的時候修改對應的結束（開始）標籤，幫你減小 50% 的擊鍵；

5.Prettier - Code formatter

實際上已是代碼格式化的工具標準，支持格式化幾乎全部的前端代碼，而且相似於 EditorConfig 支持用文件來配置格式規則；

6.JavaScript (ES6) code snippets

ES6語法中的JavaScript代碼片斷（支持JavaScript和TypeScript）

7.Turbo Console Log

經過自動執行編寫有意義的日誌消息的操做，使調試更加容易。

8.Guides 縮進參考

與內置的縮進參考線不一樣，Guides可以讓你經過配置項來修改參考線的顏色、樣式、縮進空白的背景色等，若是你願意折騰，甚至可以配置出相似 Indent Rainbow 那樣風格的參考線。下圖是我使用 Solarized Dark 主題時參考線的配置：

{
    "guides.normal.color.dark": "rgba(91, 91, 91, 0.6)",
    "guides.normal.color.light": "rgba(220, 220, 220, 0.7)",
    "guides.active.color.dark": "rgba(210, 110, 210, 0.6)",
    "guides.active.color.light": "rgba(200, 100, 100, 0.7)",
    "guides.active.style": "dashed",
    "guides.normal.style": "dashed",
    "guides.stack.style": "dashed",
}

複製代碼

9.Bracket Pair Colorizer

識別代碼中的各類括號，而且標記上不一樣的顏色，方便你掃視到匹配的括號，在括號使用很是多的狀況下能環節眼部壓力，編輯器快捷鍵當然好用，可是在臨近嵌套多的狀況下卻有些力不從心

10.Code Spell Checker

強烈推薦，對大部分非英語母語又不想寫出四不像變量名的程序員來講，正確識記拼寫各類單詞仍是有不小的挑戰，比模棱兩可時須要去查在線詞典不一樣的是，這款插件能實時的識別單詞拼寫是否有誤，並給出提示，很多 bug 都是由於拼寫錯誤致使的。

11.GitLens — Git supercharged

把VSCode 結合 Git的使用體驗優化到了極致，能讓咱們在不離開編輯器，不執行任何命令的狀況下知曉光標所在位置代碼的修改時間、做者信息等。

12.Auto-Open Markdown Preview

打開Markdown文件時自動打開Markdown預覽

13.Vetur

vue項目支持插件

14.ES7 React/Redux/GraphQL/React-Native snippets

react項目支持插件