1. Vetur

Vetur 是一个为 Vue.js 设计的 VSCode 插件，它提供了 Vue 单文件组件 (SFC) 的语法高亮、片段、Emmet、Linting / 错误检查、格式化、自动补全、调试等功能。在 Vue3 的开发中，Vetur 是不可或缺的插件之一。

1.2 或者 Vue (Official)

支持 Vue 3 的 单文件组件（SFC）语法高亮，包括 <script setup> 语法糖和 组合式 API

自动填充指令、生命周期钩子、组件选项等常用代码片段

2. Vite

Vite 插件为 VSCode 提供了对 Vite 项目的支持，包括启动、调试和热更新等功能。开发者可以通过这个插件快速启动和调试 Vite 项目，提高开发效率。

3. ESLint

ESLint 是一个开源的 JavaScript 代码检查工具，它可以帮助开发者发现和修复代码中的潜在问题，提高代码质量。在 Vue3、Vite 和 TypeScript 的开发环境中，使用 ESLint 可以有效地规范代码风格，减少错误。

4. Prettier - Code formatter

Prettier 是一款强大的代码格式化工具，它支持多种语言，包括 JavaScript、TypeScript、HTML、CSS 等。通过 Prettier，开发者可以自动调整代码格式，保持代码风格的一致性。在 Vue3、Vite 和 TypeScript 的开发环境中，使用 Prettier 可以大大提高代码的可读性和可维护性。

5. Debugger for Chrome

Debugger for Chrome 是一个 VSCode 插件，它允许开发者在 VSCode 中直接使用 Chrome 浏览器的调试功能。这对于 Vue3、Vite 和 TypeScript 的前端开发来说非常有用，开发者可以在编辑器中直接设置断点、查看变量、执行代码等操作，提高调试效率。

6. TypeScript Hero

TypeScript Hero 是一个为 TypeScript 设计的 VSCode 插件，它提供了丰富的 TypeScript 功能，如智能提示、自动补全、类型检查等。在 Vue3、Vite 和 TypeScript 的开发环境中，使用 TypeScript Hero 可以帮助开发者更高效地编写和调试 TypeScript 代码。

7. Path Intellisense

Path Intellisense 是一个用于自动完成文件路径的 VSCode 插件。在 Vue3、Vite 和 TypeScript 的项目中，随着项目规模的增大，文件路径的管理变得越来越复杂。使用 Path Intellisense，开发者可以快速准确地输入文件路径，提高开发效率