前言

作为一个非常容易吃别人安利的人，我的vscode上安装了一大堆插件，前几天突然想给自己的vscode插件做一次断舍离，搞清楚自己装的插件到底都有什么功能，有用的留下，没用的卸载。在这一过程中我仔细阅读了每个插件的说明文档，并选择性记录下了所有对自己有用的功能。文档整理好后，我突然想到，可能有很多开发者和我一样是个英语废柴，平时没有耐心去仔细阅读文档，对自己平时使用的插件到底有哪些好用的功能并不清楚，所以决定把我自己的文档整理整理，发出来供大家一起学习。不过也正因为这篇文章是基于我自己的笔记整理而来，所以并不会把每个插件的所有功能一个不落的罗列出来，只会列出从我个人的角度来说，目前对我有用或我自己未来有意向使用的功能。

所以本文既是一篇插件安利文档，又是一篇插件使用说明文档，希望能对大家有所帮助，只要能帮助到一个人，这篇文章就没有白写啦~！

废话不多说，我将自己用过且正在使用的插件分为两类介绍给大家：

提高开发效率的插件

CSS Peek

功能概述

无需手动寻找、切换文件，直接在html处自动跳转至指定class、id对应的css代码编辑处，或查看指定组件、函数、样式的定义。

使用体验

偶尔会定位功能失效或定位到错误位置（比如本来是a路径下的file.css，结果定位到了b路径下的file.css），但大多数情况下定位功能还是正常且好用的，是我目前项目开发中的常用插件。

使用方法

通过class、id快速定位/切换至对应的css代码处：ctrl + 点击指定class/id，就会出现css视图弹窗（如下图），在该弹窗中可直接编辑css代码，也可以双击弹窗跳转至对应css文件。
快速查看子组件/函数/样式的定义： ctrl + 鼠标悬浮至目标处
- 子组件定义
  
  能直接看到子组件的props传参和对外暴露的对象
- 函数定义
  
  能直接看到函数的实现代码
- css定义
  
  这就不用多说了

Eslint

功能概述

实时校验代码是否符合项目中配置的eslint规范，并帮助开发者快速修正不合规范的代码

使用体验

这个插件估计大部分开发者都有安装，但是快速修正功能并不是每个开发者都知道怎么配置的，比如我这个小垃圾，有很长一段时间都是手动一行行去修改不合规范的代码（是的，我真是蠢爆了〒▽〒）

使用方法

想要实时校验代码的合规性，只需要下载插件，并在你的项目中配置好eslint规范就好了。

想要快速修正不合规代码，则需要在vscode配置文件中增加如下配置项

"eslint.format.enable": true, // 开启eslint的自动修正代码功能
"editor.defaultFormatter": "dbaeumer.vscode-eslint", // 指定vscode默认的代码修正工具为eslint

修正当前文件： Alt + Shift + F
每次保存时自动修正所保存的代码：在vscode配置文件中增加"editor.codeActionsOnSave": { "source.fixAll.eslint": true }配置项即可
修正当前项目中的所有不合规代码：调出vscode的指令面板后，执行Fix all auto-fixable problems指令
Eslint插件只会校验你编辑过的文件，即如果你没编辑过这个文件，esllint是不会去校验这些文件是否符合代码规范的。如果你想让Eslint校验项目中的所有文件，需要在vscode配置文件中增加配置项： "eslint.lintTask.enable": true

Stylelint

功能概述

实时校验css代码是否符合项目中配置的stylelint规范，并帮助开发者快速修正不合规范的代码

使用体验

和Eslint一样，应该也是大部分开发者早就安装过的插件，但可能有些开发者并没有充分使用该插件所提供的功能。

使用方法

想要实时校验代码的合规性，只需要下载插件，并在你的项目中配置好stylelint规范就好了。
想要每次保存时自动修正所保存的代码，需要在vscode配置文件中增加如下配置项：

"editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
}

3. 一次性修正当前项目中所有校验不合规的css代码：调出vscode指令面板，并执行Fix all auto-fixable problems指令

Paste JSON as Code

功能概述

根据JSON快速生成Typescript类型定义代码

使用体验

这个是我刚安装的插件，还没有真正使用。不过之前写类型定义我都是手敲的，感觉用上这个插件之后应该能帮自己省很多力，至少后端返回的数据定义我不用全手敲了。期待ing

使用方法

方法一：copy JSON到一个空文件中，调出vscode指令面板，执行Open quicktype for JSON指令

方法二：copy JSON到剪贴板，在你想要生成类型定义代码的位置获取焦点，调出vscode指令面板，执行Paste JSON as code/types

话痨版vscode插件安利（不止安利还有教程）

Vue VSCode Snippets

功能概述

快速生成vue代码片段

使用体验

这个插件也是我的开发常用插件，它支持很多代码片段的生成，但我懒得记那么多指令，用的最多最频繁的就是vbase-3-ts-setup，快速生成支持Typescript的组件片段（如下图）。

话痨版vscode插件安利（不止安利还有教程）

使用方法

安装插件后，直接在你想插入vue片段的地方输入对应指令，再按一下Enter键即可。

关于该插件都支持哪些片段的生成，以及对应的指令都是什么，可以查看插件的说明文档。它的说明文档还是比较简单易懂的，基本上就是一个指令&片段说明表格，我就不列在这里了。

提高开发体验的插件

Console Ninja

功能概述

通过该插件，可以让我们在vscode中直接看到console代码的输出结果，无需转至浏览器控制台查看

使用体验

不用来回切换vscode & 浏览器窗口，在vscode中可以直接看到console结果，一方面简化了调试流程，一方面在我们需要一边对照console结果，一边编辑代码的开发场景下，开发体验显著up。
通过下图可以看到，该插件对console结果的格式化效果要比浏览器控制台好
该插件有时好用有时罢工，当下时刻能不能用全凭缘分。不要和它硬杠，想着我一定要修好它（站在自己的血泪史上给大家这个建议）

使用方法

本插件支持三种console指令的输出：console.log、console.trace、console.time

安装插件后启动你的项目，触发相应的console代码后就可以实时查看输出结果

输出结果支持两种查看方式：

行内查看

此时鼠标若悬浮在log输出结果上，还可以复制log和打开log viewer查看log详情
在log viewer中查看

GitLens

功能概述

供开发者快速查看当前项目的分支，暂存区（stash）记录，以及各个文件的commit log

使用体验

该插件我主要拿来作为分支、暂存区记录以及commit log的查看工具，使用体验还是很好的。其实插件本身也提供分支、暂存区记录等的切换，远程push等功能。但是我不太喜欢用，git相关的功能还是用命令行手敲能让我更有安全感一些。用插件一是我对所有开发者的代码都抱有怀疑态度，担心插件本身的某些bug会对使我的git操作发生一些难以预料的意外。二是工具的便捷性会让我没有足够的反应时间，鼠标一点git操作就执行完了，想后悔都来不及（命令行执行的话毕竟还是要敲一些代码的，有几秒钟的反应时间）。

使用方法

直观的看到每行代码的最新commit记录：鼠标焦点在哪行，就显示哪行代码的最新commit log
总览当前文件每行代码的最新commit log：点击vscode右上角的图标，选择Toogle File Blame
查看当前文件相邻commit的代码对比结果：点击右上角圈红按钮，即可直接看到当前文件与上一次commit的对比记录，再点一次可以看到上一次与上上次commit的对比记录，依此类推，可以一直往前翻。
对比任意两个分支或tag的代码：选择左栏GitLens选项卡中的File History —— 展开”SEARCH & COMPARE”面板，选择两个tag或分支，就可以获取两版代码的不同之处了
查看当前项目的分支、暂存区（stash）记录、以及参与项目的开发人员：选择左栏GitLens选项卡中的Commits