VSCode编辑器常用24款基础插件

前言：为每一次拿到空电脑不知道安装哪些vscode插件而做准备。

1.Auto Close Tag  

作用：在编写HTML/XML代码时标签自动闭合，减少代码错误，提高效率。

2.Better Comments

作用：使用 Better Comments 插件，你可以通过在注释前添加特定的标记来给注释分类和着色。这些标记包括：

*：用于强调或标记注释中的关键信息；

!：用于突出显示重要的注释或需要特别关注的部分；

?：用于表示疑问或需要进一步解释的注释；

TODO：用于标记需要完成的任务或待办事项；

//：用于普通的注释。  

3.Chinese (Simplified) (简体中文)

作用：此中文（简体）语言包为 VS Code 提供本地化界面，中文语言包

4.console helper

作用：选中需要打印的目标后，通过ctrl+L能快速输出console.log，并且能通过自定义的颜色快速有效的定位打印。

5.filesize

作用：显示文件大小

6.Git History

作用：查看git提交日志

7.GitLens — Git supercharged

作用：安装后可以直接在代码里看到谁在什么时候提交了代码，查看当前哪些文件修改了什么。

8.Guides

作用：代码自动缩进

9.HTML CSS Support

作用:CSS代码快捷神器。如语法高亮、‌代码提示和自动补全等

10.Import Cost

作用：计算依赖包大小，评估模块导入的大小。

11.Indent-Rainbow

作用：将代码的缩进以不同颜色显示，‌使得代码块和缩进层次更加清晰。‌这有助于快速理解代码的结构和逻辑。

12.JavaScript (ES6) code snippets

作用：自动提示JS可用的代码模板。

13.Live Server

作用：实时预览HTML文件。选择“Open with Live Server”选项，或者使用快捷键Alt+L, Alt+O（如果已设置此快捷键）。

14.One Dark Pro

作用：代码颜色主题插件，更加简洁和易于阅读。

15.Open in Browser

作用：设置指定浏览器打开HTML文件。选择“Open in Default Browser”选项。‌如果您有多个浏览器可用，‌可以在子菜单中选择具体的浏览器。

16.Path Intellisense

作用：路径补全。当你在编辑器中输入文件路径时，它会自动为你提供路径的建议和补全。

17.Auto Rename Tag

作用：自动完成另一侧标签的修改

18.Prettier - Code formatter

作用：格式化代码。可以在Vscode的设置中搜索“settings.json”来编辑配置。‌例如，‌可以设置代码的缩进风格（‌使用空格或制表符）‌、‌行宽限制、‌是否使用单引号或双引号等。‌此外，‌还可以在项目根目录下创建一个.prettierrc文件来定义全局的Prettier配置规则。‌

①.自动格式化（可以通过快捷键Shift+Alt+F对整个文档进行格式化，‌或者使用Ctrl+K, Ctrl+F对选中的代码进行格式化。‌）

②.命令行格式化（通过命令行运行Prettier也可以格式化代码。‌首先，‌需要通过npm或其他包管理工具全局安装Prettier。‌然后，‌在项目的package.json文件中配置相应的脚本命令，‌如"prettier": "prettier --write ."，‌这样可以通过运行npm run prettier命令来格式化项目中的所有文件。‌）

③.自定义代码风格

可以在Vscode的设置中自定义Prettier的代码风格，‌包括但不限于缩进风格、‌行宽、‌引号类型等。‌这些设置可以根据个人偏好或团队规范进行调整

19.vetur（vue 2开发必备）volar废弃 用Vue - Official（vue 3开发必备）

作用：vetur 或 volar插件是一个专门用于开发 Vue.js 项目。它提供了许多有用的功能，包括语法高亮、代码补全、错误检查、格式化、调试等。

20.Eslint（错误标注）

作用：Eslint插件可以发现代码中的错误和错误，从而使编码变得更好。它通过显示可能出现错误或警告的位置来帮助您避免错误。另外，它甚至可以自动修复这些问题。

21.any-rule

作用：any-rule插件允许你在编辑器中的 HTML、CSS、JavaScript 等文件上右键点击，查找你需要的正则，或者按下 F1，输入 zz，然后查找并选中你需要的正则，就可以把正则表达式插入到光标所在的位置。

22.Highlight Matching Tag

作用：查找标签自身的另一半位置，当我点击一个div标签时，对应配对的标签就会出现下划线来表示和谁是一对。

23.CodeGeeX: AI Coding Assistant

作用：实现代码的生成与补全，自动为代码添加注释。

24.HTML to CSS autocompletion

作用：在编写 HTML 或 Vue、React 等模板代码时，自动补全和提示在 CSS（或 style 标签、样式表）中定义过的类名、ID、变量等。