有句話說(shuō)，事半功倍，一定是個(gè)人想法和工具的運(yùn)用。

是我們后端開(kāi)發(fā)的設(shè)備。 本文精選的40+個(gè)插件，讓它變得更加犀利，所向無(wú)敵！ ！

必要的

下面我就不講必要的事情了。

代碼片段

您還可以自定義代碼段，請(qǐng)參閱創(chuàng)建自定義代碼段[7]

代碼檢測(cè)和低格式

其他

由于自身功能的完善，NPM-[12]、Case[13]等插件不需要專門安裝。

拿出來(lái)更精彩！ ！ ！ 全程高能動(dòng)畫，請(qǐng)勿分心！

實(shí)用高效的工具 scode-js-debug[14]調(diào)試神器

新版本是外部的。

可用于調(diào)試Node.js、Edge、擴(kuò)展等，替代for插件。 還可以調(diào)試、Web，功能極其強(qiáng)大。

下面演示一下，首先配置一下.json

實(shí)時(shí)[15]靜態(tài)服務(wù)器

啟動(dòng)本地開(kāi)發(fā)服務(wù)器，并實(shí)時(shí)重新加載靜態(tài)和動(dòng)態(tài)頁(yè)面。

這也是我最喜歡的插件之一。 右鍵啟動(dòng)，而且還支持加熱等，很酷。

-live---菜單演示-1.[16] 代碼運(yùn)行者

最喜歡的插件，無(wú)第三，平時(shí)寫一些測(cè)試代碼，和一些邏輯庫(kù)，快捷鍵Ctrl+Alt+M，喝哈拉子，看結(jié)果，悠閑。

一鍵運(yùn)行多種語(yǔ)言的代碼片段或代碼文件：c、c++、Java、、PHP、、Perl、Perl6、Ruby、Go、Lua、、、BAT/CMD、BASH/SH、f#、f#(. NET Core ）、C# 腳本，超乎你的想象。

用法。[17] 編輯和預(yù)覽

？ 看來(lái)沒(méi)有必要，這個(gè)插件可以讓你邊編輯邊預(yù)覽，而且編程體驗(yàn)并不比差。

.gif

如果您需要更多功能，例如 TODO，或者同時(shí)更改多行， [18] 是一個(gè)不錯(cuò)的選擇。

下面演示了常用的TODO注釋。

-todo。[19] 和 [20] Git 歷史

誰(shuí)動(dòng)了我的代碼？ 正上方，查看Git歷史記錄、搜索、版本比較。 新鮮的！ ！

時(shí)間線的作用也是外在的，能力還比較弱。

.gif

無(wú)縫導(dǎo)航和瀏覽 Git 存儲(chǔ)庫(kù)的增強(qiáng)功能。

-.[21] 圖片預(yù)覽

CSS編譯，再也不怕拿錯(cuò)圖片網(wǎng)址了！

它支持 html 和 css 文件。 當(dāng)使用圖像路徑時(shí)，右側(cè)實(shí)現(xiàn)一個(gè)小型預(yù)覽器，一目了然。

.toTS[22] json 轉(zhuǎn)換為 TS 語(yǔ)句

如今的后端，誰(shuí)不寫一個(gè)，但是如何生成聲明文件呢？ 手寫的話你就太out了。 該插件是一鍵生成的。

他靈巧，我喝酒sublime text 3 js代碼格式化，笑一笑。

.-[23] 和 [24] 備注

某日有人編輯，某日有人更新，來(lái)了留下腳印，一眼就能看穿！

.gif

如果你認(rèn)為這種信息還不夠，[25]提供了更多檢查注釋，并且還支持生成的函數(shù)注釋。

.gif

-.[26]npm模塊導(dǎo)出智能提示

有了這么多的 npm 模塊，無(wú)論你記性不好還是頭腦不好，這個(gè)插件都會(huì)幫助你。

.Cost[27] 取決于包大小提示

這么多套餐，你介紹一下要花多少錢？ 如果你早知道費(fèi)用sublime text 3 js代碼格式化，就交給她吧！

-todo.:CSS/LESS/SCSS[28]css樣式美化

外接css低格式功能，這個(gè)支持less、scss，高效又美觀，就像你一樣！

CSSF。[29] 突出顯示待辦事項(xiàng)

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

有時(shí)，您會(huì)忘記在將代碼發(fā)布到生產(chǎn)環(huán)境之前檢測(cè)編碼時(shí)添加的待辦事項(xiàng)。

hight.jsdoc[30] 將 JSDoc 添加到方法中

手動(dòng)在方法中添加JSDoc，別說(shuō)我不會(huì)寫注釋，我對(duì)我寫的每一行代碼負(fù)責(zé)！ ！ ！

.[31] env 文件高亮顯示

如今，誰(shuí)的配置不需要 env 文件，它沒(méi)有突出顯示，真的很難看，這個(gè)是你的救星。

image.[32]html 代碼片段

這個(gè)插件可以快速輸出html代碼，但是效率比較偷懶，大家都說(shuō)得對(duì)。

.[33] 快捷方式輸出變量

我們經(jīng)常使用.log輸出變量來(lái)檢查執(zhí)行狀態(tài)。 該插件可以直接為您生成書籍代碼。

.js[34]直接顯示變量結(jié)果

您無(wú)需運(yùn)行代碼即可知道其結(jié)果。 這個(gè)編程經(jīng)驗(yàn)沒(méi)有別人，所以多花點(diǎn)時(shí)間講邏輯。

主視頻。[35]休息祈求

如果你想請(qǐng)求某個(gè)站點(diǎn)的，axios？，？，，只要打開(kāi)，直接發(fā)送請(qǐng)求即可。

該插件允許您直接發(fā)送 HTTP 請(qǐng)求并在代碼中查看響應(yīng)。

休息使用(1).[36] 參考路徑智能提示

path-.-faker[37] 生成假數(shù)據(jù)

誰(shuí)沒(méi)有造過(guò)一些假數(shù)據(jù)，就這么簡(jiǎn)單！

-faker。[38] 編寫正則表達(dá)式時(shí)觀察結(jié)果

在編寫正則表達(dá)式時(shí)，您仍然可以看到結(jié)果。 這個(gè)調(diào)試真是方便啊！ ！ ！

.[39] SVG文件預(yù)覽

預(yù)覽svg文件，到處都可以變成圖片，神器！

[40] 手動(dòng)關(guān)閉標(biāo)簽

手動(dòng)添加 HTML/XML 結(jié)束標(biāo)簽，與 IDE 或 Text 相同。

close-tag.Tag[41] 標(biāo)簽重命名

手動(dòng)重命名 HTML/XML 標(biāo)簽對(duì)，與 IDE 相同。

我們總是會(huì)犯錯(cuò)，因此這會(huì)增加事后糾正錯(cuò)誤的成本。

re-usage.Peek[42] css 定位器

我的類在哪里定義的？ 我自己找不到。 我應(yīng)該怎么辦？ 請(qǐng)！ ！

[43] 拼寫檢測(cè)

我的父母不再擔(dān)心我說(shuō)錯(cuò)詞了。 它可以檢測(cè)拼寫錯(cuò)誤并給出提示，非常好的伙伴！

咒語(yǔ)。[44] 選色器

那個(gè)顏色好看，不用擔(dān)心，調(diào)出色卡，慢慢選。

顏色選擇。[45] 人工分揀

導(dǎo)出的庫(kù)太多了，眼睛都看花了。 這個(gè)插件可以讓它們排列得井井有條，對(duì)于強(qiáng)迫癥患者來(lái)說(shuō)是福音。 我記得好像也有類似的規(guī)定。

.Pair2[46]括號(hào)對(duì)齊神器

寫太多代碼，太多花括號(hào)，不知道誰(shuí)是誰(shuí)，這個(gè)插件會(huì)告訴你。

bbb.-icon[47] 文件圖標(biāo)

資源樹(shù)目錄下添加圖標(biāo)，順眼了！

圖標(biāo)。[48] npm 擴(kuò)展

此擴(kuò)展支持運(yùn)行 .json 文件中定義的 npm 腳本，并根據(jù) .json 中定義的依賴項(xiàng)驗(yàn)證已安裝的模塊。 是不是很酷！

圖片.png

圖像。[49] 項(xiàng)目管理神器

它可以幫助您輕松訪問(wèn)您的項(xiàng)目，無(wú)論它們位于何處。 不要再錯(cuò)過(guò)這些重要的物品。

--side-bar-tags(1).Sass[50] SASS 實(shí)時(shí)編譯

該擴(kuò)展可幫助您即時(shí)編譯/傳輸 SASS/SCSS 文件為 CSS 文件，并即時(shí)重新加載瀏覽器。

.Tree[51] TODO顯示

以樹(shù)形結(jié)構(gòu)列出您的 TODO 項(xiàng)目，永遠(yuǎn)不用擔(dān)心忘記什么

圖像.PDF[52] 轉(zhuǎn) PDF

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

.gif寫在最后

如果您感覺(jué)不錯(cuò)，您的點(diǎn)贊和評(píng)論是我前進(jìn)的最大動(dòng)力。

請(qǐng)到這里來(lái)參加技術(shù)交流群[53]。 或者添加我的Momo挽歌云一起學(xué)習(xí)。

引用

精選！ 15 個(gè)必備插件（后端類）[54]

擴(kuò)展推薦（后端開(kāi)發(fā)）[55]

后臺(tái)必備的插件，也許你已經(jīng)安裝了但不知道如何使用？ [56]

.[57]

參考

[1]

:%3A%2F%..com%%%。

[2]

:%3A%2F%..com%%%.es7-react-js-

[3]

:%3A%2F%..com%%%.vue

[4]

:%3A%2F%..com%%%.vetur

[5]

:%3A%2F%..com%%%.vue-

[6]

:%3A%2F%..com%%%.vue--

[7]

:%3A%2F%2F%%2Fp%.html

[8]

:%3A%2F%..com%%%.-

[9]

:%3A%2F%..com%%%.-

[10]

:%3A%2F%..com%%%。

[11]

:%3A%2F%..com%%%.open-in-

[12]

:%3A%2F%..com%%%.-npm-

[13]

:%3A%2F%..com%%%.-case

[14]

:%3A%2F%..com%%%3Dms-.js-調(diào)試

[15]

:%3A%2F%..com%%%。

[16]

:%3A%2F%..com%%%.code-

[17]

:%3A%2F%..com%%%.--

[18]

:%3A%2F%..com%%%.-多合一

[19]

:%3A%2F%..com%%%。

[20]

:%3A%2F%..com%%%。

[21]

:%3A%2F%..com%%%.--

[22]

:%3A%2F%..com%%%s.json-to-ts

[23]

:%3A%2F%..com%%%.-

[24]

:%3A%2F%..com%%%。

[25]

:%3A%2F%..com%%%。

[26]

:%3A%2F%..com%%%-.npm-

[27]

:%3A%2F%..com%%%3Dwix.--成本

[28]

:%3A%2F%..com%%%。

[29]

:%3A%2F%..com%%%.-todo-

[30]

:%3A%2F%..com%%%。

[31]

:%3A%2F%..com%%%。

[32]

:%3A%2F%..com%%%.html-

[33]

:%3A%2F%..com%%%.-wrap--log-lite

[34]

:%3A%2F%..com%%%.-

[35]

:%3A%2F%..com%%%.rest-

[36]

:%3A%2F%..com%%%-.path-

[37]

:%3A%2F%..com%%%.-faker

[38]

:%3A%2F%..com%%%.正則表達(dá)式

[39]

:%3A%2F%..com%%%.-

[40]

:%3A%2F%..com%%%.自動(dòng)關(guān)閉標(biāo)簽

[41]

:%3A%2F%..com%%%.auto--標(biāo)簽

[42]

:%3A%2F%..com%%%.-css-peek

[43]

:%3A%2F%..com%%%.code-spell-

[44]

:%3A%2F%..com%%%.-顏色

[45]

:%3A%2F%..com%%%.sort--

[46]

:%3A%2F%..com%%%.-pair--2

[47]

:%3A%2F%..com%%%-icons-team.-icons

[48]

:%3A%2F%..com%%%3Deg2.-npm-

[49]

:%3A%2F%..com%%%.-

[50]

:%3A%2F%..com%%%.live-sass

[51]

:%3A%2F%..com%%%.todo-tree

[52]

:%3A%2F%..com%%%.-pdf

[53]

:

[54]

:%3A%2F%.zhihu.com%2Fp%

[55]

:%3A%2F%.com%%..io%%2F10

[56]

:

[57]

:%3A%2F%..com%2F

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

推薦閱讀：
Vue 3.2正式發(fā)布，真香！
25個(gè) Vue 技巧，開(kāi)發(fā)了5年了，才知道還能這么用
史上最全 Vue 前端代碼風(fēng)格指南
2021, 九款值得推薦的VUE3 UI框架
推薦 130 個(gè)令你眼前一亮的網(wǎng)站，總有一個(gè)用得著
深入淺出 33 道 Vue 99% 出鏡率的面試題

VUE中文社區(qū)?
編程技巧?·?行業(yè)秘聞?·?技術(shù)動(dòng)向

如有侵權(quán)請(qǐng)聯(lián)系刪除！
                             
TAGS：前端開(kāi)發(fā)   vscode