VSCode中值得推薦的常用的33個高效前端外掛「效率篇」(二)

語言: CN / TW / HK

VSCode 是我們前端開發的一個強大的IDE,所以選擇趁手好用的外掛是提高開發效率,然後剩下的時間用來摸魚是很有必要滴。

Path Intellisense

Path Intellisense: *自動完成檔名的 Visual Studio Code 外掛 *。

Path Autocomplete

Path Autocomplete : *為 Visual Studio 程式碼提供路徑補全 *。

    • 它支援相對路徑(以 ./ 開頭)
    • 它支援工作區的絕對路徑(以 / 開頭)
    • 它支援檔案系統的絕對路徑(以:C : 開頭)
    • 它支援相對於使用者資料夾的路徑(以 ~ 開頭)
    • 它支援部分路徑(./tmp/fol 將建議 ./tmp/folder1 如果存在)
    • path-autocomplete.excludedItems 它通過選項 支援專案排除
    • 它支援 npm 包(以 az 開頭,與磁碟無關)
    • 支援選擇資料夾後自動建議
    • path-autocomplete.pathMappings 它通過選項 支援自定義對映
    • 它支援通過自定義轉換插入的文字 path-autocomplete.transformations
    • 它支援 Windows 路徑path-autocomplete.useBackslash

Import Cost

Import Cost : 此擴充套件將在編輯器中內聯顯示匯入包的大小。該擴充套件使用 webpack 來檢測匯入的大小。

    • 預設匯入: import Func from 'utils';
    • 全部內容匯入: import * as Utils from 'utils';
    • 選擇性匯入: import {Func} from 'utils';
    • 使用別名選擇性匯入: import {orig as alias} from 'utils';
    • 子模組匯入: import Func from 'utils/Func';
    • require:const Func = require('utils').Func;
    • 同時支援 Javascript 和 Typescript

any-rule

any-rule : 這下在使用正則判斷表單內容時就不用每次都到處去百度了。

    • command+shift+p、fn+F1(Mac) / Ctrl+shift+p(Window),然後輸入關鍵詞搜尋,比如:“手機”
    • 右鍵選擇“ 🦕 正則大全”

Rainbow Brackets

Rainbow Brackets: 為圓括號、方括號和波浪形括號提供彩虹色。

indent-rainbow

indent-rainbow : 此擴充套件為文字前面的縮排著色,每一步交替使用四種不同的顏色,使程式碼的縮排更具可讀性。

此外掛預設是空白的背景顏色來展現縮排的,如果想要設定成線條模式來展現縮排,可以在 settings.json 檔案中按如下配置:

// Using the light mode "indentRainbow.indicatorStyle": "light", // we use a simple 1 pixel wide line "indentRainbow.lightIndicatorStyleLineWidth": 1, // the same colors as above but more visible "indentRainbow.colors": [ "rgba(255,255,64,0.3)", "rgba(127,255,127,0.3)", "rgba(255,127,255,0.3)", "rgba(79,236,236,0.3)" ]

Highlight Matching Tag

Hightlight Matching Tag : 此擴充套件突出顯示匹配的開始和/或結束標籤。

TODO Highlight

TODO Hightlight : 有時,在將程式碼釋出到生產環境之前,您會忘記檢視在編碼時新增的 TODO。所以我一直想要一個擴充套件來突出它們並提醒我還有筆記或尚未完成的事情。

    • material night 顏色的主題
    • material night eighties 顏色的主題

Quokka.js

Quokka.js : 當您鍵入時,執行時值和帶顏色的小圖示會更新並顯示在您的程式碼旁邊的 IDE 中,綠色表示該行已被執行,紅色表示該行是錯誤的來源,灰色表示沒有被執行。

Bookmarks

Bookmarks : 書籤,它可以幫助您在程式碼中導航,輕鬆快速地在重要位置之間移動。

    • Bookmarks: Toggle用書籤標記/取消標記位置
    • Bookmarks: Toggle Labeled標記標記的書籤
    • Bookmarks: Jump to Next將游標向前移動,到下面的書籤
    • Bookmarks: Jump to Previous將游標向後移動到上面的書籤
    • Bookmarks: List列出當前檔案中的所有書籤
    • Bookmarks: List from All Files列出所有檔案中的所有書籤
    • Bookmarks: Clear刪除當前檔案中的所有書籤
    • Bookmarks: Clear from All Files從所有檔案中刪除所有書籤
    • Bookmarks (Selection): Select Lines選擇所有包含書籤的行
    • Bookmarks (Selection): Expand Selection to Next將所選文字展開到下一個書籤
    • Bookmarks (Selection): Expand Selection to Previous將所選文字展開到上一個書籤
    • Bookmarks (Selection): Shrink Selection將選擇文字縮小到上一個/下一個書籤

後續如有發現更多更好的外掛將繼續分享。安裝太多的外掛恐會影響 VSCode 的啟動速度,同時增加記憶體的佔用,可能影響開發效率,最終適得其反,所以建議只安裝自己喜歡的、常用的即可。