插件推荐

Auto Close Tag - 自动添加 HTML/XML 结束标签
Auto Complete Tag - 为 HTML/XML 添加关闭标签和自动重命名成对的标签
Auto Import - 自动查找、解析和提供所有可用导入的代码操作和代码完成
Auto Rename Tag - 自动重命名成对的 HTML/XML 标签
Color Highlight - 颜色高亮插件
DotENV - 高亮.env 文件
EditorConfig for VS Code - 统一不同编辑器的一些配置
ESLint - 代码检查
Git Graph - Git 图形化操作工具
GitLens — Git supercharged - 显示具体某行代码的 git 信息
Icônes - 搜索 iconify 图标的插件
Iconify IntelliSense - Iconify 图标实时显示的插件
javascript console utils - 提供快捷键 ctrl+l 直接输入 console.log()
Material Icon Theme - 图标主题，显示文件和文件多种图标
Path Intellisense - 智能显示导入的路径
Prettier - Code formatter - 代码格式化插件
UnoCSS - unocss 写法提示插件
Vue Language Features (Volar) - volar 插件， Language support for Vue 3
Vue VSCode Snippets - vue2、vue3 写法提示

部分配置

为了优化性能，Volar 提供了一个叫做“Takeover 模式”的功能。在这个模式下，Volar 能够使用一个 TS 语言服务实例同时为 Vue 和 TS 文件提供支持。

要开启 Takeover 模式，你需要执行以下步骤来在你的项目的工作空间中禁用 VSCode 的内置 TS 语言服务：

在当前项目的工作空间下，用 Ctrl + Shift + P (macOS：Cmd + Shift + P) 唤起命令面板。
输入 built，然后选择“Extensions：Show Built-in Extensions”。
在插件搜索框内输入 typescript (不要删除 @builtin 前缀)。
点击“TypeScript and JavaScript Language Features”右下角的小齿轮，然后选择“Disable (Workspace)”。
重新加载工作空间。Takeover 模式将会在你打开一个 Vue 或者 TS 文件时自动启用。