[开发工具]前端web开发高效vscode插件分享（辩证的海量实战检验）

前言

从最初眼花缭乱的各种 vscode 插件个个都想用，觉得很腻害，到现在经过无数业务的考验和编码的历练，大幅淘汰了一些华而不实的插件，得到了最终能提高编码效率的沉淀。

在开始之前，我们需要明确的是天下没有免费的午餐，也没有完美的插件，用的越多，暴露的 corner case 越多，我们要辩证的看待每个插件给我们带来的收益和副作用，究竟是否符合自己。

插件

驼峰翻译助手

介绍：一键中文换英文，支持驼峰和全大写、全小写等转换，十分好用，嘤语苦手必备。

缺点：自带的几个源有时候会不好用，最终还是要走向百度翻译等翻译站点身体力行。

使用频率：★★★★

any-rule

介绍：内置数十种正则匹配，很长很细致，相当于一个正则存储后备库，免去记忆正则的烦恼。

缺点：不常用，另外判断太细致有时候对某些场景也不太友好。

使用频率：★

Auto Close Tag

介绍：自动闭合标签，输入前标签自动生成后标签。

缺点：不智能，经常生成多余，需要自己再改，凑付使用吧。

使用频率：被动触发

Auto Rename Tag

介绍：自动同步前后标签的文本，减少重复工作。

缺点：不智能，有时候会出现一些问题，需要自己修复，凑付用。

使用频率：被动触发

background

介绍：自带几个东方的图片显示在 ide 右下角，也可自己定制，纯装饰用。

缺点：会 hack ide，有被破坏的提示，需要点击永不提示，虽然一次即可免去后顾之忧，但不是 100% 完美的。

使用频率：被动使用

Better Comments

介绍：可以在注释开头使用不同的英文符号给该行注释附加高亮颜色，比如高亮一些很重要的注释。

缺点：眼花缭乱的，不常用，只会在有大坑的时候才使用其进行一个明显的高亮标注。

使用频率：★

Bracket Pair Colorizer

介绍：自动给对应的括号附加不同的高亮颜色，方便区分是哪个括号，明确层级。

缺点：不完全智能，有时候层级太多会识别不明确，如果搭配特殊的特性（比如 es6 模板字符串中再使用变量）使用，括号会彻底识别错位。

使用频率：被动使用

Code Runner

介绍：在工作区右上角增加一个快捷执行该文件代码的按钮，可以快速执行该文件查看调试结果，另外支持绑定快捷打开终端快捷键（ ctrl + ~ ），得到快捷打开终端就切换到当前目录的效果。

详情见：《 vscode快捷键快速打开终端到当前目录打开的文件位置 》

缺点：跳转目录都是绝对路径，会占用一片终端输出空间，在 windows 系统上比较慢，有多种执行选项时按钮也要点击两次，不够完美。

使用频率：★★★

CodeSnap

介绍：给选中的代码块生成一个好看的截图，方便 share 给别人看。

缺点：不常用。

使用频率：★

Comment Translate

介绍：可以 hover 到注释上得到该片注释的中文翻译，或选择一部分注释，得到选中区的英文的中文翻译。

缺点：很依赖网络，网络不够高效的话几乎用不了这个插件。

使用频率：★★★★

CSS Modules

介绍：react 中使用 css module 必备，支持快链到对应的 css 位置，按住 ctrl / cmd 点击 className 即可跳转到相应的样式文件内的该样式处。

缺点：不支持嵌套语法，当采用了通用的 [key: string]: any 的样式全局声明时，也无法生效，不生效的 case 比较多，只能在很基础的情况下提供支持。

使用频率：★★

CSS Peek

介绍：提供 class 链到对应样式书写位置的能力。

缺点：没发现有多只能，在 webpack 系项目内发挥的空间不大，适合 jquery 系老旧书写 class 的项目。

使用频率：★

DotENV

介绍：提供 .env.* 系环境变量文件的高亮支持

缺点：不能做到完美的高亮，一些 case 无法高亮

使用频率：被动使用

Dracula Official

介绍：一款粉色系暗色主题，最大的好处是没有红色，不会刺眼。

缺点：某些高亮色系比较不人性，但勉强能用。

使用频率：被动使用

EditorConfig for VS Code

介绍：对 .editorconfig 工作区文件格式规范提供相应的支持，如果没有这个插件，该配置文件将不会生效。可以规避 win 和 linux 系换行符跨平台不一致的问题。

缺点：在目前流行的通用配置中往往会有尾部留行的设定，导致正常从上往下进行编码时，光标会跳一下打断快速编码。

使用频率：被动使用

Emoji

介绍：对没有 emoji 能力或字体的系统提供 emoji 书写选择支持（比如在 win server 系服务器端进行编码）。

缺点：不常用

使用频率：★

es6-string-html

介绍：通过规范注释对 es6 模板字符串提供高亮支持。

缺点：适合 jquery 老旧项目编写使用，不适合现代项目，也适合新手学习期使用。

使用频率：★★

ES7 React/Redux/GraphQL/React-Native snippets

介绍：react 系代码提示必备

缺点：内置规则太多，很多不太常用，有大而全但只需取一瓢的体感，有时候选择太多会干扰编码

使用频率：★★★★★

ESLint

介绍：搭配 eslint 进行自动代码修复使用，必备

缺点：对当前 eslint 工作区根目录和对应需忽略的目录识别有时会不准确，在 monorepo 等复杂项目结构时会出现较多不符合预期的 case，但随着迭代这些错误 case 被逐渐减少了一些。

使用频率：被动使用

filesize

介绍：打开文件后，可以在工作区左下角显示该文件的大小。

缺点：必须点开该文件才会显示大小，有时这个文件非常大，或是打包后的产物，要点开是多此一举，不完美。

使用频率：★★★

Fix JSON

介绍：可以自动在格式化 json 的时候把 js 的对象修复为 json 的双引号结构，必备

缺点：无

使用频率：★★★

Fluent Icons

介绍：vscode 1.53 后的一套比较好看的 product icon，装饰用

缺点：无

使用频率：被动使用

GitLens — Git supercharged

介绍：可以追溯每一行代码的历史，支持查看当时的 commit diff 情况。

缺点：有时候会干扰视觉和编码体验，鼠标不能乱放。

使用频率：★★★★★

Google Translate

介绍：支持将选中的中文翻译为英文或者英文翻译为中文，需要使用命令。

缺点：接口需要高效网络的支持。

使用频率：★★

Highlight Matching Tag

介绍：高亮当前光标处的前后标签，方便区分当前区块的范围

缺点：无

使用频率：被动触发

Image preview

介绍：支持对 url 或相对路径书写的图片地址在左侧进行一个缩略图的展示，方便确定图片。

缺点：对 alias 支持不友好，如果图片太多也就意味着你要打出那么多请求，如果不注意无形中可能构成小型 ddos。

使用频率：被动触发

Import Cost

介绍：可以明确的在 import 或 require 引入依赖右侧显示该包的整体大小

缺点：是整体大小，也就是当 tree shake 时，你也无法知道被摇树后究竟引入了多少质量，当然这个要求过于苛刻了

使用频率：被动触发

JavaScript and TypeScript Nightly

介绍：每天都会下载最新发布的测试版 typescript，之后作为 vscode 内部的 ts 支持环境，可以第一时间体验到最新 ts 的特性和支持，拥抱第一手变化，走在最前沿。

缺点：因为是测试版，经常出 bug，导致 type 其实是正确的但是识别错误，要承担一定的使用体验下降的风险。

使用频率：被动使用

javascript console utils

介绍：支持快捷键将选中的变量快速生成 console.log(xxx) 的打印，在调试时很有用

缺点：默认快捷键可能与其他插件冲突，需要确定好

使用频率：★★★★★

jQuery Code Snippets

介绍：jquery 系的代码提示包，老旧项目必备

缺点：很久没更新了，不能涵盖所有 jquery 的提示 case。

使用频率：因人而异

JS & CSS Minifier (Minify)

介绍：支持右键 css / js 文件进行压缩最小版，方便快捷。

缺点：只有去除空格和换行的作用，没有压缩和优化的好处，不会处理 css 兼容性，适合老旧项目、临时项目、新手学习期使用。

使用频率：★★★

Live Server

介绍：支持将单文件开启本地 server 服务，以此来避免一些跨域和纯前端项目无服务器无法调试查看的问题。

缺点：需要承担该文件的 path 在 url 上的成本，有时这会导致和预期完全相反或无法使用，后备方案是使用 serve 这个 npm 库。

使用频率：★★

Markdown All in One

介绍：对 markdown 即时预览提供支持，支持分屏，一边书写一边预览。

缺点：按钮在右上角，不太好寻找，辨识度低，经常搞混，书写和同步的滚动不是 100% 完美的兼容，在一些图片等 case 下会导致左右书写和同步结果不在一个视口内。

使用频率：★★★

Material Icon Theme

介绍：一套好看的 icon 主题，支持目前 99% 文件类型的独特图标

缺点：一些场景下和你选择该文件采用什么语言解析有关，这会影响到 icon 的展示，有时候会搞混，需要调整语言识别类型。

使用频率：被动使用

node-snippets

介绍：对部分 node 依赖提供代码提示

缺点：只涵盖很少的一部分场景，凑付使用

使用频率：★

npm Intellisense

介绍：对 npm 相关功能提供一些代码提示功能

缺点：不常用，随着 vscode 能力补齐，这些老旧的提示插件都会被集成于 vscode 内部，逐渐被淘汰

使用频率：★

open in browser

介绍：提供右键对某个文件快捷打开到浏览器中的功能，方便快速查看某个 html 文件

缺点：在 win 系统下，因人而异，有的电脑会出现识别浏览器不准确的情况，需要手动配置

使用频率：★★★

Path Intellisense

介绍：在书写路径的时候提供路径的补全支持

缺点：在 alias 场景下支持不好，对 vue 文件内的导入支持很差

使用频率：被动使用

Prettier - Code formatter

介绍：最好用的文件格式化工具，随着迭代，该插件已经击败了所有其他同类的格式化插件，目前可以按照国际标准格式化 99% 的文件，无需其他格式化插件

缺点：早期问题比较多，但随着迭代越来越强大

使用频率：★★★★★

Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro

介绍：支持即时编译样式文件到本地，支持同步生成压缩 min 版。

缺点：只针对特定场景才需要这个同步生成的功能，大部分情况我们不需要，因为会生成无用的文件影响视听，需要时刻关注他的开关，并做严苛的限制配置，不支持最新的语言特性，适合老旧项目或者临时项目。

使用频率：★★★

SCSS IntelliSense

介绍：对 scss 文件提供代码提示的功能

缺点：无

使用频率：被动使用

Settings Sync

介绍：可以将本地的配置文件 sync 到 github gist 存储，自 vscode 自带 github 账号登录同步功能后，该插件成为了一个必不可少的容灾方案，因为自带的同步会受到一些不可控的影响，在 1.5x 中发生的一次配置文件 breaking change 中造成了很大的坑。

缺点：需要定期自己手动同步更新（不建议使用自动更新），需要高效的网络环境

使用频率：★★★

stylus

介绍：提供对 styl 样式文件的高亮支持，这往往会在 vuepress 等项目内用到。

缺点：不常用

使用频率：★

SVG

介绍：提供预览 svg 的功能

缺点：在暗色系主题下不太友好

使用频率：★★

Toggle Quotes

介绍：支持快捷键在单引号、双引号、反引号之间快速切换，非常方便

缺点：有些场景下不支持反引号的切换，不完美

使用频率：★★★★

Version Lens

介绍：提供对 package.json 内依赖版本提示的功能，可以查看到最新版本号是多少，帮助做出一些决策。

缺点：无

使用频率：★★★

Vetur

介绍：提供对 vue 文件的广泛功能支持

缺点：有时候会和其他内置解析器产生冲突，需要关闭他的校验，不完美

使用频率：被动使用

Visual Studio IntelliCode

介绍：提供一些常用 api 的代码提示

缺点：默认提示列表内排列顺序第一，有时会影响到我们真正需要的那个提示。

使用频率：被动使用

vscode-styled-components

介绍：提供对 styled-components 的高亮支持

缺点：无

使用频率：★★★★

Vue 3 Snippets

介绍：提供一部分 vue3 的 api 代码提示的支持

缺点：向前兼容性不好，vue2 部分 api 不支持

使用频率：被动使用

总结

天下没有完美的插件，可见无论是哪个插件都多少有一点小问题，假如一个插件有 70% 的功能是有益的，但存在 30% 的问题负收益，那他还是有用的，所以会被保留下来。

但是当一个插件的副作用大于他本身带来的收益时，为什么还要选择该插件呢？换一个或者自己写一个会不会更好。

其他

json to ts

这个插件可以把 json 转为 ts 的 interface ，但已有在线工具可用，效果更好：

json-to-typescript

regex preview

可以即时校验正则的正确和匹配性，目前有更好的在线解决方案：

regex101