一、代码质量保障类

1.ESLint

• 功能：主要用于检查 JavaScript 代码的语法问题。它能够在你编写代码的过程中，实时检测出语法错误，帮助你及时纠正，避免在运行时出现意外错误，提高代码的可靠性和稳定性。
• 示例：当你不小心写错了一个函数的参数或者遗漏了一个分号时，ESLint 会在编辑器中立即给出提示，让你能够快速定位并修复问题。

2.Prettier - Code Formatter

• 功能：专注于格式化代码，使你的代码风格保持一致。它可以自动调整代码的缩进、空格、换行等格式，让你的代码看起来更加整洁、易读。
• 示例：无论你是团队协作还是个人开发，不同的人可能有不同的代码格式习惯。Prettier 可以统一代码风格，使得整个项目的代码如同出自一人之手，方便阅读和维护。
• 需要配置vscode的defaultFormatter，建议在.vscode的settings.json配置，而不是vscode的用户工作空间配置

二、Vue 开发相关类

1.Vue - Official

• 功能：安装此插件后，Vue Language Features（Volar）、Typescript Vue Plugin（Volar）都无需再安装，因为已经统一整合且改名成Vue - Official。它为 Vue 开发提供了全面的支持，包括语法高亮、代码补全、智能感知等功能。
• 示例：在编写 Vue 组件时，它能自动识别 Vue 的语法结构，为你提供准确的代码提示，大大提高开发效率。
• ！！！注意事项：请注意假如是Vue2项目，还需要安装Vetur，且开发期间，假如是Vue3项目，最好禁用Vutur以避免冲突，同理，Vue2项目也最好禁用Vue - Official（假如两者没发生冲突，可不理会此注意事项，因为这两个插件一直在更新，可能已经解决了冲突相关）

2.vue - helper（Vue2 项目必装）

• 功能：专门解决 Vue2 代码无法点击跳转的问题。在大型 Vue2 项目中，代码跳转功能非常重要，它可以帮助你快速定位到相关的代码文件和函数定义，节省查找时间。
• 示例：当你在一个 Vue 组件中看到一个方法调用，想要查看该方法的具体实现时，通过此插件ctrl + 鼠标左键可以直接点击跳转过去，无需手动查找文件和位置。
  

三、Git 操作优化类

1.GitLens — Git supercharged（可视化 git 操作）

• 功能：其最简单的功能是可实时查看修改了哪些文件以及改动。它以直观的方式展示 Git 的相关信息，让你对代码的版本控制情况一目了然。
• 示例：当你在项目中进行了多次修改后，通过 GitLens 可以清晰地看到哪些文件被修改了，以及具体的修改内容，方便你进行代码审查和提交。

2.Git Graph

• 功能：能够图形化展示所有提交历史。安装完成后，按 Ctrl + Shift + P 打开命令面板，输入 Git Graph 并选择 Git Graph: View Git Graph，你将看到一个清晰的图形化 Git 历史视图，展示了各个分支和提交。
• 示例：对于复杂的项目开发过程，分支众多，提交频繁。Git Graph 可以帮助你直观地了解项目的开发历程，便于回溯和理解代码的演进过程。

3.Git History

• 功能：更直观地查看某个文件的所有提交记录。只需右键点击 Git: View File History，即可查看特定文件的提交历史记录。
• 示例：当你需要追踪一个文件的修改历史，了解其功能的演变过程或者查找某个特定功能的添加或修改时间时，Git History 就派上用场了。

四、代码编辑辅助类

1.Auto Rename Tag

• 功能：当你修改标签时，它会自动同步修改相关的闭合标签。在 HTML 和 XML 等标记语言的开发中，这个功能非常实用，避免了手动修改闭合标签可能带来的错误。
• 示例：当你修改一个
  标签的名称为时，它会自动将对应的
  修改为，确保标签的一致性。

2.Auto Close Tag

• 功能：自动为你加上闭合标签。在编写 HTML 等代码时，当你输入开始标签后，它会自动添加相应的闭合标签，提高编写效率，减少遗漏闭合标签的错误。
• 示例：输入

  后，它会自动在后面添加

  ，让你可以专注于内容的编写，而不必频繁手动输入闭合标签。

3.Css Peek

• 功能：通过 Ctrl + 左键可查看 CSS 定义。在开发时，当你需要查看某个元素的 CSS 样式定义时，这个功能可以快速定位到对应的 CSS 代码位置。
• 示例：当你在 HTML 文件中看到一个样式精美的元素，想要了解它的 CSS 样式是如何定义的时，使用 Css Peek 可以快速跳转到相关的 CSS 文件和代码位置。
• ！！！注意事项：仅可跳转在css文件定义的样式，Vue组件中的style需要通过安装Vue - Official方可点击跳转

4.DotEnv

• 功能：高亮 env 文件。在项目中，env 文件通常用于存储环境变量等敏感信息。DotEnv 插件通过高亮显示 env 文件，使其在编辑器中更加醒目，方便你进行配置和管理。
• 示例：在开发过程中，你可以快速区分出 env 文件，并且更容易识别和修改其中的环境变量配置。

5.Error Lens

• 功能：实时显示错误。它会在代码中出现错误时，立即在编辑器中给出明显的提示，包括错误类型、位置等信息，帮助你快速定位和解决问题。
• 示例：当你的代码存在语法错误或者运行时错误时，Error Lens 会在相应的代码行上显示红色标记，让你能够第一时间发现并处理错误。

6.Turbo Console Log

• 功能：快速生成 console。提供了一系列快捷键操作，如
  • Ctrl + Alt + L: 生成 console；
  • shift + alt + C: 注释 console；
  • ctrl + alt + U: 去掉注释；
  • ctrl + alt + D: 删除 console。
• 这些快捷键可以大大提高调试代码时输出日志的效率。
• 示例：在调试 JavaScript 代码时，你可以快速添加 console.log 语句来输出变量的值或调试信息，通过快捷键操作更加便捷高效。
• 操作很简单，双击选中变量，然后使用Ctrl + Alt + L就行了，删除则shift + alt + C

7.Path Intellisense

• 功能：更智能的自动提示路径，快速导入文件。在编写代码时，当你需要引入其他文件时，它能够自动提示文件路径，减少输入错误，提高文件导入的效率。
• 示例：当你在 JavaScript 或其他语言中需要导入一个模块或文件时，Path Intellisense 会根据项目结构自动提示可能的路径，让你快速准确地完成文件导入。
• ！！！注意事项：需要在settings.json配置如下，禁用vscode自带的智能提示路径

{ 
    "typescript.suggest.paths": false,
    "javascript.suggest.paths": false
}  

8.Code Spell Checker

• 功能：英语拼写检测。对于代码中的英文注释、变量名等，它可以检查拼写是否正确，提高代码的可读性和专业性。
• 示例：当你不小心写错了一个单词，如 “function” 写成了 “functoin”，Code Spell Checker 会在编辑器中给出提示，让你及时纠正拼写错误。

9.indent-rainbow

• 功能：可视化缩进。通过不同颜色的标记显示代码的缩进层次，让你更加清晰地看到代码的结构，便于阅读和理解。
• 示例：在查看复杂的代码块时，indent-rainbow 可以帮助你快速分辨出不同层次的缩进，更好地理解代码的逻辑关系。

五、框架和语言特定类

1.Tailwind CSS IntelliSense

• 功能：为 Tailwind CSS 提供智能提示语法功能。当你使用 Tailwind CSS 编写样式时，它能自动提示相关的类名和属性，提高编写效率，减少错误。
• 示例：在编写 HTML 文件并应用 Tailwind CSS 类时，输入 bg-，它会自动提示 bg-primary、bg-secondary 等相关的类名，让你快速选择合适的样式类。

2.ES7 + React/Redux/React - Native snippets

• 功能：提供了许多速记前缀来加速开发，并帮助开发人员为 React、Redux、GraphQL 和 React Native 创建代码片段和语法。你可以点击查看：github.com/r5n-labs/vs…。
• 示例：当你在编写 React 组件时，输入一些特定的前缀，如 rfc，它会自动生成一个 React 函数组件的模板代码，节省你编写基础代码的时间。

3.Typescript React Code Snippets

• 功能：包含了使用 Typescript 的 React 代码片段。对于使用 Typescript 进行 React 开发的项目，它提供了丰富的代码片段，方便你快速编写代码。
• 示例：在创建一个 Typescript 的 React 类组件时，输入相关的前缀，比如tsrafce，它会自动生成类的基本结构和相关的方法定义，提高开发效率。

六、界面美化和增强类

1.Material Icon Theme（可选安装）

功能：丰富化项目的文件 icon 美化。它为项目中的各种文件和文件夹提供了美观的图标，使 VSCode 的界面更加美观和易于区分不同类型的文件。
示例：安装后，你会看到不同类型的文件，如 JavaScript 文件、CSS 文件、HTML 文件等，都有独特的图标显示，让你的项目目录更加清晰直观。

2.Todo Tree

• 功能：在 VSCode 左侧图标点击可展开所有 todo，并高亮 todo。这个插件对于项目管理和任务跟踪非常有用，它可以让你快速找到代码中的待办事项。
• 示例：当你在编写代码过程中，标记了一些 “TODO: 需要优化此部分代码” 的注释，Todo Tree 会将这些 todo 集中显示并高亮，提醒你后续需要处理的任务。

以上就是为大家精心整理的 VSCode 插件必安装列表，每个插件都有其独特的功能和价值，希望它们能帮助你在开发过程中更加高效、顺畅地编写代码，提升你的开发体验和项目质量。你可以根据自己的项目需求和开发习惯，选择适合自己的插件进行安装和使用。（如有错误麻烦指正一下，谢谢）