大家好，我是一位在架构师道路上狂奔的码农，今天给大家推荐一些前端开发利器 VsCode 中比较好用的一些插件。

简介

Visual Studio Code，或者称作 VsCode ，这是一个广为人知且评价很高的代码编辑器，它比较轻量，并且拥有非常多的拓展，可以帮助开发人员大大提高开发效率。

推荐插件

1.Chinese (Simplified)

这是一款官方提供的 VsCode 中文插件，可以使英文界面的 VsCode 变为中文。

中文插件

2.Turbo Console Log

这是一款 console.log 打印插件，使用这款插件，只需要将光标移到要打印的变量上面，只需要按下对应的快捷键，就会在下一行自动输入 console.log，并且会很贴心的把文件名、行号、变量名这些信息都带上了，可以说是非常的方便！

Turbo Console Log

3.Indent-Rainbow

这是一款彩虹缩进插件，对于刚学习前端的小伙伴应该说比较友好，当我们的代码嵌套结构比较复杂后，它可以帮助我们对缩进进行对齐检查，并且每个缩进都有不同的交替彩虹色。

Indent-Rainbow

4.Highlight Matching Tag

这是一款标签高亮插件。当我们有一个复杂的 DOM 结构时，我们可以使用这个插件来让结束标签高亮，这样防止我们犯一些低级的错误。

Highlight Matching Tag

5.Code Spell Checker

这是一段拼写错误检查插件，当我们编写代码时，偶尔会出现单词拼错的情况，这个插件可以检查到可能拼写错误的单词，并有波浪线提醒。并且它支持驼峰命名法。

Code Spell Checker

6.Toggle Quotes

这是一款 JavaScript 字符串切换插件，我们知道JavaScript 的字符串可以支持三种形式，单引号、双引号、尖角号，有时候我们想要拼接字符串时，需要将原来的单引号或双引号改为尖角号。使用这个插件，只需要按下对应的快捷键 就可以做到在这三种字符串之间快速切换。

Toggle Quotes

7.Auto Rename Tag

这是一款标签重命名插件，如果要更改某一个标签，只需要在前面修改，后边的标签会同步修改。

Auto Rename Tag

8.Material Icon Theme

这是一款非常全面的图标主题插件，它支持许多的文件图标以及文件夹图标。

Material Icon Theme

9.Peacock

这是一款窗口颜色变换插件，当我们同时运行多个 VSCode 窗口时，我们可以给每个窗口设置不同的颜色，依靠不同的颜色来区分不同的项目。可谓是简介、明了、高效，它默认支持的颜色有 Angular 红、微软蓝、JS 黄、mandalorian 蓝、Node 绿、React 蓝等等。

Peacock

10.Rest Client

这是一款 API 测试插件，测试 API 的方式有很多，但是在 vscode中这款插件可谓是最好用的一款测试工具， 它可以帮我们在 VSCode 中轻松测试 API，省时高效。

Rest Client

11.open in browser

这是一款支持快速在浏览器中打开 HTML 文件的插件。在 HTML 文件中右键，选择 Open In Default Browser 即可在浏览器中打开 html 文件或者使用与之对应的快捷键 Alt + B也可。

open in browser

12.Live Server

使用这款插件，当我们修改 html 的内容的时候，想让浏览器和代码保持一致时，就需要用到这个插件。 它会在本地启动一个服务器，监听文件的改动，并刷新浏览器。在 HTML 文件中右键，选择Open with Live Server，或者使用与之对应的快捷键也可。

Live Server

13.CSS Peek

使用这个扩展插件，只需将鼠标悬停在一个 HTML 元素上，即可显示一个窥视窗口，其中显示应用于该元素的CSS样式。然后，您可以通过单击窥视窗口跳转到 CSS 代码来轻松编辑样式。这个功能可以帮助您避免每次手动搜索CSS代码的麻烦。CSS Peek还支持 CSS 预处理器，如 SCSS、Less 和 Sass，因此无论预处理器是什么，您都可以将其用于所有项目。

CSS Peek

14.Reactjs Code Snippets

Reactjs Code Snippets VS Code扩展提供了整洁打包的预编写模板，帮助开发人员提高工作流程和代码速度。您只需要键入触发命令即可获取所需的代码片段。您可以使用此工具来减少编写代码所需的时间，并专注于解决现实世界的问题。

Reactjs Code Snippets

15.Code Spell Checker

使用Code Spell Checker VS Code扩展避免拼写错误。它在您输入时会简单地突出显示任何拼写错误。它具有易于使用的错误修复界面，可以通过右键单击代码编辑器中突出显示的问题来访问。它可以检查多种语言，确保您的代码在任何语言中都是无误的。

Code Spell Checker

16.Markdown All in One

这是一款 Markdown 语法插件，使用这款插件即可在 VsCode 中编写 Markdown 文档。

Markdown All in One

17.VSCode Icons

尽管 Visual Studio Code 是一款强大的代码编辑器，但其默认图标可能会让人感到乏味和缺乏灵感。这就是图标主题的作用。VS Code Icons 扩展可以通过识别文件类型（如React、Javascript、HTML、CSS等）来帮助您查看您的文件。图标主题是快速简便的方式来改变 VS Code 编辑器界面的外观和感觉，它们可以对您的整体体验产生重大影响。

VSCode-Icons

18.Bito

这是一款由 chatgpt 团队开发的高效插件，它的强大之处在于可以帮助开发人员更好的提高开发效率，它具有编写代码、理解代码、编写测试用例、解释代码、注释代码等功能。

Bito

19.any-rule

这是一款帮助我们书写正则表达式的插件，你所需要的常用的正则表达式在这个插件中都可以轻松的去实现，节省效率，高效开发。

any-rule

20.Vue Language Features (Volar)

这是一款由 Vue 官方出品的支持 Vue 语法的插件，让你可以更舒心的使用 Vue 做开发。提高开发效率。

Vue Language Features

最后

一台电脑，一个键盘，一根网线便能打下一片天下，几个字母一些数字便能创造辉煌人生，一个指令一次回车便能成就一个新的世界，游走于指尖的快乐并不是说说而已，他承载的是无尽的荣耀。 创作不易，如果小编的创作分享对各位兄弟姐妹有所帮助，还请各位兄弟姐妹动动发财的小手，加个关注、点个赞，你们的小小举动是对小编最大的认可，更是小编不断分享的动力！

PS: 温馨提示，插件虽好，也要按需合理使用呀！