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 開頭，與磁盤無關）
- 支持選擇文件夾后自動建議
- path-autocomplete.pathMappings它通過選項支持自定義映射
- 它支持通過自定義轉換插入的文本path-autocomplete.transformations
- 它支持 Windows 路徑path-autocomplete.useBackslash
ImportCost
Import Cost : 此擴展將在編輯器中內聯(lián)顯示導入包的大小。該擴展使用 webpack 來檢測導入的大小。
- 插件名：Import Cost
- 官方地址：https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost
- 特征：計算 imports 和 requires 進來的大小。目前支持：
- 默認導入：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 : 這下在使用正則判斷表單內容時就不用每次都到處去百度了。
- 插件名：any-rule
- 官方地址：https://marketplace.visualstudio.com/items?itemName=russell.any-rule
- 用法：
- command+shift+p、fn+F1(Mac) / Ctrl+shift+p(Window)，然后輸入關鍵詞搜索，比如：“手機”
- 右鍵選擇“正則大全”
Rainbow Brackets
Rainbow Brackets: 為圓括號、方括號和波浪形括號提供彩虹色。
- 插件名：Rainbow Brackets
- 官方地址：https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets
indent-rainbow
indent-rainbow : 此擴展為文本前面的縮進著色，每一步交替使用四種不同的顏色，使代碼的縮進更具可讀性。
- 插件名：indent-rainbow
- 官方地址：https://marketplace.visualstudio.com/items?itemName=oderwat.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 : 此擴展突出顯示匹配的開始和/或結束標簽。
- 插件名：Highlight Matching Tag
- 官方地址：https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag
- 特征：
TODO Highlight
TODO Hightlight : 有時，在將代碼發(fā)布到生產環(huán)境之前，您會忘記查看在編碼時添加的 TODO。所以我一直想要一個擴展來突出它們并提醒我還有筆記或尚未完成的事情。
- 插件名：TODO Highlight
- 官方地址：https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
- 預覽：
- material night 顏色的主題
- material night eighties 顏色的主題
Quokka.js
Quokka.js : 當您鍵入時，運行時值和帶顏色的小圖標會更新并顯示在您的代碼旁邊的 IDE 中，綠色表示該行已被執(zhí)行，紅色表示該行是錯誤的來源，灰色表示沒有被執(zhí)行。
- 插件名：Quokka.js
- 官方地址：https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
Bookmarks
Bookmarks : 書簽，它可以幫助您在代碼中導航，輕松快速地在重要位置之間移動。
- 插件名：Bookmarks
- 官方地址：https://marketplace.visualstudio.com/items?itemName=alefragnani.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將選擇文本縮小到上一個/下一個書簽
后續(xù)如有發(fā)現更多更好的插件將繼續(xù)分享。安裝太多的插件恐會影響 VSCode 的啟動速度，同時增加內存的占用，可能影響開發(fā)效率，最終適得其反，所以建議只安裝自己喜歡的、常用的即可。
