大家好，又見面了，我是你們的朋友風君子。如果您正在找激活碼,請點擊查看最新教程,關注關注公眾號 “全棧程序員社區” 獲取激活教程,可能之前舊版本教程已經失效.最新Idea2022.1教程親測有效,一鍵激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟無欺

有句話，事半功倍，其必然是借助了某些思想和工具。

VSCode是我們前端開發的武器，本文40+精選插件，讓其更加鋒利，無堅不摧！！

必備的

下面這些必備的我就不說了

1. 代碼段

• JavaScript \(ES6\) code snippets^[1]，ES7 React/Redux/GraphQL/React-Native snippets^[2]

• vue^[3],vetur^[4],Vue 3 Snippets^[5]，Vue VSCode Snippets^[6]

代碼段這玩意，你也可自定義，可以參見VSCode創建自定義代碼段^[7]

1. 代碼檢查和格式化

• ESLint^[8],Prettier – Code formatter^[9],Beautify^[10]

1. 其他

• open in browser^[11]

由于VSCode自身功能的增強，NPM-Scripts^[12],Change Case^[13]等的插件就不需要特意安裝了。

接下來更精彩！！！，全程高能動圖，請別分神！

實用高效工具

scode-js-debug^[14]debug利器

新版VSCode內置。

可用于調試Node.js、 Chrome、 Edge、 WebView2、 VS Code 擴展等等，替換Debugger for Chrome插件。其還可以調試Service Worker, Web Worker, 功能是異常的強大。

如下的演示，你首先的配置好launch.json

Live Server^[15]靜態服務器

為靜態和動態頁面啟動具有實時重載特性的本地開發服務器。

這也是我平時最喜歡用的插件之一， 右鍵一鍵啟動，還支持熱等，爽字了得。

Code Runner^[16]代碼運行器

最喜歡的插件，沒有之三，平時寫一些測試代碼，和一些邏輯庫，快捷鍵Ctrl+Alt+M, 喝口水，看一下結果，悠哉。

一鍵運行多種語言運行代碼片段或代碼文件: c，c + + ，Java，JavaScript，PHP，Python，Perl，Perl 6，Ruby，Go，Lua，Groovy，PowerShell，BAT/CMD，BASH/SH，f # Script，f # (。NET 核心) ，c # 腳本，多到你想不到。

Markdown Preview Enhanced^[17]markdown編輯和預覽

typora？其實不需要的，這款markdown插件，讓你一邊編輯markdonwn一邊預覽，編程體驗不差于掘金那款。

如果需要更多功能比如 TODO, 或者多行同時修改等,Markdown All in One^[18]是不錯的選擇。

下面演示一下常用的TODO便簽。

Git History^[19]和 GitLens^[20]Git歷史記錄

誰動了我的代碼？直接在VSCode里面，查看Git的歷史，搜索，版本對比。清爽！！

VSCode也內置了時間線的功能，但是能力還是弱一些。

GitLens功能更加強大，無縫導航和瀏覽 Git 存儲庫。

Image Preview^[21]圖片預覽

CSS編寫，再也擔心寫錯圖片地址啦！
其支持在html和css文件里面，當有使用圖片路徑的時候，在左邊實現小的預覽器，一眼就知對與錯。

JSON to TS^[22]json轉為TS申明

現在的前端，誰還不寫個TypeScript，可是咋生成申明文件呢？手寫，那你太out了。這款插件，一鍵生成。

別人手巧，我在喝茶，笑一個。

vscode-fileheader^[23]和 koroFileHeader^[24]生成文件備注

某人某天編寫，某人某天更新，來過就留下足跡，一眼望穿！

如果你覺得這些信息還不夠，koroFileHeader^[25]提供更督導的注釋， 也同時支持生成函數注釋。

npm Intellisense^[26]npm模塊導入智能提示

那么多npm模塊，記性不好，腦子不快，沒關系，這款插件替你分憂。

Import Cost^[27]依賴包大小提示

我們一來那么多包，你引入的成本是多少呢？成本早知道，就交給她吧！

formate: CSS/LESS/SCSS formatter^[28]css樣式美化

VSCode內置css格式化功能，這款支持less, scss，高效美觀，如你！

TODO Highlight^[29]高亮TODO

在代碼中突出顯示 TODO、 FIXME 和其他注釋。

有時候，在將代碼發布到生產環境之前，您會忘記檢查在編碼時添加的 todo。

Add jsdoc comments^[30]給方法添加JSDoc

自動給方法添加JSDoc, 可別說我不會寫注釋, 我對我寫的每一行代碼負責！！！

DotENV^[31]env文件高亮

這年頭，誰的配置還沒不用個env文件，沒高亮，真難看，這款就是你的救星。

HTML Snippets^[32]html代碼段

此插件能快速的輸出html代碼， 效率就是懶出來的，你們說對吧。

Wrap Console Log Lite^[33]快捷的輸出變量

我們經常使用console.log輸出變量來查看執行情況，這插件，直接給你生成出書代碼，懶的可以啊，懶到極致。

Quokka.js^[34]直接顯示變量結果

不用運行，就能知道你的代碼結果，這編程體驗也是沒誰了，把更多時間話費在邏輯上吧。

REST Client^[35]rest請求

想請求某個站點的接口，axios?, express? , No No No , 打開VS code直接發請求就好。

此插件允許您直接發送 HTTP 請求并查看 visualstudio 代碼中的響應。

Path Intellisense^[36]引用路徑智能提示

vscode-faker^[37]生成虛假數據

誰還沒造點假數據，就這么簡單！

Regex Previewer^[38]邊寫正則邊看結果

一邊寫正則，一邊就能看到結果，這調試真的太方便了！！！

SVG Viewer^[39]SVG文件預覽

預覽svg文件，還能到處成為圖片，利器！

Auto Close Tag^[40]自動關閉標簽

自動添加 HTML/XML 關閉標記，與 Visual Studio IDE 或 Sublime Text 相同。

Auto Rename Tag^[41]標簽重命名

自動重命名成對的 HTML/XML 標記，與 Visual Studio IDE 相同。

我們總有時候會寫錯，那么這就可以降低你犯錯后修復成本。

CSS Peek^[42]css定位器

我的class在哪定義的，自己都找不到了，怎么辦，有請這位！！

Code Spell Checker^[43]拼寫檢查

媽媽再也不擔心我寫錯單詞了。其能檢查拼寫錯誤，并給于提示，非常好的伙伴！

Color Picker^[44]顏色選擇器

那種顏色好看呢，別著急，調出色板，慢慢選擇吧。

Sort Typescript imports^[45]import自動排序

導入太多的庫了，眼花撩順，這款插件讓他們有序排列， 強迫癥患者的福星。我記得eslint好像也有類似的規則。

Bracket Pair Colorizer 2^[46]括號對齊利器

代碼寫太多，大括號太多，都不知道誰是誰的誰呢，這款插件給你明示。

vscode-icon^[47]文件圖標

讓 vscode 資源樹目錄加上圖標，賞心悅目！

npm^[48]npm擴展

這個擴展支持運行 package.json 文件中定義的 npm 腳本，并根據 package.json 中定義的依賴項驗證已安裝的模塊。是不是很酷！

Project Manager^[49]項目管理利器

它可以幫助你輕松地訪問你的項目，不管它們位于哪里。不要再錯過那些重要的項目了。

Live Sass Compiler^[50]SASS實時編譯

一個 VSCode 擴展，它可以幫助您實時地將 SASS/SCSS 文件編譯/傳輸到 CSS 文件中，并實時重新加載瀏覽器。

Todo Tree^[51]TODO展示

把你的TODO事項以樹形結構列出來，再也不擔心忘記點啥呢

Markdown PDF^[52]markdown轉PDF

markdown寫完文章，順便生成pdf, 真的是6啊

寫在最后

如果你覺得不錯，你的一贊一評就是我前行的最大動力。

技術交流群請到這里來^[53]。或者添加我的微信 dirge-cloud，一起學習。

引用

精選！15 個必備的 VSCode 插件（前端類）^[54]
VSCode拓展推薦（前端開發）^[55]
VSCode前端必備插件，有可能你裝了卻不知道如何使用？^[56]
marketplace.visualstudio^[57]

參考資料

[1]

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dxabikos.JavaScriptSnippets

[2]

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Ddsznajder.es7-react-js-snippets

[3]

https://marketplace.visualstudio.com/items?itemName=jcbuisson.vue:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Djcbuisson.vue

[4]

https://marketplace.visualstudio.com/items?itemName=octref.vetur:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Doctref.vetur

[5]

https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dhollowtree.vue-snippets

[6]

https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dsdras.vue-vscode-snippets

[7]

https://www.cnblogs.com/dotnetcrazy/p/9950431.html:https://link.juejin.cn?target=https%3A%2F%2Fwww.cnblogs.com%2Fdotnetcrazy%2Fp%2F9950431.html

[8]

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Ddbaeumer.vscode-eslint

[9]

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Desbenp.prettier-vscode

[10]

https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DHookyQR.beautify

[11]

https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dtecher.open-in-browser

[12]

https://marketplace.visualstudio.com/items?itemName=traBpUkciP.vscode-npm-scripts:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DtraBpUkciP.vscode-npm-scripts

[13]

https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dwmaurer.change-case

[14]

https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-debug:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dms-vscode.js-debug

[15]

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dritwickdey.LiveServer

[16]

https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dformulahendry.code-runner

[17]

https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dshd101wyy.markdown-preview-enhanced

[18]

https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dyzhang.markdown-all-in-one

[19]

https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Ddonjayamanne.githistory

[20]

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Deamodio.gitlens

[21]

https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dkisstkondoros.vscode-gutter-preview

[22]

https://marketplace.visualstudio.com/items?itemName=MariusAlchimavicius.json-to-ts:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DMariusAlchimavicius.json-to-ts

[23]

https://marketplace.visualstudio.com/items?itemName=mikey.vscode-fileheader:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dmikey.vscode-fileheader

[24]

https://marketplace.visualstudio.com/items?itemName=OBKoro1.korofileheader:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DOBKoro1.korofileheader

[25]

https://marketplace.visualstudio.com/items?itemName=OBKoro1.korofileheader:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DOBKoro1.korofileheader

[26]

https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dchristian-kohler.npm-intellisense

[27]

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dwix.vscode-import-cost

[28]

https://marketplace.visualstudio.com/items?itemName=MikeBovenlander.formate:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DMikeBovenlander.formate

[29]

https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dwayou.vscode-todo-highlight

[30]

https://marketplace.visualstudio.com/items?itemName=stevencl.addDocComments:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dstevencl.addDocComments

[31]

https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dmikestead.dotenv

[32]

https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dabusaidm.html-snippets

[33]

https://marketplace.visualstudio.com/items?itemName=ergenekonyigit.vscode-wrap-console-log-lite:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dergenekonyigit.vscode-wrap-console-log-lite

[34]

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DWallabyJs.quokka-vscode

[35]

https://marketplace.visualstudio.com/items?itemName=humao.rest-client:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dhumao.rest-client

[36]

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dchristian-kohler.path-intellisense

[37]

https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-faker:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Ddeerawan.vscode-faker

[38]

https://marketplace.visualstudio.com/items?itemName=chrmarti.regex:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dchrmarti.regex

[39]

https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dcssho.vscode-svgviewer

[40]

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dformulahendry.auto-close-tag

[41]

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dformulahendry.auto-rename-tag

[42]

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dpranaygp.vscode-css-peek

[43]

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dstreetsidesoftware.code-spell-checker

[44]

https://marketplace.visualstudio.com/items?itemName=anseki.vscode-color:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Danseki.vscode-color

[45]

https://marketplace.visualstudio.com/items?itemName=miclo.sort-typescript-imports:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dmiclo.sort-typescript-imports

[46]

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DCoenraadS.bracket-pair-colorizer-2

[47]

https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dvscode-icons-team.vscode-icons

[48]

https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Deg2.vscode-npm-script

[49]

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dalefragnani.project-manager

[50]

https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dritwickdey.live-sass

[51]

https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DGruntfuggly.todo-tree

[52]

https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dyzane.markdown-pdf

[53]

https://juejin.cn/pin/6994350401550024741:https://juejin.cn/pin/6994350401550024741

[54]

https://zhuanlan.zhihu.com/p/27905838:https://link.juejin.cn?target=https%3A%2F%2Fzhuanlan.zhihu.com%2Fp%2F27905838

[55]

https://github.com/varHarrie/varharrie.github.io/issues/10:https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2FvarHarrie%2Fvarharrie.github.io%2Fissues%2F10

[56]

https://juejin.cn/post/6844903982033272845:https://juejin.cn/post/6844903982033272845

[57]

https://marketplace.visualstudio.com/:https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2F

作者：云的世界
https://juejin.cn/post/6997186741866070023

學習更多技能

請點擊下方公眾號

總結

以上是生活随笔為你收集整理的40+个精选的VSCode前端插件，总有一款适合你的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。