本文介紹了目前前端開發最受歡迎的開發工具 VSCode 必裝的 10 個開發插件，用于大大提高軟體開發的效率，

VSCode 的基本使用可以參考我的原創視頻教程「VSCode 高效開發必裝插件」，

VSCode（Visual Studio Code）是由微軟研發的一款免費、開源的跨平臺文本（代碼）編輯器，算是目前前端開發幾乎完美的軟體開發工具，

官網為：https://code.visualstudio.com/

1. VSCode 的基本使用視頻教程

在我們的知識星球社區中給大家分享過我原創的 10 集視頻教程「VSCode 高效開發必裝插件」，

此課程為 VSCode 編輯器系列課程，VSCode 強大的插件庫使得其在提升開發效率方面更加的無敵，系列課程給大家分享了必裝插件的安裝、配置與使用技巧相關的知識，

視頻教程課程大綱

001 - 課程簡介
002 - 如何讓你的檔案型別一目了然
003 - 如何更加高效地管理專案
004 - 自動格式化你的代碼
005 - 如何一鍵搭建各類語言的學習測驗環境
006 - 如何和 Chrome 聯動除錯
007 - 如何實時自動檢測你的代碼規范與代碼中的錯誤
008 - 如何提升 React 等前端開發的效率
009 - 如何集成并美化你的終端到 VSCode 中
010 - Visual Studio 重度使用者如何遷移到 VSCode

視頻教程地址：https://devopen.club/course/vscode，

2. 10 個必裝的編輯器插件

相當于視頻教程的補充更新，這里再次給大家整理出 10 個必裝的 VSCode 編輯器插件，編輯器的基本使用與插件的安裝可以直接參考上面的視頻教程，

2.1 檔案圖示 vscode-icons

插件名稱：vscode-icons
插件地址：https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

首先為了我們在編碼時有一個高效、易用的界面，我們需要對一些不明了的組件做一些美化，

vscode-icons 插件可以實作對各種檔案型別的檔案前的圖示進行優化顯示，這樣我們在查看長長的檔案串列的時候，可以直接通過檔案的圖示就可以快速知道檔案的型別，而不是去看檔案的后綴，

2.2 暗色主題 One Dark Pro

插件名稱：One Dark Pro
插件地址：https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme

長時間的編碼，暗色調的編碼環境更不容易讓視力疲勞，而且也可以讓自己更加專注，

安裝了 One Dark Pro 插件后，可以一鍵將 VSCode 編輯器的顏色調整成暗色系，編碼起來更加舒適，

2.3 代碼美化 Beautify

插件名稱：Beautify
插件地址：https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

Beautify 插件可以快速格式化你的代碼格式，讓你在撰寫代碼時雜亂的代碼結構瞬間變得非常規整，代碼強迫癥必備，較好的代碼格式在后期維護以及他人閱讀時都會有很多的便利，

插件支持的語言非常多，基本堵蓋了目前所有的語言，而且你還可以自定義代碼格式化的結構，

2.4 代碼檢查工具 ESLint

插件名稱：ESLint
插件地址：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

ESLint 是一個語法規則和代碼風格的檢查工具，可以用來保證寫出語法正確、風格統一的代碼，

而 VSCode 中的 ESLint 插件就直接將 ESLint 的功能集成好，安裝后即可使用，對于代碼格式與規范的細節還可以自定義，并且一個團隊可以共享同一個組態檔，這樣一個團隊所有人寫出的代碼就可以使用同一個代碼規范，在代碼簽入前每個人可以完成自己的代碼規范檢查，

2.5 必備除錯工具 Debugger for Chrome

插件名稱：Debugger for Chrome
插件地址：https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

此工具簡直就是前端開發必備，將大大地改變你的開發與除錯模式，

以往的前端除錯，主要是 JavaScript 除錯，你需要在 Chrome 的控制臺中找到對應代碼的部分，添加上斷點，然后在 Chrome 的控制臺中單步除錯并在其中查看值的變化，

而在使用了 Debugger for Chrome 后，當代碼在 Chrome 中運行后，你可以直接在 VSCode 中加上斷點，點擊運行后，Chrome 中的頁面繼續運行，執行到你在 VSCode 中添加的斷點后，你可以直接在 VSCode 中進行單步除錯，

關于 Chrome 除錯工具的使用，你可以參考我在我們的知識星球中分享的原創視頻教程「50 個 Chrome Developer Tools 必備技巧」，課程分享了前端開發中必備的瀏覽器除錯工具 Chrome Developer Tools 使用程序中必備的 50 個使用與除錯技巧，這些知識是你成為合格的前端開發人員必備技能，

2.6 萬能語言運行環境 Code Runner

插件名稱：Code Runner
插件地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

如果你需要學習或者接觸各種各樣的開發語言，那么 Code Runner 插件可以讓你不用搭建各種語言的開發環境，直接通過此插件就可以直接運行對應語言的代碼，非常適合學習或測驗各種開發語言，

支持的語言有：C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, 以及一些自定義的命令，

2.7 快速注釋 Document This

插件名稱：Document This
插件地址：https://marketplace.visualstudio.com/items?itemName=joelday.docthis

優秀的代碼除了優秀的性能、規范的格式，注釋也是不可或缺的，而且注釋也應該有一套標準的注釋方法，特別對于 JavaScript 這種語言，

Document This 可以快速地幫你生成注釋，如一些函式的注釋還能幫你抽取出引數的定義等，是你撰寫規范代碼必備的工具，

2.8 CSS 類名智能提示

插件名稱：IntelliSense for CSS class names in HTML
插件地址：https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

在 HTML 中呼叫定義好的樣式名時，有時需要經常在 HTML 與 CSS 檔案之間切換，來回地查看你已定義好的 CSS 類名，

而有了 IntelliSense for CSS class names in HTML 插件后，你可以在 HTML 中需要呼叫 CSS 類名的地方，此插件會智能地給你已定義 CSS 類名的提示，

2.9 代碼拼寫檢查 Code Spell Checker

插件名稱：Code Spell Checker
插件地址：https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

此插件安裝后就不用管就好了，在你代碼中有單詞拼寫錯誤時，你就會發現它的好處，因為我們寫代碼畢竟都是大量的英文單詞變數定義，插件還可以給出錯誤拼寫單詞的建議，

2.10 備忘插件 TODO Highlight

插件名稱：TODO Highlight
插件地址：https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

在很多的其他代碼編輯器中都有 TODO 標注功能的，如你寫到某一部分的代碼時，其中部分的功能需要稍后再來實作，這是就可以在對應的代碼處添加一個 TODO 型別的注釋，那么后期就可以快速地跳轉到這部分繼續寫，而且當專案很大的時候，TODO 就變得更加有用，因為有時候 TODO 可能有幾十個，幫助你標注那些功能需要繼續實作或優化，