前言

作为一个非常容易吃别人安利的人，我的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指令，亲测不好用，并没有帮我fix
直接通过--fix实现，比如在终端执行npx stylelint "**/*.{css,vue}" --fix

ps: 如果你发现你的Stylelint插件不生效的话，在配置文件中增加如下配置：

"stylelint.validate": [
    "css",
    "less",
    "postcss",
    "scss",
    "vue",
    "sass"
]

Paste JSON as Code

功能概述

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

使用体验

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

使用方法

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

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

Vue VSCode Snippets

功能概述

快速生成vue代码片段

使用体验

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

使用方法

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

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

Turbo Console Log

功能概述

快速帮你生成某个变量的console代码

使用体验

之前我每次console变量都是手打代码，觉得这样真是浪费时间和生命，后面发现这个插件之后，心情非常美丽。

使用方法

快速生成console代码

方法一：选中/将鼠标焦点放置在你想console的变量上，按快捷键ctrl + alt + L (Windows) 或 ctrl + option + L (Mac)。不过大概因为这个快捷键已经被其他指令占了，我用该方法无效
方法二：选中/将鼠标焦点放置在你想console的变量上，调出vscode控制面板，执行Turbo Console Log: Display Log Message（如果你想的话还可以顺便改一下该指令的快捷键，我就改成ctrl + alt + c了）

指定console代码标准格式

这里仅说明一下includeFileNameAndLineNum配置项（因为我只使用过这一个配置项），通过该配置项可以指定是否输出代码所在行号。配置方法：

打开vscode配置文件，增加turboConsoleLog.includeFileNameAndLineNum配置项

配置文件更改后重启vscode，这之后新生成的console代码中就有了代码所在行号。下图上下两条console代码就是turboConsoleLog.includeFileNameAndLineNum分别为false和true时的生成的console代码
将当前文件中所有通过该插件生成的console代码一次性全部注释掉/取消注释：

调出vscode指令面板，执行Turbo Console Log:Comment All Log Messages（全部注释）/Turbo Console Log:Uncomment All Log Messages
删除当前文件中所有通过该插件生成的所有console代码：

调出vscode指令面板，执行Turbo Console Log:Delete All Log Messages
配置console代码的字符串格式：

在vscode配置文件中增加配置项 turboConsoleLog.quote，该配置项为枚举类型，可以配置为以下三个值：
- "\""（双引号）
- "'"（单引号）
- "`"（`符号）
该配置项默认为双引号，我配置成了单引号

配置后console代码的字符串就变成单引号了

Markdown All in One

功能概述

根据md内容自动生成目录
提供一些md快捷编辑方法
可以根据md生成html文件

使用体验

我下载这个插件纯纯是为了生成目录的功能。除了这个插件我还用过markdown toc插件，我的感受是还是这个好点，火速卸载markdown toc。其他一些快捷编辑功能我用的不多（还要记忆各种快捷键，不想再占据我本来就小的可怜的脑容量了），就没列在这里，有兴趣的可以自己去官方文档里看。

使用方法

自动生成并更新md目录
- 将鼠标焦点置于md文件最前面，调出vscode指令面板，执行Create Table of Contents指令即可生成目录，并且随着你每次保存md文件，该目录会自动更新。
- 修改vscode配置项markdown.extension.toc.slugifyMode，可以配置目录的兼容目标，该配置项支持vscode, github(默认值), gitlab, gitea四个值
- 若有哪个标题不想在目录中出现，可在标题的结尾增加
生成当前md文件的html版本：调出vscode指令面板，执行Markdown: Print current document to HTML指令
快速生成link：复制url后选中文字，并ctrl + v，即可生成link

Code Spell Checker

功能概述

自动校验项目代码中的所有英文拼写，为你找出拼写错误的单词，并给出修改意见。

使用体验

不知道你有没有这种开发体验：触发了一个bug，却迟迟找不到bug触发的原因，你坚信一定是遇到了什么大难题，撸起袖子花了半个小时去排查每一个逻辑，最后发现一切的一切，只因为多打了一个字母。

如果你和我一样是一个粗心怪或者英语渣，那么这个插件就是你的必备神器。

使用效果如下图：他会自动标注出你拼写错误的地方，（点击左侧小灯泡/右击错误单词处 -> Spelling Suggestions）并给出对应的修改建议。

使用方法

将某些词语添加至自定义字典：所有自定义字典中的词汇都会被插件判定为正确拼写
- 方法1
  
  打开vscode配置文件，通过cSpell.userWords配置项指定你的自定义字典内容，。
- 方法2
  
  右击字符串，依次选择Spelling -> Add Words to User Settings
忽略对某些文件的校验：指定路径下的文件将不再校验拼写。

在vscode配置文件中，通过配置项cSpell.ignorePaths指定
关于拼写校验时分词策略的介绍

拼写校验这一行为是建立在一定的分词策略上的。比如校验deleteHandler这种变量名时，插件会先将其分词为delete handler两个单词，然后再分别校验delete和handler是否存在拼写错误。

简单说一下CSpell这个插件的四种分词策略：
- HTMLInput -> html input
  
  连续N个大写字母：将前N-1个字符划分为一个单词，将第N个字符和后面的小写字母划分为一个单词
  
  这种分词策略还会针对s、ing、es和ed做特殊处理，将它们与前面全大写的单词划分到一起。比如：
  - CURLs -> curls（而非我们预期的curl s）
  - CURLedRequest -> curled request（而非我们预期的cur led request）
- snake_case_words -> snake case words
  
  下划线分割：根据下划线划分单词
- camel2snake -> camel snake
  
  连续多个小写字母中间插入数字：根据数字划分单词
- camelCase -> camel case
  
  其他情况：以大写字母划分单词

提高开发体验的插件

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。

二是在代码review过程中查看同事commit的代码和历史代码(不一定是上次commit，是任意一版commit的历史代码)的code diff。

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

使用方法

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