有句話說，事半功倍，必須借助一定的思路和工具。

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

必要的

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

代碼片段

您還可以自定義代碼段。 您可以參考創(chuàng)建自定義代碼段[7]

代碼檢查和格式化

其他

由于自身功能的增強(qiáng)，NPM-[12]、Case[13]等插件不需要專門安裝。

下次更精彩！ ！ ！ 全程高能動畫畫面，請勿分心！

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

內(nèi)置新版本。

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

如下圖，首先配置.json

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

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

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

-live---菜單演示-1。 [16] 代碼運(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#腳本，超乎你的想象。

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

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

.gif

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

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

-去做。 [19] 和 [20] Git 歷史

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

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

.gif

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

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

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

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

。 到 TS[22] json 到 TS 語句

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

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

.-[23] 和 [24] 注釋

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

.gif

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

.gif

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

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

。 Cost[27]依賴包大小提示

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

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

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

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

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

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

高。 jsdoc [30] 將 JSDoc 添加到方法中

自動給方法添加JSDoc，別說我不會寫注釋，我對我寫的每一行代碼負(fù)責(zé)！ ！ ！

.[31] env 文件高亮顯示

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

圖像。 [32] html代碼片段

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

。 Log Lite[33] 快速輸出變量

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

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

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

主視頻。 [35] 休息請求

如果要請求某個站點(diǎn)的接口，axios？，？，否否否sublime text 格式化代碼快捷鍵，直接打開VS code，直接發(fā)送請求即可。

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

休息使用（1）。 [36]參考路徑智能提示

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

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

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

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

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

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

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

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

關(guān)閉標(biāo)簽。 標(biāo)簽[41]標(biāo)簽重命名

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

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

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

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

代碼拼寫 [43] 拼寫檢查

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

拼寫。 [44] 顏色選擇器

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

顏色選擇。 [45]自動排序

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

。 對 2[46] 支架對齊工具

你寫了太多的代碼sublime text 格式化代碼快捷鍵，太多的大括號，你不知道誰屬于誰。 這個插件會讓你一目了然。

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

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

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

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

圖片.png

圖像。 [49] 項(xiàng)目管理工具

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

--側(cè)欄標(biāo)簽 (1)。 Sass [50] SASS實(shí)時編譯

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

.Tree[51] TODO顯示

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

圖像。 PDF[52] 轉(zhuǎn)換為 PDF

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

.gif寫在最后

如果您覺得不錯，您的點(diǎn)贊和評論就是我前進(jìn)的最大動力。

請到這里來參加技術(shù)交流群[53]。 或者添加我的微信dirge-cloud一起學(xué)習(xí)。

引用

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

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

前端必備插件。 也許您已經(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%%%.-案例

[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%%%.自動關(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個 Vue 技巧，開發(fā)了5年了，才知道還能這么用
史上最全 Vue 前端代碼風(fēng)格指南
2021, 九款值得推薦的VUE3 UI框架
推薦 130 個令你眼前一亮的網(wǎng)站，總有一個用得著
深入淺出 33 道 Vue 99% 出鏡率的面試題

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

如有侵權(quán)請聯(lián)系刪除！
                             
TAGS：插件   預(yù)覽   前端   利器   注釋