VSCode中值得推荐的常用的33个高效前端插件「效率篇」（二）

VSCode 是我们前端开发的一个强大的IDE，所以选择趁手好用的插件是提高开发效率，然后剩下的时间用来摸鱼是很有必要滴。

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

• 官方地址： marketplace.visualstudio.com/items?itemN…

• 特征：

• • 它支持相对路径（以 ./ 开头）* 它支持工作区的绝对路径（以 / 开头）* 它支持文件系统的绝对路径（以：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 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
• 官方地址： marketplace.visualstudio.com/items?itemN…

此插件默认是空白的背景颜色来展现缩进的，如果想要设置成线条模式来展现缩进，可以在 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 : 有时，在将代码发布到生产环境之前，您会忘记查看在编码时添加的 TODO。所以我一直想要一个扩展来突出它们并提醒我还有笔记或尚未完成的事情。

• 插件名：TODO Highlight

• 官方地址： https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

• 预览：

• • material night 颜色的主题
• • • 
• • material night eighties 颜色的主题
• • • 

Quokka.js

Quokka.js : 当您键入时，运行时值和带颜色的小图标会更新并显示在您的代码旁边的 IDE 中，绿色表示该行已被执行，红色表示该行是错误的来源，灰色表示没有被执行。

• 插件名： Quokka.js
• 官方地址： marketplace.visualstudio.com/items?itemN…

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将选择文本缩小到上一个/下一个书签

后续如有发现更多更好的插件将继续分享。安装太多的插件恐会影响 VSCode 的启动速度，同时增加内存的占用，可能影响开发效率，最终适得其反，所以建议只安装自己喜欢的、常用的即可。