前言

是我們前端開發(fā)的利器。 本文精選了40+個插件，讓其更加鋒利，堅(jiān)不可摧！ ！添加了兩個很棒的插件

另外兩個也不錯，但不推薦。

必要的

我不會討論以下要點(diǎn)。

代碼片段

代碼檢查和格式化

其他

由于自身功能的增強(qiáng)，NPM-[16]、Case[17]等插件不需要專門安裝。 下次更精彩！ ！ ！ 全程高能動畫畫面，請勿分心！

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

內(nèi)置新版本。

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

如下圖，首先配置.json

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

啟動具有靜態(tài)和動態(tài)頁面實(shí)時重新加載功能的本地開發(fā)服務(wù)器。

這也是我最喜歡的插件之一。 右鍵一鍵啟動就可以了，而且還支持熱等待，很爽。

代碼 [20] 代碼運(yùn)行器

最喜歡的插件沒有三個。 我通常會寫一些測試代碼和一些邏輯庫。 我使用快捷鍵Ctrl+Alt+M，喝點(diǎn)水，然后看看結(jié)果。 很悠閑啊

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

[21] AI代碼補(bǔ)全插件

感謝評論區(qū)的推薦。 這是一款人工智能代碼補(bǔ)全工具，可以更快、更少錯誤地完成代碼。 它支持多種語言，并且有記憶功能，真是強(qiáng)大。

我用過并且喜歡它

[22] 尾隨空格去除插件

突出顯示空格并提供一鍵刪除。

[23] 編輯和預(yù)覽

？ 事實(shí)上sublime text 查看插件，沒有必要。 這個插件可以讓你邊編輯邊預(yù)覽，編程體驗(yàn)不比掘金差。

如果你需要更多的功能，比如TODO，或者同時修改多行，All in One[24]是一個不錯的選擇。

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

Git [25] 和 [26] Git 歷史

誰動了我的代碼？ 直接在里面查看 Git 歷史記錄、搜索和版本比較。 清爽！ ！

它也有內(nèi)置的時間軸功能，但其能力還是較弱。

更強(qiáng)大、無縫的 Git 存儲庫導(dǎo)航和瀏覽。

圖片 [27] 圖片預(yù)覽

用CSS編寫，再也不用擔(dān)心寫錯圖片地址了！

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

JSON 轉(zhuǎn) TS[28] json 轉(zhuǎn) TS 語句

現(xiàn)在的前端誰沒寫過，但是如何生成聲明文件呢？ 如果你用手寫，那你就太out了。 該插件一鍵生成。

別人得心應(yīng)手，我在喝茶微笑。

-[29] 和 [30] 進(jìn)行文件注釋

某天有人寫，某天有人更新。 你來這里留下的腳印，一眼就能看穿！

如果你覺得這些信息還不夠，[31]提供了更多的監(jiān)督注釋，并且還支持生成的函數(shù)注釋。

npm [32] npm 模塊導(dǎo)入智能提示

npm模塊那么多，你記性不好，腦子不快，沒關(guān)系，這個插件會解決你的后顧之憂。

Cost[33]依賴包大小提示

一旦我們得到這么多的套餐，你介紹它們需要多少錢？ 如果你已經(jīng)知道費(fèi)用，就交給她吧！

：CSS/LESS/SCSS [34]css樣式美化

內(nèi)置css格式化功能，該模型支持less和scss，高效美觀，就像你一樣！

TODO [35] 突出顯示 TODO

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

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

添加jsdoc [36]在方法中添加JSDoc

自動將 JSDoc 添加到方法中。 別說我不會寫評論。 我對我寫的每一行代碼負(fù)責(zé)！ ！ ！

[37] env 文件高亮顯示

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

HTML [38] html 代碼片段

該插件可以快速輸出html代碼。 效率源于懶惰，對嗎？

Wrap Log Lite[39] 快速輸出變量

我們經(jīng)常使用.log輸出變量來檢查執(zhí)行狀態(tài)。 該插件直接為您生成圖書發(fā)布代碼。 你可以很懶，也可以非常懶。

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

您無需運(yùn)行代碼即可知道其結(jié)果。 這種編程體驗(yàn)是無與倫比的。 花更多時間在邏輯上。

REST [41] 休息請求

如果要請求某個站點(diǎn)的接口，axios？，？，否否否sublime text 查看插件，直接打開VS code，直接發(fā)送請求即可。

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

路徑[42]參考路徑智能提示

-faker[43] 生成假數(shù)據(jù)

誰沒有創(chuàng)造過一些虛假數(shù)據(jù)？ 就這么簡單！

Regex [44] 編寫正則表達(dá)式時觀察結(jié)果

您可以在編寫正則表達(dá)式時看到結(jié)果。 這樣調(diào)試起來真的很方便！ ！ ！

SVG [45] SVG 文件預(yù)覽

到處預(yù)覽svg文件并將其變成圖片，強(qiáng)大的工具！

自動關(guān)閉標(biāo)簽[46] 自動關(guān)閉標(biāo)簽

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

自動標(biāo)簽[47]標(biāo)簽重命名

自動重命名 HTML/XML 標(biāo)簽對，與 IDE 相同。

我們有時總會犯錯誤，所以這可以減少犯錯誤后的修復(fù)成本。

CSS Peek[48] CSS 定位器

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

代碼拼寫 [49] 拼寫檢查

媽媽再也不用擔(dān)心我寫錯字了。 它可以檢查拼寫錯誤并給出提示。 它是一個非常好的伴侶！

顏色 [50] 顏色選擇器

那個顏色看起來不錯，不用擔(dān)心，調(diào)整調(diào)色板慢慢選擇。

排序【51】自動排序

導(dǎo)入的庫太多了，眼睛都看花了。 這個插件可以讓它們排列得井井有條，這對于強(qiáng)迫癥患者來說是一件幸事。 我記得好像也有類似的規(guī)定。

對 2[52] 支架對齊工具

你寫了太多的代碼，太多的大括號，你不知道誰屬于誰。 這個插件會讓你一目了然。

-icon[53] 文件圖標(biāo)

讓資源樹目錄添加圖標(biāo)，賞心悅目！

npm[54] npm 擴(kuò)展

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

[55] 項(xiàng)目管理工具

它可以幫助您輕松訪問您的項(xiàng)目，無論它們位于何處。 不要再錯過那些重要的項(xiàng)目。

Live Sass [56] SASS實(shí)時編譯

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

待辦事項(xiàng)樹[57] TODO顯示

以樹形結(jié)構(gòu)列出您的待辦事項(xiàng)，這樣您就不必再擔(dān)心忘記什么了。

PDF[58] 轉(zhuǎn) PDF

寫完文章后，我生成了一個pdf。 真的是6。

引用

精選！ 15個必備插件（前端）[59]

擴(kuò)展建議（前端開發(fā)）[60]

前端必備插件。 也許您已經(jīng)安裝了但不知道如何使用？ [61]

.[62]

參考

[1]

:

[2]

:

[3]

榮注：

[4]

:

[5]

（ES6）代碼：

[6]

ES7 React/Redux//React- :

[7]

視圖：

[8]

維圖爾：

[9]

視圖3：

[10]

視圖：

[11]

創(chuàng)建自定義片段：

[12]

:

[13]

- 代碼：

[14]

:

[15]

打開 ：

[16]

npm-：

[17]

案件：

[18]

代碼-js-調(diào)試：

[19]

居住 ：

[20]

代碼：

[21]

:

[22]

:

[23]

:

[24]

一體：

[25]

git：

[26]

:

[27]

圖像：

[28]

JSON 轉(zhuǎn) TS：

[29]

-：

[30]

:

[31]

:

[32]

節(jié)點(diǎn)管理：

[33]

成本：

[34]

/少/SCSS : :

[35]

去做：

[36]

添加jsdoc：

[37]

:

[38]

HTML：

[39]

包裹日志精簡版：

[40]

.js：

[41]

休息：

[42]

小路：

[43]

-騙子：

[44]

正則表達(dá)式：

[45]

SVG：

[46]

自動關(guān)閉標(biāo)簽：

[47]

自動標(biāo)簽：

[48]

CSS 一覽：

[49]

代碼拼寫：

[50]

顏色：

[51]

種類：

[52]

對 2：

[53]

-圖標(biāo)：

[54]

節(jié)點(diǎn)管理：

[55]

:

[56]

現(xiàn)場薩斯：

[57]

都都樹：

[58]

:

[59]

精選！ 15個必備插件（前端類）：

[60]

擴(kuò)展建議（前端開發(fā)）：

[61]

前端必備插件。 也許您已經(jīng)安裝了但不知道如何使用？ :

[62]

.:

-EOF-

如有侵權(quán)請聯(lián)系刪除！