這篇文章主要介紹10個(gè)必需要安裝的高效開發(fā)VSCode插件，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)專注于赤峰網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供赤峰營銷型網(wǎng)站建設(shè)，赤峰網(wǎng)站制作、赤峰網(wǎng)頁設(shè)計(jì)、赤峰網(wǎng)站官網(wǎng)定制、成都微信小程序服務(wù)，打造赤峰網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供赤峰網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

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

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

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

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

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

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

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

vscode-icons 插件可以實(shí)現(xiàn)對各種文件類型的文件前的圖標(biāo)進(jìn)行優(yōu)化顯示，這樣我們在查看長長的文件列表的時(shí)候，可以直接通過文件的圖標(biāo)就可以快速知道文件的類型，而不是去看文件的后綴。

2、暗色主題 One Dark Pro

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

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

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

3、代碼美化 Beautify

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

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

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

4、代碼檢查工具 ESLint

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

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

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

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

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

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

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

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

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

6、萬能語言運(yùn)行環(huán)境 Code Runner

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

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

支持的語言有：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, 以及一些自定義的命令。

特征

●　運(yùn)行當(dāng)前活動(dòng)文本編輯器的代碼文件

●　通過文件資源管理器的上下文菜單運(yùn)行代碼文件

●　在文本編輯器中運(yùn)行選定的代碼段

●　每個(gè)Shebang運(yùn)行代碼

●　每個(gè)文件名glob運(yùn)行代碼

●　運(yùn)行自定義命令

●　停止代碼運(yùn)行

●　在輸出窗口中查看輸出

●　設(shè)置要運(yùn)行的默認(rèn)語言

●　選擇要運(yùn)行的語言

●　通過在集成終端中運(yùn)行代碼來支持REPL

7、快速注釋 Document This

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

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

Document This 可以快速地幫你生成注釋，如一些函數(shù)的注釋還能幫你抽取出參數(shù)的定義等，是你編寫規(guī)范代碼必備的工具。

8、CSS 類名智能提示

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

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

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

特征

●　為您提供可在工作區(qū)中找到的CSS類定義的自動(dòng)完成（在CSS文件中定義或在“支持的語言模式”部分中列出的文件類型中定義）

●　支持通過linkHTML文件中的元素引用的外部樣式表

●　用于手動(dòng)重新緩存自動(dòng)完成中使用的類定義的命令

●　用戶設(shè)置覆蓋應(yīng)在緩存過程中考慮或排除哪些文件夾和文件

9、代碼拼寫檢查 Code Spell Checker

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

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

10、備忘插件 TODO Highlight

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

在很多的其他代碼編輯器中都有 TODO 標(biāo)注功能的，如你寫到某一部分的代碼時(shí)，其中部分的功能需要稍后再來實(shí)現(xiàn)，這是就可以在對應(yīng)的代碼處添加一個(gè) TODO 類型的注釋，那么后期就可以快速地跳轉(zhuǎn)到這部分繼續(xù)寫，而且當(dāng)項(xiàng)目很大的時(shí)候，TODO 就變得更加有用，因?yàn)橛袝r(shí)候 TODO 可能有幾十個(gè)，幫助你標(biāo)注那些功能需要繼續(xù)實(shí)現(xiàn)或優(yōu)化。

以上是“10個(gè)必需要安裝的高效開發(fā)VSCode插件”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：10個(gè)必需要安裝的高效開發(fā)VSCode插件
鏈接分享：http://www.chinadenli.net/article40/isgheo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、軟件開發(fā)、電子商務(wù)、微信公眾號、做網(wǎng)站、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)