10個必裝的高效開發VSCode插件

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

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

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

10 個必裝的編輯器外掛程式

相當於影片教學的補充更新，這裡再次為大家整理出10 個必裝的VSCode 編輯器插件。編輯器的基本使用與插件的安裝可以直接參考上面的影片教學。

1、檔案圖示vscode-icons

外掛程式名稱：vscode-icons
外掛程式位址：https://marketplace.visualstudio.com/items?itemName =robertohuertasm.vscode-icons

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

vscode-icons 外掛程式可以實現對各種文件類型的文件前的圖示進行最佳化顯示，這樣我們在查看長長的文件清單的時候，可以直接透過文件的圖示就可以快速知道文件的類型，而不是去看文件的後綴。

2、暗色主題One Dark Pro

#外掛名稱：One Dark Pro
外掛程式位址：https:// marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme

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

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

3、程式碼美化Beautify

#外掛程式名稱：Beautify
外掛程式位址：https://marketplace.visualstudio. com/items?itemName=HookyQR.beautify

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

外掛程式支援的語言非常多，基本上堵蓋了目前所有的語言，而且你還可以自訂程式碼格式化的結構。

4、程式碼檢查工具ESLint

#外掛程式名稱：ESLint
外掛程式位址：https://marketplace.visualstudio .com/items?itemName=dbaeumer.vscode-eslint

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

而VSCode 中的ESLint 外掛程式就直接將ESLint 的功能整合好，安裝後即可使用，對於程式碼格式與規範的細節還可以自訂，並且一個團隊可以共用同一個設定文件，這樣一個團隊所有人寫出的程式碼就可以使用同一個程式碼規範，在程式碼簽入前每個人可以完成自己的程式碼規範檢查。

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 個使用與調試技巧，這些知識是你成為合格的前端開發人員必備技能。

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, 以及一些自訂的命令。

特徵

　●　執行目前活動文字編輯器的程式碼檔案

　●　透過檔案資源管理器的上下文選單執行程式碼文件

　●　在文字編輯器中執行選定的程式碼段

　●　每個Shebang運行程式碼

　●　每個檔案名稱glob運行程式碼

# ●　執行自訂指令

　●　停止程式碼執行

　●　在輸出視窗中查看輸出

　●　設定要執行的預設語言

#　●　選擇要執行的語言

　●　透過在整合終端機中執行程式碼來支援REPL

7、快速註解Document This

外掛程式名稱：Document This
插件位址：https://marketplace.visualstudio.com/items?itemName=joelday.docthis

優秀的程式碼除了優秀的效能、規範的格式，註解也是不可或缺的，而且註解也應該有一套標準的註解方法，特別是針對JavaScript 這種語言。

Document This 可以快速地幫你產生註釋，如一些函數的註釋還能幫你抽取參數的定義等，是你寫規範程式碼必備的工具。

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 類別名稱的提示。

特徵

　●　為您提供可在工作區中找到的CSS類別定義的自動完成（在CSS檔案中定義或在「支援的在語言模式」部分中列出的檔案類型中定義）

　●　支援透過linkHTML檔案中的元素所引用的外部樣式表

　●　用於手動重新快取自動完成中使用的類定義的命令

　●　用戶設定覆蓋應在快取過程中考慮或排除哪些資料夾和檔案

9、程式碼拼字檢查Code Spell Checker

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

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

10、備忘外掛程式TODO Highlight

外掛程式名稱：TODO Highlight

外掛程式位址：https://marketplace .visualstudio.com/items?itemName=wayou.vscode-todo-highlight

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

總結

#當然，這裡介紹的外掛只是必備外掛程式中的10 個，其實根據你開發的語言，還有很多非常能提高開發效率的工具需要安裝，你可以自己在VSCode 的插件中心查詢下載安裝。

推薦教學：vscode教學

以上是10個必裝的高效開發VSCode插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！