本文介紹了目前前端開(kāi)發(fā)最受歡迎的開(kāi)發(fā)工具 VSCode 必裝的 10 個(gè)開(kāi)發(fā)插件，用于大大提高軟件開(kāi)發(fā)的效率。

VSCode 的基本使用可以參考我的原創(chuàng)視頻教程「VSCode 高效開(kāi)發(fā)必裝插件」。

VSCode（Visual Studio Code）是由微軟研發(fā)的一款免費(fèi)、開(kāi)源的跨平臺(tái)文本（代碼）編輯器，算是目前前端開(kāi)發(fā)幾乎完美的軟件開(kāi)發(fā)工具。

官網(wǎng)為：https://code./

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

在我們的知識(shí)星球社區(qū)中給大家分享過(guò)我原創(chuàng)的 10 集視頻教程「VSCode 高效開(kāi)發(fā)必裝插件」。

此課程為 VSCode 編輯器系列課程。VSCode 強(qiáng)大的插件庫(kù)使得其在提升開(kāi)發(fā)效率方面更加的無(wú)敵，系列課程給大家分享了必裝插件的安裝、配置與使用技巧相關(guān)的知識(shí)。

視頻教程課程大綱

• 001 - 課程簡(jiǎn)介

• 002 - 如何讓你的文件類(lèi)型一目了然

• 003 - 如何更加高效地管理項(xiàng)目

• 004 - 自動(dòng)格式化你的代碼

• 005 - 如何一鍵搭建各類(lèi)語(yǔ)言的學(xué)習(xí)測(cè)試環(huán)境

• 006 - 如何和 Chrome 聯(lián)動(dòng)調(diào)試

• 007 - 如何實(shí)時(shí)自動(dòng)檢測(cè)你的代碼規(guī)范與代碼中的錯(cuò)誤

• 008 - 如何提升 React 等前端開(kāi)發(fā)的效率

• 009 - 如何集成并美化你的終端到 VSCode 中

• 010 - Visual Studio 重度使用者如何遷移到 VSCode

視頻教程地址：https:///course/vscode。

2. 10 個(gè)必裝的編輯器插件

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

2.1 文件圖標(biāo) vscode-icons

• 插件名稱(chēng)：vscode-icons

• 插件地址：https://marketplace./items?itemName=robertohuertasm.vscode-icons

首先為了我們?cè)诰幋a時(shí)有一個(gè)高效、易用的界面，我們需要對(duì)一些不明了的組件做一些美化。

vscode-icons 插件可以實(shí)現(xiàn)對(duì)各種文件類(lèi)型的文件前的圖標(biāo)進(jìn)行優(yōu)化顯示，這樣我們?cè)诓榭撮L(zhǎng)長(zhǎng)的文件列表的時(shí)候，可以直接通過(guò)文件的圖標(biāo)就可以快速知道文件的類(lèi)型，而不是去看文件的后綴。

2.2 暗色主題 One Dark Pro

• 插件名稱(chēng)：One Dark Pro

• 插件地址：https://marketplace./items?itemName=zhuangtongfa.Material-theme

長(zhǎng)時(shí)間的編碼，暗色調(diào)的編碼環(huán)境更不容易讓視力疲勞，而且也可以讓自己更加專(zhuān)注。

安裝了 One Dark Pro 插件后，可以一鍵將 VSCode 編輯器的顏色調(diào)整成暗色系，編碼起來(lái)更加舒適。

2.3 代碼美化 Beautify

• 插件名稱(chēng)：Beautify

• 插件地址：https://marketplace./items?itemName=HookyQR.beautify

Beautify 插件可以快速格式化你的代碼格式，讓你在編寫(xiě)代碼時(shí)雜亂的代碼結(jié)構(gòu)瞬間變得非常規(guī)整，代碼強(qiáng)迫癥必備，較好的代碼格式在后期維護(hù)以及他人閱讀時(shí)都會(huì)有很多的便利。

插件支持的語(yǔ)言非常多，基本堵蓋了目前所有的語(yǔ)言，而且你還可以自定義代碼格式化的結(jié)構(gòu)。

2.4 代碼檢查工具 ESLint

• 插件名稱(chēng)：ESLint

• 插件地址：https://marketplace./items?itemName=dbaeumer.vscode-eslint

ESLint 是一個(gè)語(yǔ)法規(guī)則和代碼風(fēng)格的檢查工具，可以用來(lái)保證寫(xiě)出語(yǔ)法正確、風(fēng)格統(tǒng)一的代碼。

而 VSCode 中的 ESLint 插件就直接將 ESLint 的功能集成好，安裝后即可使用，對(duì)于代碼格式與規(guī)范的細(xì)節(jié)還可以自定義，并且一個(gè)團(tuán)隊(duì)可以共享同一個(gè)配置文件，這樣一個(gè)團(tuán)隊(duì)所有人寫(xiě)出的代碼就可以使用同一個(gè)代碼規(guī)范，在代碼簽入前每個(gè)人可以完成自己的代碼規(guī)范檢查。

2.5 必備調(diào)試工具 Debugger for Chrome

• 插件名稱(chēng)：Debugger for Chrome

• 插件地址：https://marketplace./items?itemName=msjsdiag.debugger-for-chrome

此工具簡(jiǎn)直就是前端開(kāi)發(fā)必備，將大大地改變你的開(kāi)發(fā)與調(diào)試模式。

以往的前端調(diào)試，主要是 JavaScript 調(diào)試，你需要在 Chrome 的控制臺(tái)中找到對(duì)應(yīng)代碼的部分，添加上斷點(diǎn)，然后在 Chrome 的控制臺(tái)中單步調(diào)試并在其中查看值的變化。

而在使用了 Debugger for Chrome 后，當(dāng)代碼在 Chrome 中運(yùn)行后，你可以直接在 VSCode 中加上斷點(diǎn)，點(diǎn)擊運(yùn)行后，Chrome 中的頁(yè)面繼續(xù)運(yùn)行，執(zhí)行到你在 VSCode 中添加的斷點(diǎn)后，你可以直接在 VSCode 中進(jìn)行單步調(diào)試。

關(guān)于 Chrome 調(diào)試工具的使用，你可以參考我在我們的知識(shí)星球中分享的原創(chuàng)視頻教程「50 個(gè) Chrome Developer Tools 必備技巧」，課程分享了前端開(kāi)發(fā)中必備的瀏覽器調(diào)試工具 Chrome Developer Tools 使用過(guò)程中必備的 50 個(gè)使用與調(diào)試技巧，這些知識(shí)是你成為合格的前端開(kāi)發(fā)人員必備技能。

2.6 萬(wàn)能語(yǔ)言運(yùn)行環(huán)境 Code Runner

• 插件名稱(chēng)：Code Runner

• 插件地址：https://marketplace./items?itemName=formulahendry.code-runner

如果你需要學(xué)習(xí)或者接觸各種各樣的開(kāi)發(fā)語(yǔ)言，那么 Code Runner 插件可以讓你不用搭建各種語(yǔ)言的開(kāi)發(fā)環(huán)境，直接通過(guò)此插件就可以直接運(yùn)行對(duì)應(yīng)語(yǔ)言的代碼，非常適合學(xué)習(xí)或測(cè)試各種開(kāi)發(fā)語(yǔ)言。

支持的語(yǔ)言有：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

• 插件名稱(chēng)：Document This

• 插件地址：https://marketplace./items?itemName=joelday.docthis

優(yōu)秀的代碼除了優(yōu)秀的性能、規(guī)范的格式，注釋也是不可或缺的，而且注釋也應(yīng)該有一套標(biāo)準(zhǔn)的注釋方法，特別對(duì)于 JavaScript 這種語(yǔ)言。

Document This 可以快速地幫你生成注釋?zhuān)缫恍┖瘮?shù)的注釋還能幫你抽取出參數(shù)的定義等，是你編寫(xiě)規(guī)范代碼必備的工具。

2.8 CSS 類(lèi)名智能提示

• 插件名稱(chēng)：IntelliSense for CSS class names in HTML

• 插件地址：https://marketplace./items?itemName=Zignd.html-css-class-completion

在 HTML 中調(diào)用定義好的樣式名時(shí)，有時(shí)需要經(jīng)常在 HTML 與 CSS 文件之間切換，來(lái)回地查看你已定義好的 CSS 類(lèi)名。

而有了 IntelliSense for CSS class names in HTML 插件后，你可以在 HTML 中需要調(diào)用 CSS 類(lèi)名的地方，此插件會(huì)智能地給你已定義 CSS 類(lèi)名的提示。

2.9 代碼拼寫(xiě)檢查 Code Spell Checker

• 插件名稱(chēng)：Code Spell Checker

• 插件地址：https://marketplace./items?itemName=streetsidesoftware.code-spell-checker

此插件安裝后就不用管就好了，在你代碼中有單詞拼寫(xiě)錯(cuò)誤時(shí)，你就會(huì)發(fā)現(xiàn)它的好處，因?yàn)槲覀儗?xiě)代碼畢竟都是大量的英文單詞變量定義，插件還可以給出錯(cuò)誤拼寫(xiě)單詞的建議。

2.10 備忘插件 TODO Highlight

• 插件名稱(chēng)：TODO Highlight

• 插件地址：https://marketplace./items?itemName=wayou.vscode-todo-highlight

在很多的其他代碼編輯器中都有 TODO 標(biāo)注功能的，如你寫(xiě)到某一部分的代碼時(shí)，其中部分的功能需要稍后再來(lái)實(shí)現(xiàn)，這是就可以在對(duì)應(yīng)的代碼處添加一個(gè) TODO 類(lèi)型的注釋?zhuān)敲春笃诰涂梢钥焖俚靥D(zhuǎn)到這部分繼續(xù)寫(xiě)，而且當(dāng)項(xiàng)目很大的時(shí)候，TODO 就變得更加有用，因?yàn)橛袝r(shí)候 TODO 可能有幾十個(gè)，幫助你標(biāo)注那些功能需要繼續(xù)實(shí)現(xiàn)或優(yōu)化。

3. 總結(jié)

當(dāng)然，這里介紹的插件只是必備插件中的 10 個(gè)，其實(shí)根據(jù)你開(kāi)發(fā)的語(yǔ)言，還有很多非常能提高開(kāi)發(fā)效率的工具需要安裝，你可以自行在 VSCode 的插件中心查詢(xún)下載安裝。

我們的知識(shí)星球社區(qū)中也會(huì)經(jīng)常給大家推薦最新的必備插件與開(kāi)發(fā)技巧，而關(guān)于其他的開(kāi)發(fā)問(wèn)題都可以在社區(qū)中進(jìn)行提問(wèn)與交流，同時(shí)也有創(chuàng)業(yè)的項(xiàng)目在孵化，大家可以在你們找到志同道合的朋友一起來(lái)做一點(diǎn)事情。