VSCode 是我們前端開(kāi)發(fā)的一個(gè)強(qiáng)大的IDE，所以選擇趁手好用的插件是提高開(kāi)發(fā)效率，然后剩下的時(shí)間用來(lái)摸魚(yú)是很有必要滴。
效率篇（33）
Path Intellisense
Path Intellisense: 自動(dòng)完成文件名的 Visual Studio Code 插件。
- 插件名：Path Intellisense
- 官方地址：https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
- 用法：
Path Autocomplete
Path Autocomplete : 為 Visual Studio 代碼提供路徑補(bǔ)全。
- 插件名：Path Autocomplete
- 官方地址：https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete
- 特征：
- 它支持相對(duì)路徑（以 ./ 開(kāi)頭）
- 它支持工作區(qū)的絕對(duì)路徑（以 / 開(kāi)頭）
- 它支持文件系統(tǒng)的絕對(duì)路徑（以：C : 開(kāi)頭）
- 它支持相對(duì)于用戶文件夾的路徑（以 ~ 開(kāi)頭）
- 它支持部分路徑（./tmp/fol 將建議 ./tmp/folder1 如果存在）
- path-autocomplete.excludedItems它通過(guò)選項(xiàng)支持項(xiàng)目排除
- 它支持 npm 包（以 az 開(kāi)頭，與磁盤(pán)無(wú)關(guān)）
- 支持選擇文件夾后自動(dòng)建議
- path-autocomplete.pathMappings它通過(guò)選項(xiàng)支持自定義映射
- 它支持通過(guò)自定義轉(zhuǎn)換插入的文本path-autocomplete.transformations
- 它支持 Windows 路徑path-autocomplete.useBackslash
ImportCost
Import Cost : 此擴(kuò)展將在編輯器中內(nèi)聯(lián)顯示導(dǎo)入包的大小。該擴(kuò)展使用 webpack 來(lái)檢測(cè)導(dǎo)入的大小。
- 插件名：Import Cost
- 官方地址：https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost
- 特征：計(jì)算 imports 和 requires 進(jìn)來(lái)的大小。目前支持：
- 默認(rèn)導(dǎo)入：import Func from ‘utils’;
- 全部?jī)?nèi)容導(dǎo)入：import * as Utils from ‘utils’;
- 選擇性導(dǎo)入：import {Func} from ‘utils’;
- 使用別名選擇性導(dǎo)入：import {orig as alias} from ‘utils’;
- 子模塊導(dǎo)入：import Func from ‘utils/Func’;
- require：const Func = require(‘utils’).Func;
- 同時(shí)支持 Javascript 和 Typescript
any-rule
any-rule : 這下在使用正則判斷表單內(nèi)容時(shí)就不用每次都到處去百度了。
- 插件名：any-rule
- 官方地址：https://marketplace.visualstudio.com/items?itemName=russell.any-rule
- 用法：
- command+shift+p、fn+F1(Mac) / Ctrl+shift+p(Window)，然后輸入關(guān)鍵詞搜索，比如：“手機(jī)”
- 右鍵選擇“正則大全”
Rainbow Brackets
Rainbow Brackets: 為圓括號(hào)、方括號(hào)和波浪形括號(hào)提供彩虹色。
- 插件名：Rainbow Brackets
- 官方地址：https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets
indent-rainbow
indent-rainbow : 此擴(kuò)展為文本前面的縮進(jìn)著色，每一步交替使用四種不同的顏色，使代碼的縮進(jìn)更具可讀性。
- 插件名：indent-rainbow
- 官方地址：https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
此插件默認(rèn)是空白的背景顏色來(lái)展現(xiàn)縮進(jìn)的，如果想要設(shè)置成線條模式來(lái)展現(xiàn)縮進(jìn)，可以在 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 : 此擴(kuò)展突出顯示匹配的開(kāi)始和/或結(jié)束標(biāo)簽。
- 插件名：Highlight Matching Tag
- 官方地址：https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag
- 特征：
TODO Highlight
TODO Hightlight : 有時(shí)，在將代碼發(fā)布到生產(chǎn)環(huán)境之前，您會(huì)忘記查看在編碼時(shí)添加的 TODO。所以我一直想要一個(gè)擴(kuò)展來(lái)突出它們并提醒我還有筆記或尚未完成的事情。
- 插件名：TODO Highlight
- 官方地址：https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
- 預(yù)覽：
- material night 顏色的主題
- material night eighties 顏色的主題
Quokka.js
Quokka.js : 當(dāng)您鍵入時(shí)，運(yùn)行時(shí)值和帶顏色的小圖標(biāo)會(huì)更新并顯示在您的代碼旁邊的 IDE 中，綠色表示該行已被執(zhí)行，紅色表示該行是錯(cuò)誤的來(lái)源，灰色表示沒(méi)有被執(zhí)行。
- 插件名：Quokka.js
- 官方地址：https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
Bookmarks
Bookmarks : 書(shū)簽，它可以幫助您在代碼中導(dǎo)航，輕松快速地在重要位置之間移動(dòng)。
- 插件名：Bookmarks
- 官方地址：https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks
- 特征：可用命令
- Bookmarks: Toggle用書(shū)簽標(biāo)記/取消標(biāo)記位置
- Bookmarks: Toggle Labeled標(biāo)記標(biāo)記的書(shū)簽
- Bookmarks: Jump to Next將光標(biāo)向前移動(dòng)，到下面的書(shū)簽
- Bookmarks: Jump to Previous將光標(biāo)向后移動(dòng)到上面的書(shū)簽
- Bookmarks: List列出當(dāng)前文件中的所有書(shū)簽
- Bookmarks: List from All Files列出所有文件中的所有書(shū)簽
- Bookmarks: Clear刪除當(dāng)前文件中的所有書(shū)簽
- Bookmarks: Clear from All Files從所有文件中刪除所有書(shū)簽
- Bookmarks (Selection): Select Lines選擇所有包含書(shū)簽的行
- Bookmarks (Selection): Expand Selection to Next將所選文本展開(kāi)到下一個(gè)書(shū)簽
- Bookmarks (Selection): Expand Selection to Previous將所選文本展開(kāi)到上一個(gè)書(shū)簽
- Bookmarks (Selection): Shrink Selection將選擇文本縮小到上一個(gè)/下一個(gè)書(shū)簽
后續(xù)如有發(fā)現(xiàn)更多更好的插件將繼續(xù)分享。安裝太多的插件恐會(huì)影響 VSCode 的啟動(dòng)速度，同時(shí)增加內(nèi)存的占用，可能影響開(kāi)發(fā)效率，最終適得其反，所以建議只安裝自己喜歡的、常用的即可。
