2024最新VSCode实用插件推荐，开发效率遥遥领先！超全面，快收藏~

点击上方 前端Q，关注公众号

回复加群，加入前端Q技术交流群

作为前端开发，vscode 好比我们的衣食父母，不可或缺。我相信大家都试过给编译器装一些插件，用来提升开发效率。但是，很多文章介绍的插件都不怎么详细，有些更是毫无卵用，尤其某 N，简直屎里淘金。

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

必备

中文插件

「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

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

图片预览

Image preview

当我们的项目中引入一个图片时，在编译的一侧会展示出这个图片的预览效果，当我们鼠标移动到这个链接上面时，也会显示这个图片。

评论区收集

异常提示

来自 juejin.cn/user/359725…^[5] 大佬推荐。

可以高亮显示代码中的错误、警告信息，帮助我们在开发中更快捷的发现错误问题。

代码截图工具

来自 juejin.cn/user/306949…^[6] 大佬推荐。

CodeSnap

这个插件能截图出很漂亮的代码片段

但我个人感觉用处不大，因人而异吧。

我觉得程序员最好用的截图工具应该是 Snipaste。这不是一个插件，而是一个应用程序。

这个截图工具最方便的地方就是可以把截图的内容钉在页面上，一遍写代码，一遍看 UX 非常爽，再也不用频繁切换页面了！

作者：石小石Orz

往期推荐

腾讯写码6年，我总结的技术人核心竞争力

前端构建系统浅析

100 个太多，但这  9 个 css 属性你必须要知道！

最后

• 欢迎加我微信，拉你进技术群，长期交流学习...
  

• 欢迎关注「前端Q」,认真学前端，做个专业的技术人...

点个在看支持我吧