40+個(gè)精選的VSCode前端插件，總有一款適合你
有句話，事半功倍，其必然是借助了某些思想和工具。
VSCode是我們前端開發(fā)的武器，本文40+精選插件，讓其更加鋒利，無堅(jiān)不摧！！
必備的
下面這些必備的我就不說了
代碼段
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創(chuàng)建自定義代碼段[7]
代碼檢查和格式化
ESLint[8], Prettier - Code formatter[9], Beautify[10]
其他
open in browser[11]
由于VSCode自身功能的增強(qiáng)，NPM-Scripts[12], Change Case[13]等的插件就不需要特意安裝了。
接下來更精彩！！！， 全程高能動圖，請別分神！
實(shí)用高效工具
scode-js-debug[14] debug利器
新版VSCode內(nèi)置。
可用于調(diào)試Node.js、 Chrome、 Edge、 WebView2、 VS Code 擴(kuò)展等等，替換 Debugger for Chrome 插件。其還可以調(diào)試Service Worker, Web Worker, 功能是異常的強(qiáng)大。
如下的演示，你首先的配置好launch.json
Live Server[15] 靜態(tài)服務(wù)器
為靜態(tài)和動態(tài)頁面啟動具有實(shí)時(shí)重載特性的本地開發(fā)服務(wù)器。
這也是我平時(shí)最喜歡用的插件之一， 右鍵一鍵啟動，還支持熱等，爽字了得。
Code Runner[16] 代碼運(yùn)行器
最喜歡的插件，沒有之三，平時(shí)寫一些測試代碼，和一些邏輯庫，快捷鍵 Ctrl+Alt+M, 喝口水，看一下結(jié)果，悠哉。
一鍵運(yùn)行多種語言運(yùn)行代碼片段或代碼文件: 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編輯和預(yù)覽
typora？其實(shí)不需要的，這款markdown插件，讓你一邊編輯markdonwn一邊預(yù)覽，編程體驗(yàn)不差于掘金那款。
如果需要更多功能比如 TODO, 或者多行同時(shí)修改等, Markdown All in One[18] 是不錯(cuò)的選擇。
下面演示一下常用的TODO便簽。
Git History[19] 和 GitLens[20] Git歷史記錄
誰動了我的代碼？ 直接在VSCode里面，查看Git的歷史，搜索，版本對比。清爽！！
VSCode也內(nèi)置了時(shí)間線的功能，但是能力還是弱一些。
GitLens功能更加強(qiáng)大，無縫導(dǎo)航和瀏覽 Git 存儲庫。
Image Preview[21] 圖片預(yù)覽
CSS編寫，再也擔(dān)心寫錯(cuò)圖片地址啦！
其支持在html和css文件里面，當(dāng)有使用圖片路徑的時(shí)候，在左邊實(shí)現(xiàn)小的預(yù)覽器，一眼就知對與錯(cuò)。
JSON to TS[22] json轉(zhuǎn)為TS申明
現(xiàn)在的前端，誰還不寫個(gè)TypeScript，可是咋生成申明文件呢？手寫，那你太out了。這款插件，一鍵生成。
別人手巧，我在喝茶，笑一個(gè)。
vscode-fileheader[23] 和 koroFileHeader[24] 生成文件備注
某人某天編寫，某人某天更新，來過就留下足跡，一眼望穿！
如果你覺得這些信息還不夠，koroFileHeader[25] 提供更督導(dǎo)的注釋， 也同時(shí)支持生成函數(shù)注釋。
npm Intellisense[26] npm模塊導(dǎo)入智能提示
那么多npm模塊，記性不好，腦子不快，沒關(guān)系，這款插件替你分憂。
Import Cost[27] 依賴包大小提示
我們一來那么多包，你引入的成本是多少呢？成本早知道，就交給她吧！
formate: CSS/LESS/SCSS formatter[28] css樣式美化
VSCode內(nèi)置css格式化功能，這款支持less, scss，高效美觀，如你！
TODO Highlight[29] 高亮TODO
在代碼中突出顯示 TODO、 FIXME 和其他注釋。
有時(shí)候，在將代碼發(fā)布到生產(chǎn)環(huán)境之前，您會忘記檢查在編碼時(shí)添加的 todo。
Add jsdoc comments[30] 給方法添加JSDoc
自動給方法添加JSDoc, 可別說我不會寫注釋, 我對我寫的每一行代碼負(fù)責(zé)！！！
DotENV[31] env文件高亮
這年頭，誰的配置還沒不用個(gè)env文件，沒高亮，真難看，這款就是你的救星。
HTML Snippets[32] html代碼段
此插件能快速的輸出html代碼， 效率就是懶出來的，你們說對吧。
Wrap Console Log Lite[33] 快捷的輸出變量
我們經(jīng)常使用console.log輸出變量來查看執(zhí)行情況，這插件，直接給你生成出書代碼，懶的可以啊，懶到極致。
Quokka.js[34] 直接顯示變量結(jié)果
不用運(yùn)行，就能知道你的代碼結(jié)果，這編程體驗(yàn)也是沒誰了，把更多時(shí)間話費(fèi)在邏輯上吧。
REST Client[35] rest請求
想請求某個(gè)站點(diǎn)的接口，axios?, express? , No No No , 打開VS code直接發(fā)請求就好。
此插件允許您直接發(fā)送 HTTP 請求并查看 visualstudio 代碼中的響應(yīng)。
Path Intellisense[36] 引用路徑智能提示
vscode-faker[37] 生成虛假數(shù)據(jù)
誰還沒造點(diǎn)假數(shù)據(jù)，就這么簡單！
Regex Previewer[38] 邊寫正則邊看結(jié)果
一邊寫正則，一邊就能看到結(jié)果，這調(diào)試真的太方便了！！！
SVG Viewer[39] SVG文件預(yù)覽
預(yù)覽svg文件，還能到處成為圖片，利器！
Auto Close Tag[40] 自動關(guān)閉標(biāo)簽
自動添加 HTML/XML 關(guān)閉標(biāo)記，與 Visual Studio IDE 或 Sublime Text 相同。
Auto Rename Tag[41] 標(biāo)簽重命名
自動重命名成對的 HTML/XML 標(biāo)記，與 Visual Studio IDE 相同。
我們總有時(shí)候會寫錯(cuò)，那么這就可以降低你犯錯(cuò)后修復(fù)成本。
CSS Peek[42] css定位器
我的class在哪定義的，自己都找不到了，怎么辦，有請這位！！
Code Spell Checker[43] 拼寫檢查
媽媽再也不擔(dān)心我寫錯(cuò)單詞了。其能檢查拼寫錯(cuò)誤，并給于提示，非常好的伙伴！
Color Picker[44] 顏色選擇器
那種顏色好看呢，別著急，調(diào)出色板，慢慢選擇吧。
Sort Typescript imports[45] import自動排序
導(dǎo)入太多的庫了，眼花撩順，這款插件讓他們有序排列， 強(qiáng)迫癥患者的福星。我記得eslint好像也有類似的規(guī)則。
Bracket Pair Colorizer 2[46] 括號對齊利器
代碼寫太多，大括號太多，都不知道誰是誰的誰呢，這款插件給你明示。
vscode-icon[47] 文件圖標(biāo)
讓 vscode 資源樹目錄加上圖標(biāo)，賞心悅目！
npm[48] npm擴(kuò)展
這個(gè)擴(kuò)展支持運(yùn)行 package.json 文件中定義的 npm 腳本，并根據(jù) package.json 中定義的依賴項(xiàng)驗(yàn)證已安裝的模塊。 是不是很酷！
Project Manager[49] 項(xiàng)目管理利器
它可以幫助你輕松地訪問你的項(xiàng)目，不管它們位于哪里。不要再錯(cuò)過那些重要的項(xiàng)目了。
Live Sass Compiler[50] SASS實(shí)時(shí)編譯
一個(gè) VSCode 擴(kuò)展，它可以幫助您實(shí)時(shí)地將 SASS/SCSS 文件編譯/傳輸?shù)?CSS 文件中，并實(shí)時(shí)重新加載瀏覽器。
Todo Tree[51] TODO展示
把你的TODO事項(xiàng)以樹形結(jié)構(gòu)列出來，再也不擔(dān)心忘記點(diǎn)啥呢
Markdown PDF[52] markdown轉(zhuǎn)PDF
markdown寫完文章，順便生成pdf, 真的是6啊
寫在最后
如果你覺得不錯(cuò)，你的一贊一評就是我前行的最大動力。
技術(shù)交流群請到 這里來[53]。或者添加我的微信 dirge-cloud，一起學(xué)習(xí)。
引用
精選！15 個(gè)必備的 VSCode 插件（前端類）[54]
VSCode拓展推薦（前端開發(fā)）[55]
VSCode前端必備插件，有可能你裝了卻不知道如何使用？[56]
marketplace.visualstudio[57]
參考資料
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
學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號
學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號