vsCode推荐插件

     从事前端时间不短了，现在市场上的代码编辑器也是层出不穷，像什么vscode，Notepad++，Notepad2，UltraEdit等等哈，开发的时候，我主要还是用的是vsCode，他的扩展性是比较高的，在开发的时候能够起到一些辅助作用，今天呢给大家推荐几款常用的vsCode插件

     本人亲身实测，真实有效哈哈

一、Auto Close Tag

        Auto Close Tag扩展的主要作用是在编写HTML/XML代码时自动添加闭合标签。它会根据开放标签的闭合括号的位置自动插入相应的闭合标签，并将光标定位在开始标签和结束标签之间，提高了编写代码的效率和准确性。此外，它还具有其他功能，如设置不会自动关闭的标签列表、自动关闭自闭合标签、支持Sublime Text 3模式等。通过这个扩展，您可以更快地编写HTML/XML代码，减少错误，并且可以根据自己的需求进行配置。

二、Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

        "Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code" 是一个为 Visual Studio Code 提供简体中文本地化支持的插件。它的主要作用是将 Visual Studio Code 的用户界面和编辑器相关的文本翻译成简体中文，以便中文用户更方便地使用和理解 Visual Studio Code。

       该插件可以将菜单、按钮、对话框、快捷键等界面元素翻译成简体中文，使得界面更符合中文用户的习惯和需求。它还可以将编辑器中的提示、错误信息、代码片段等翻译成简体中文，方便中文用户阅读和理解代码。

       通过安装这个插件，您可以在 Visual Studio Code 中获得一个完全用简体中文显示的界面，并且与其他功能和扩展完全兼容。这样，中文用户可以更轻松地使用 Visual Studio Code 进行开发和编码工作，提高工作效率和舒适度。

三、Code Spell Checker

这个很重要，大家要记一下

       "Code Spell Checker" 是一个用于 Visual Studio Code 的拼写检查插件。它的主要作用是在您编写代码时检查代码中的拼写错误，并提供纠正建议，帮助你避免常见的拼写错误和语法错误。

        这个插件可以检查你在代码注释、字符串、变量名等位置中可能存在的拼写错误。它会扫描您的代码，并在发现可能的拼写错误时，在编辑器中进行标记并提供纠正建议。你可以通过鼠标悬停或右键单击错误标记来查看建议，并进行快速修复。

        Code Spell Checker 还支持自定义词典，你可以添加自定义单词或术语以避免其被错误地标记为拼写错误。此外，你还可以配置插件的行为，如选择特定的语言进行拼写检查、忽略特定的文件或文件夹、自定义拼写检查规则等。

        通过安装和使用 Code Spell Checker，你可以在编写代码时及时发现和修复拼写错误，提高代码质量和可读性，并减少因拼写错误而引起的潜在问题。这可以帮助你编写更准确、更可靠的代码。

四、Element Plus Snippets

       这个插件的主要作用是提供一套 Element Plus 组件的代码片段，以便你在编写 Vue.js 代码时快速插入和生成常见的 Element Plus 组件代码。它包含了 Element Plus 组件库中的各种组件，如按钮、输入框、表格、弹窗、菜单等，以及相关的属性、事件和样式。

       通过安装这个插件，你可以在编写 Vue.js 代码时，通过输入特定的触发词，快速生成 Element Plus 组件的代码模板。例如，当你输入el-button触发词后，插件会自动展示并生成一个按钮组件的代码模板，包含常用的属性和事件。

        这个插件可以大大提高你在使用 Element Plus 组件库时的开发效率，减少手动编写模板代码的工作量。你可以通过快速插入代码片段，快速构建和定制 Element Plus 组件，加快开发速度并减少出错的可能性。

如果有小伙伴在使用element-plus编写项目，可以使用这个，挺方便的

五、Git History

"Githistory" 是一个用于 Visual Studio Code 的插件，它提供了一个交互式的 Git 历史记录界面，让你可以更方便地查看、浏览和分析项目的 Git 提交历史。

这个插件的主要作用是提供一个可视化的界面，显示 Git 仓库中的提交历史，并呈现每个提交的详细信息，如作者、提交时间、提交消息等。你可以通过浏览历史记录、搜索提交、查看文件变更、比较不同版本等功能来深入了解项目的演变和开发过程。

通过安装这个插件，你可以在 Visual Studio Code 中直接打开 Git 历史记录面板，在其中浏览和操作提交历史。你可以按照不同的时间范围、分支或作者进行筛选，以定位和查看特定的提交。你还可以通过提交的详细信息中的链接，跳转到相关的文件变更或比较视图。

这个插件可以帮助你更好地理解项目的版本控制历史，追踪每个提交的变更内容，并轻松进行版本间的比较和分析。它提供了一个直观和便捷的界面，让你更高效地浏览和管理 Git 提交历史。

六、GitLens — Git supercharged

"GitLens — Git supercharged" 是一个功能强大的 Git 插件，专为 Visual Studio Code 设计。它提供了一系列增强的 Git 功能，帮助你更好地理解和管理项目的版本控制。

这个插件的主要作用是在编辑器中集成 Git 相关的功能，使你能够更方便地查看、理解和操作 Git 仓库。它为每行代码添加了注解，显示最后一次修改该行的提交信息，包括作者、提交时间和提交消息。你可以通过悬停鼠标或点击注解，查看详细的提交信息，并在需要时进行比较或导航到相关的文件变更。

除了代码注解，GitLens 还提供了其他一些强大的功能。它可以显示当前文件的 Git 历史记录，并可视化地展示每个提交的变更。你可以轻松地浏览和回溯不同的提交版本，比较文件的差异，并查看每个提交的详细信息。此外，它还提供了分支、标签、远程仓库等 Git 相关信息的快速访问和操作。

通过安装这个插件，你可以更深入地了解项目的版本控制历史，追踪代码的变更，轻松比较和浏览不同的提交版本。GitLens 提供了一套强大的工具，使你更有效地使用 Git，并提供了更好的代码可视化和导航体验。

七、Live Server

这个插件的主要作用是创建一个本地开发服务器，并自动在你的默认浏览器中打开你当前编辑的 HTML、CSS 或 JavaScript 文件。每当你保存文件时，Live Server 会自动重新加载页面，让你能够实时查看所做的更改。

通过安装 Live Server 插件，你可以在开发过程中轻松调试网页。它提供了一种快速、便捷的方式来预览你的网页，并实时查看你对代码所做的修改。这对于前端开发和调试非常有帮助，可以提高你的开发效率，并提供更好的实时反馈。

此外，Live Server 还支持一些额外的功能，例如自定义端口、启用/禁用浏览器自动刷新、启用/禁用 CSS 注入等。这些功能使你能够根据自己的需求进行设置和调整。

总之，Live Server 是一个方便的工具插件，可以帮助你在本地快速搭建开发服务器，并实时预览和调试你的网页。它简化了前端开发过程，并提供了更好的开发体验。

八、Prettier - Code formatter

这个插件的主要作用是根据预设的代码样式规则，自动调整你的代码的缩进、换行、空格等格式，以使代码更易读、一致性更高。在保存文件时，Prettier 会自动对你的代码进行格式化，确保整个项目中的代码风格保持一致。

使用 Prettier 插件，你无需手动调整每一行代码的格式，而是依靠插件自动处理。这将大大提高代码的可读性和可维护性，并减少在团队合作或项目维护过程中由于代码风格不一致而引发的问题。

此外，Prettier 还支持多种编程语言，包括 JavaScript、TypeScript、CSS、HTML、JSON 等。它具有高度可配置的选项，可以根据你的需求进行个性化定制，如缩进大小、换行符风格、引号类型等。

总之，Prettier - Code formatter 是一个强大的代码格式化工具，它能够帮助你快速、统一地格式化你的代码，并提供了灵活的配置选项。通过保持一致的代码风格，你可以提高代码质量、可读性和团队协作效率

九、Vue Language Features (Volar)

这个插件的主要作用是增强对 Vue.js 代码的语法高亮、智能提示、代码补全等功能。它能够识别 Vue.js 单文件组件的各个部分，包括模板、脚本和样式，并为每个部分提供相应的语法支持。

通过安装 Volar 插件，你可以获得以下主要功能：

1. 语法高亮：Volar 可以正确地高亮显示 Vue.js 单文件组件中的模板、脚本和样式代码，让你更清晰地了解每个部分的内容。

2. 智能提示：Volar 提供了智能的代码提示功能，根据你的代码上下文，推断可能的选项并提供相应的建议，包括组件、属性、方法等。

3. 代码补全：Volar 支持代码自动补全，可以根据你输入的代码片段或关键词，提供可能的补全选项，帮助你快速编写代码。

4. 错误检查：Volar 可以检测并提示潜在的语法错误和逻辑问题，帮助你及时发现并修复这些问题。

5. 跳转和查找：Volar 支持快速跳转到组件定义、引用、相关文件等，并提供方便的查找功能，方便你在项目中进行导航和定位。

总之，Vue Language Features (Volar) 插件提供了全面的 Vue.js 语言特性支持，让你能够更轻松地编写和维护 Vue.js 代码。它提供了丰富的功能和工具，提高了开发效率和代码质量。

       好啦，本期就到这里了，后续我会继续给大家更新好用的插件，以及开发中遇到的奇葩Bug，大家一起讨论，我是爱码士，感谢观看----