前端开发推荐vscode安装什么插件？

news2025/1/21 9:34:06

前言

可以参考一下下面我推荐的插件，注意：插件的目的是用于提高开发的效率，节约开发的时间，像类似检查一些bug、拼写错误等这些可以使用插件快速的识别，避免在查找错误上浪费过多的时间，但切记不要过度依赖一些插件到最后反而使我们代码的能力水平下降，这样就适得其反了~~~，直接进入正题=>

1、HTML CSS Support

支持CSS睡醒智能提示，可在编辑HTML和CSS文件时为你提供智能提示和快速重构工具

2、JavaScript (ES6) code snippets

智能提示代码块，该插件包含了许多最常见的JavaScript语法块，并使用简单易懂的命名方式来快速识别和使用这些语法块。例如，要创建一个箭头函数，可以只需键入"afn"并按tab键即可生成

3、 Vue 3 Snippets

该插件为 Vue.js 3 提供了丰富的代码片段（snippet），方便快速编写出常见代码结构和属性等，缩短开发时间，提升编码效率

4、Volar（vue 3）

为 Vue 3 开发者提供支持的高效工具，提供了例如语法高亮、智能感知、代码补全和格式化的功能，除此之外，Volar 还可以生成更详细的类型提示、提供模板源代码高亮和智能补全等特性，帮助前端开发者更快速地编写出符合标准的代码

5、Auto Close Tag

帮助前端开发者完成HTML/XML标签自动闭合的插件。该插件可以响应用户在打开标签时自动添加相应的闭合标签，从而减少编写HTML / XML代码的时间和工作量。
当你使用Auto Close Tag插件时，在输入一个开始标签后会自动填充它的结束标签。例如，如果您输入“<div>”，插件将立即添加“</div>”在光标的右侧。此外，它还能够自动识别成对标签错误的情况，并向你提供有关如何校正标签的建议。

6、Auto Rename Tag

帮助前端开发者自动重命名HTML/XML标签的插件。该插件可以在修改开始标记或结束标记时，同时更改另一个标记的名称，省去了手动重命名同名标记的时间和麻烦。
当你安装并使用该插件时，在编辑 HTML or XML 文件中启用此功能时，如果修改打开标签的名称，该插件会自动在关闭标签相应地重命名和替换。这样, 在项目中经常需要进行元素或组件重命名时确保重命名的一致性, 并简化代码编辑过程而不需要多个文件间来回手动查找替换。

7、Indent-Rainbow

帮助前端开发者快速识别代码块缩进级别并将其着色的插件。该插件可以为不同缩进级别使用不同颜色，从而帮助你更轻松地找到代码块内部和外部之间的穿越点。
当你在VS Code中使用Indent-Rainbow插件时，它会自动检测当前代码区域的所有嵌套和缩进，并使用不同的颜色将每种缩进层次可视化。这样，当你的代码层数很多或缩进深度很深时，你可以通过颜色区分各个嵌套的块，帮助你防止缺少对称符号（如大括号、方括号等）以及无意中跳过较深的缩进程度导致的未知错误。

8、Material Icon Theme

帮助前端开发者快速美化和区分文件与文件夹类型的插件。该插件可以为不同类型的代码文件和文件夹使用独特的图标，从而使您更轻松地找到并识别相关文件。
当你使用Material Icon Theme插件时，它会自动对文件和文件夹类型进行分类，并显示对应的图标。例如，你会看到特定的图标用于 JavaScript 文件、CSS 和 HTML 文件、README.md 文件以及其他许多文件类型。另外，它还可以针对您自己创建的文件夹或特定文件类型进行自定义设置，以便更好地匹配你的需要。

9、Path Intellisense

帮助前端开发者快速输入文件路径的插件。该插件可以优化代码编写时的体验，提高效率和准确性，并避免手动键入路径名称时的错误拼写和其他普通错误。
当你使用Path Intellisense插件时，它会自动分析你正在编辑的代码中的文件路径并提供路径建议（如提示框），包括与打字匹配的本地文件、文件夹或已经总结过的内容（历史记录）。这使得你不必精确记住文件路径或手动输入长路径名，从而节省了很多时间以及改善了编码准确度。

10、Live Server

帮助前端开发者快速创建本地服务器并快速进行web页面展示和预览的插件。该插件能够使你在编辑完HTML, CSS, Javascript等前端文件后直接获取到实时刷新后的网页内容。
当你使用Live Server插件时，它会自动打开一个服务器，并监视您选择的HTML文件所在的目录。当你保存你的HTML、CSS或JS代码时，插件也会实时演示更改后的结果，你可以在编辑器界面甚至在你的浏览器中即时预览所作的更改了。

11、Code Spell Checker

帮助开发者检查拼写错误的插件。该插件可以辅助您轻松检查代码中的英语单词 (包含变量名，注释和文档注释)，以确保其正确拼写。这样就大大提高了开发者编写清晰易懂的代码、避免出现瑕疵的可能性。
当你使用Code Spell Checker插件时，它会自动在编辑器界面标记出单词拼写错误，并提供建议的更正方法。如果单击建议，则轻松地将单词替换为正确的英语单词，以便您能够进一步完善代码的质量
这个插件有一定的不足，如果你在开发过程中定义一个多单词拼合的变量时，未使用驼峰法的形式命名同样会报错，总的来说利大于弊,根据自己的需求使用

12、Error Gutters

将错误和警告信息添加到编辑器中源代码的行号旁边的“gutters”区域（此区域位于编辑器左侧）。这使得错误信息更加易于检测，并且能够帮助开发者在写代码时能更快地查找并修复 bug

13、Prettier - Code formatter

帮助前端开发者自动格式化代码，从而使代码更具可读性，并减少因为不规范的代码风格而引起的错误和 bug

14、ESLint

使用 ESLint 可以帮助你遵循一些最佳实践和规范，这些规范可以自定义并在项目中共享。“规则”是定义代码质量标准的配置项。此插件支持多种类型的 JavaScript 语法和框架，例如 ECMAScript 6 和 7、React 和 AngularJS 等。通过对代码的静态分析，它可以快速识别出代码中存在的错误或不符合规定的地方，并给予提示或警告信息，帮助开发者更好地改进代码逻辑。
注意：对于刚开始学习前端的小伙伴们极其不建议一开始就装该组件，不要问为什么，装了ESLint后可能就误打一个空格就会报错，而且非常难发现，所以为防止心态崩溃，建议等到后面做完整项目的时候再考虑代码规范化的问题。
当然如果你非要加ESLint，可以与上面的Prettier插件配合使用达到保存后自动格式化代码为你设置的格式，需要配置一些文件会麻烦一点，不过一劳永逸，具体的配置可以参考下面的文章