前言

通过使用插件，可以扩展编辑器的功能，实现代码自动格式化、语法高亮、版本控制等功能，从而提升编码效率和代码质量。

在日常开发过程中，一般用的编辑器是vscode，这里给大家推荐一些平时开发比较好用的插件
（ps：⭐必备，没有的则看情况使用）

1、 Auto Close Tag(自动补全标签)⭐

输入一个开始标签时，它会自动补全对应的结束标签。

2、Auto Rename Tag(自动更新标签)⭐

修改一个标签的开始标签时，对应的结束标签也会自动更新，保持标签的一致性。

3、Chinese(简体中文)⭐

当初始化刚安装好vscode时默认是英文的像这种

可以在应用市场输入Chinese第一个就是然后安装重启就可以啦

4、Git History (查看 Git 提交历史)

通过 Git History，可以轻松地浏览、搜索和比较 Git 提交历史，而无需离开编辑器或命令行界面(可以直观看是谁写的代码)。

5、GitLens (增强 Git )⭐

它提供了丰富的功能和工具，帮助开发者更好地管理和理解 Git 仓库。
具体可以操作的功能:

• 代码作者信息:GitLens 可以在代码编辑器中显示每一行代码的作者信息，包括提交日期和提交哈希。这对于团队协作和代码审查非常有用。
• 行历史：GitLens 提供了行历史功能，允许用户查看每一行代码的提交历史，包括作者、提交日期和提交信息。这对于理解代码的演变和跟踪问题非常有帮助。
• 文件历史：GitLens 可以显示文件的提交历史，包括作者、提交日期和提交信息。用户可以查看文件的每次提交，并查看每次提交的详细差异。
• 比较分支：GitLens 支持比较不同分支之间的差异，包括代码差异和提交差异。这对于合并分支和解决冲突非常有用。
• 搜索提交：GitLens 提供了强大的搜索功能，允许用户根据关键字、作者、日期等条件搜索提交历史。这对于查找特定提交或解决问题非常有帮助。
• 集成 Git 命令：GitLens 提供了与 Git 命令的集成，用户可以直接在编辑器中使用 Git 命令，如 git commit、git push 等。这对于习惯使用命令行的开发者来说非常方便。
• 支持多种 Git 版本：GitLens 支持多种 Git 版本，包括 Git 1.7.0 及以上版本，确保用户可以正常使用。

6、open in browser (快速预览 )⭐

方便地在浏览器中预览和测试代码，提高开发效率和代码质量。

7、Vetur ( Vue相关 )⭐

初始化新建vue文件的时候全是白色的像text文本，这时候Vetur这个插件就启到了关键作用。
它包括了vue的语法高亮、代码补全、错误检查、格式化vue模版等功能

8、Vue - Official ( Vue相关 )

主要功能有 设置代码片段 、代码高亮和格式化、 自动补全、项目配置、调试 等

9、Vue VSCode Snippets ( 快速生成Vue代码片段 )⭐

快速生成常见的 Vue.js 代码结构以及vue代码片段.。

10、ES7+ React/Redux/React-Native snippets ( 全面生成React代码片段 )⭐

专注于提供 React、Redux 和 React-Native 开发中常用的代码片段。
提供了大量的代码片段，包括但不限于 React 组件、Redux actions、reducers、React-Native 组件等

11、Simple React Snippets ( 快速生成React代码片段 )

它提供了一系列常用的React代码片段，可以快速插入到代码中。

12、Beautify ( 美化代码 )

它可以快速地格式化 HTML、CSS、JavaScript、JSON、XML 等代码，保持代码风格的一致性。

下载后需要设置Beautify，默认是没用设置的

13、background ( 设置主题 )

用于更改编辑器背景的颜色和图像。这个插件可以使编辑器背景更加个性化。

14、change-case( 转换文本 )

文本编辑中转换文本大小写的插件。
它通常用于各种编程语言和文本编辑器中。这个插件可以帮助开发者快速地将文本从大写、小写、驼峰式、下划线等多种格式之间进行转换，从而提高编码效率。

15、Path Intellisense( 自动补全文件名 )

可以自动补全文件名，包括本地文件和远程文件，从而提高文件操作和引用的效率。

16、Prettier( 格式化代码 )⭐

可以确保代码具有一致的样式和格式，提高代码的可读性和可维护性。

17、Quokka.js（ 编译时运行 ）

可以在编辑器中即时运行代码，并显示结果，无需离开编辑器即可进行测试和调试。
使用方法首先调出面板并搜索Quokka.js
然后会出现这些，一般选择使用这个

然后代码中神奇的东西就出现了

18、Live Server（ 实时更新页面 ） ⭐

初始化html页面时，每次都需要去刷新页面才能获取更新后的页面，下载这个插件后，保存页面浏览器就会事实更新~~

19、Live Sass Compiler（ sass转换为css ）

将scss文件转换为css文件，提高书写css的效率，在scss文件中点击watch sass实时查看和调试 CSS 样式，提高开发效率和代码的可读性。

20、 vscode-icons（ 图标 ）

它为编辑器中的文件和文件夹提供了一套自定义的图标，这些图标可以帮助开发者更直观地识别文件类型和项目结构，提高开发效率和代码的可读性。

21、 ESLint（ 代码检查 ）⭐

根据eslintrc配置文件定义规则来发现代码中的问题，并按照一定的规范来编写代码，方便开发者在编写代码时实时检查代码质量。

22、 Code Runner（ 快速调试代码 ）

快速运行代码片段或整个程序，支持Python、JavaScript、Java、C、C++、PHP、Go、Ruby、Perl、Swift 等。

23、 Highlight Matching Tag（ 快速定位HTML ）

快速找到和定位高亮显示 HTML 或 XML 标签的匹配项。

24、 CSS Pick（ 快速定位CSS）

选择和操作网页元素的 CSS 选择器，它可以快速找到并应用 CSS 样式，从而提高网页设计和开发的效率。

25、 code spell checker（ 检查拼写） ⭐

有时候代码里面单词写错了，它就会检查代码中拼写错误，及时发现并修正代码中的拼写错误，提高代码质量和可读性。

26、Image preview （预览图片）

可以在选择或悬停在图片上时，显示图片的预览效果。一般会在左侧生存预览的图片，通过 Image preview，可以更直观地查看和编辑图片。

27、carbon-now-sh（代码转图片）

将代码转换为漂亮的图片，使用方法下载插件然后选中代码并按下win + alt +a 就会跳转到生成图片的浏览器页面。
可以在生成图片的这个页面自定义代码图片的样式，如背景颜色、字体大小等。

最后看导出的效果

28、any-rule ( 快速生成正则表达式 )

提供了一系列的正则表达式规则，快速匹配和验证各种类型的字符串。
操作方法： crl+p 打开搜索栏 然后输入 >zz 就能快速的查找需要的正则表达式。

29、Draw.io Integration ( 创建图表 )

为图表创建和编辑提供了全方位的支持，无论是集成、实时预览、导出和导入还是自定义模板。

最后

以上就是本人基本上常用的一些插件了，
如果大家也有比较好用的插件欢迎留言补充~~