VSCode 必裝的 10 個高效開發外掛

Parry發表於2018-10-15
VSCode

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

VSCode 的基本使用可以參考我的原創視訊教程「VSCode 高效開發必裝外掛」。

截圖

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

官網為：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

視訊教程地址：devopen.club/course/vsco…。

2. 10 個必裝的編輯器外掛

相當於視訊教程的補充更新，這裡再次給大家整理出 10 個必裝的 VSCode 編輯器外掛。編輯器的基本使用與外掛的安裝可以直接參考上面的視訊教程。

2.1 檔案圖示 vscode-icons

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

vscode-icons 外掛可以實現對各種檔案型別的檔案前的圖示進行優化顯示，這樣我們在檢視長長的檔案列表的時候，可以直接通過檔案的圖示就可以快速知道檔案的型別，而不是去看檔案的字尾。

截圖

2.2 暗色主題 One Dark Pro

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

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

截圖

2.3 程式碼美化 Beautify

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

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

截圖

2.4 程式碼檢查工具 ESLint

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

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

截圖

2.5 必備除錯工具 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 外掛可以讓你不用搭建各種語言的開發環境，直接通過此外掛就可以直接執行對應語言的程式碼，非常適合學習或測試各種開發語言。

支援的語言有：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

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

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

截圖

2.8 CSS 類名智慧提示

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

而有了 IntelliSense for CSS class names in HTML 外掛後，你可以在 HTML 中需要呼叫 CSS 類名的地方，此外掛會智慧地給你已定義 CSS 類名的提示。

截圖

2.9 程式碼拼寫檢查 Code Spell Checker

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

截圖

2.10 備忘外掛 TODO Highlight

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

截圖

3. 總結

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

我們的知識星球社群中也會經常給大家推薦最新的必備外掛與開發技巧，而關於其他的開發問題都可以在社群中進行提問與交流，同時也有創業的專案在孵化，大家可以在你們找到志同道合的朋友一起來做一點事情。

相關文章