10個必需要安裝的高效開發(fā)VSCode插件

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

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

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

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

10 個必裝的編輯器插件

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

1、文件圖標 vscode-icons

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

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

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

2、暗色主題 One Dark Pro

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

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

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

3、代碼美化 Beautify

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

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

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

4、代碼檢查工具 ESLint

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

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

而 VSCode 中的 ESLint 插件就直接將 ESLint 的功能集成好，安裝后即可使用，對于代碼格式與規(guī)范的細節(jié)還可以自定義，并且一個團隊可以共享同一個配置文件，這樣一個團隊所有人寫出的代碼就可以使用同一個代碼規(guī)范，在代碼簽入前每個人可以完成自己的代碼規(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)代碼的部分，添加上斷點，然后在 Chrome 的控制臺中單步調(diào)試并在其中查看值的變化。

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

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

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

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

如果你需要學(xué)習(xí)或者接觸各種各樣的開發(fā)語言，那么 Code Runner 插件可以讓你不用搭建各種語言的開發(fā)環(huá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, 以及一些自定義的命令。

特征

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

●　通過文件資源管理器的上下文菜單運行代碼文件

●　在文本編輯器中運行選定的代碼段

●　每個Shebang運行代碼

●　每個文件名glob運行代碼

●　運行自定義命令

●　停止代碼運行

●　在輸出窗口中查看輸出

●　設(shè)置要運行的默認語言

●　選擇要運行的語言

●　通過在集成終端中運行代碼來支持REPL

7、快速注釋 Document This

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

優(yōu)秀的代碼除了優(yōu)秀的性能、規(guī)范的格式，注釋也是不可或缺的，而且注釋也應(yīng)該有一套標準的注釋方法，特別對于 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)用定義好的樣式名時，有時需要經(jīng)常在 HTML 與 CSS 文件之間切換，來回地查看你已定義好的 CSS 類名。

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

特征

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

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

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

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

9、代碼拼寫檢查 Code Spell Checker

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

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

10、備忘插件 TODO Highlight

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

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

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

網(wǎng)站欄目：10個必需要安裝的高效開發(fā)VSCode插件
鏈接分享：http://bm7419.com/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)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)