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