我常用的 vscode 扩展

辅助编码
格式化
Git 相关
效率
Vue 相关
界面美化

早些年初次接触编程的时候学习的是 C，用的当然只能是 visual studio 2007 之类的老古董，界面古老，操作也不友好。当时大家都是这么用的，也没在意。

后来不经意间接触到了 SublimeText，当时就被它的包管理系统和丰富的主题样式所吸引，立马爱上了这个「性感」的编辑器。但是无奈于国内的「复杂」的网络环境，每次下个插件总要耗费很长时间，并且存在下载失败的可能，且 SublimeText 是闭源的，需要很高的授权费（相对学生党来说），所以一直想找一款好用趁手的编辑器来作为替代品。

就这样时间走到了 2015 底，微软宣布开源 VSCode，其开箱即用、丝般顺滑的运行速度、强大的插件系统、丰富的主题和跨三大系统（支持 Windows，Mac 和 Linux）运行的能力迅速吸引了一大批用户，尤其是Atom的用户开始大量倒戈。我就是在那个时候开始接触和使用 VSCode 的。时至今天，VSCode 仍然保持每月一大更的速度，为用户提供了一个有保证和持续趋近完美的代码编辑器。

很多人会说 VSCode 只是个代码编辑器而已，用起来没有 Webstorm 这样的 IDE 顺手。从用户的角度来说，确实会有这样的感觉。但是，VSCode 具有强大的插件系统生态，并且在国内也布设了服务器，所以通过插件来增强 VScode 是一件很容易的事情。而且，当所有插件都不能满足你的时候，你甚至可以开发属于自己的插件，VSCode 提供了完备的插件开发示例和文档。

作为一个 js 开发者，下面介绍一下我开发时常用到的一些 VSCode 插件，可以给刚开始使用 VSCode 的朋友提供一个小小的参考。

¶ 辅助编码

¶ Auto Rename Tag

提供像 Visual Studio 一样的 HTML/XML 标签重命名功能。

¶ AutoFileName

引入类库或本地文件时，时自动补全文件名。

¶ Code Spell Checker

错误拼写的变量名有时候会让你很尴尬，这个基本的拼写检查器，可以很好地使用 camelCase 代码。它的目标是帮助捕获常见的拼写错误，同时保持低误报率。

¶ CodeMetrics

分析定义的每个函数的逻辑复杂度，提醒你适度分离函数逻辑，编写和重构代码的利器。

¶ ESLint

提供 ESlint 错误提示和一键(可修复状态下)修复错误的功能。

¶ filesize

在编辑器的状态栏中显示当前编辑文件的大小。点击状态栏组件，它会显示更多关于文件的信息。

¶ Import Cost

显示引入的每个类库的文件大小。

¶ JavaScript Booster

提供了类似传统 IDE 一键重构代码块的功能。

¶ JS Refactor

同上类似。

¶ IntelliSense for CSS class names in HTML

它根据在工作区中找到的定义或通过 link 元素引用的外部文件为 HTML 类属性提供 CSS 类名自动补全的功能。

¶ npm Intellisense

引入 npm 包依赖时，自动补全 npm 包名。

¶ Path Intellisense

根据当前项目文件的上下文提供路径名自动补全的功能。

¶ Visual Studio IntelliCode

号称可以使用云 AI 的方式来帮助你提高编写代码的效率，目前支持 Python、Typescript/JavaScript 和 Java。

¶ 格式化

¶ Bracket Pair Colorizer 2

用颜色来匹配括号。你可以定义各种括号匹配使用的颜色，帮助你快速锁定当前关注的代码块。

¶ DotENV

提供项目中 .env 环境变量文件的高亮显示支持。

¶ indent-rainbow

使文本前面的缩进着色，每步可交替使用四种不同的颜色。对 Python 语言尤其有用。

¶ Prettier - Code formatter

人人都在用的前端代码格式化工具，根据最先找到的自定义 prettier 格式化文件来格式化代码，支持 JavaScript、TypeScript、Flow、JSX、JSONCSS、SCSS、Less、HTML、Vue、Angular、GraphQL、Markdown、YAML 等等，前端「所有」的文件格式化需求，一个工具搞定。