2019年，前端工程師需要安裝的15個VSCode 外掛

小桂子0118發表於2019-05-07
前端工程師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專案支援外掛

相關文章