这篇文章，我将结合自己的工作经验，向大家推荐我工作中用到的一些插件，我会尽可能详细和全面介绍。如果大家有更好用的插件，欢迎在评论区分享！

必备

中文插件

「Chinese (Simplified)」

VSCode 中文插件，英语很好你当我没说！

Vue-Official

以前叫做 Volar，vue 官方提供的插件，能够识别. vue 文件，提供包括代码提示、智能感知、自动补全等功能。

Git Graph

比较好用的 git 管理工具，免费！！！

可以方便的查看 git 提交历史

快捷的实现一些 git 操作

以前 GitLens 是最好用，但是它现在收费了

Prettier

代码美化用的

ESLint

结合本地项目配置的 eslint 发挥作用，会在编译器中把不符合 eslint 规则的代码标红，提醒我们更改。

代码提效

中文标点符号转英文

开发中最麻烦的就是频繁的切换输入法，防止代码中混入中文字符。这个插件可以将输入的中文字符迅速转换成英文字符，从此再也不用切换输入法，非常方便！

如图，在中文输入法下，键入的字符自动被转换成了英文字符：

自动重命名标签

「Auto Rename Tag」

使用这个插件，当我们更改 html 标签时，与之匹配的结束标签会被自动重命名。

单词拼写检查

code spell checker

英语不好同学的福音，能识别出你的错误单词拼写

css 定位

css peek

让你的编译器具备快速找到类名定义位置的功能，使用也非常简单，按住 ctrl，用鼠标点击对应的类名即可

标签高亮匹配

Highlight Matching Tag

console 工具

javascript console utils

这是一个可以方便快捷对某个值输出 console 的插件，使用时，选中打印的值，然后 「Cmd+Shift+L 即可」

css 智能命名

IntelliSense for CSS class names in HTML

未使用的 import 移除

Remove Unused Imports

这个插件的作用很简单，当我们使用 ctrl+shift+p 唤起命令输入框后，选择 Remove Unused Imports 指令后，所有未使用的引用都会被自动删除

驼峰翻译助手

接口调试工具

「Postcode」

一个简化版的 postman，可以方便的进行接口调试

代码管理

Todo Tree

这个插件可以非常方便的帮助我们管理代码，我们可以在项目中的任意位置进行一些标记

标记的颜色可以通过 css 实现自定义，我们只需要按照下面的格式在 VSCode 的 setting.json 文件夹中配置即可

"todo-tree.highlights.customHighlight": {
    //todo    需要做的功能
    "todo": {
      "icon": "alert", //标签样式
      "background": "#c9c552", //背景色
      "rulerColour": "#c9c552", //外框颜色
      "iconColour": "#c9c552" //标签颜色
    }, //bug   必须要修复的BUG
    "bug": {
      "background": "#eb5c5c",
      "icon": "bug",
      "rulerColour": "#eb5c5c",
      "iconColour": "#eb5c5c"
    }, //tag   标签
    "tag": {
      "background": "#38b2f4",
      "icon": "tag",
      "rulerColour": "#38b2f4",
      "iconColour": "#38b2f4",
      "rulerLane": "full"
    }, //done    已完成
    "done": {
      "background": "#5eec95",
      "icon": "check",
      "rulerColour": "#5eec95",
      "iconColour": "#5eec95"
    }, //mark      标记一下
    "mark": {
      "background": "#f90",
      "icon": "note",
      "rulerColour": "#f90",
      "iconColour": "#f90"
    }
  },

标记后，我们可以单击树中的 TODO 将打开文件，并将光标放在包含 TODO 的行上，就可以快速定位到代码

project-tree

按 ctrl+shift+p，进入 Project Tree 进入。在 README.md 中生成项目的树状结构。生成的结构类似这样：

Project Manager

这是一个非常好用的项目管理插件，没有之一！使用这个插件，可以将本地所有的项目进行管理，进行编组、做标记等等，并且能够实现一键切换项目的功能，让项目管理变得超级方便！

这是一个值得单出一篇文章详细介绍的插件！强烈推荐大家使用！

代码美化

彩虹缩进

Indent-Rainbow

这个插件会让我们的代码文本前面的缩进着色，能够让代码的层级非常清晰~

Better Comments

使用这个插件，可以让我们代码中的注释五颜六色，方便辨识

特殊符号和颜色之间的关系完全采用 css 定义，我们只需要在 vscode 的 setting.json 中写法类似的配置即可

// -----------------------------------------------------------更好的注释插件
"better-comments.tags": [
    {
      "tag": "!",
      "color": "#FF2D00",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "?",
      "color": "#FF8C00",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "#",
      "color": "#98C379",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": ">",
      "color": "#246fe5",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "*",
      "color": "#00a2a7",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "&",
      "color": "#5eec95",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    }
  ],

颜色高亮

Color Highlight

根据色值显示代码中颜色编码，看起来非常直观