vscode 插件推荐安装
(必装)Chinese (Simplified) (简体中文)
可以设置成中文

Vue VSCode Snippets
- 介绍:这个插件提供了一系列的代码片段,帮助你快速编写 Vue 模板、脚本和样式。
- 使用方式:安装插件后,输入特定的缩写(如 vbase)即可生成基础的 Vue 模板代码。

ESLint
- 介绍:ESLint 是一个插件,用于识别和报告 JavaScript 代码中的模式,它可以帮助你保持代码质量和编码风格的一致性。
- 使用方式:安装 ESLint 插件和相应的 Vue ESLint 配置包后,在 .eslintrc 文件中配置你的规则。

(必装)var-translate-en(翻译)
中文翻译成英文,驼峰命名
默认快捷键win: Ctrl + Shift + v ,转英文
默认快捷键 win: Ctrl Ctrl(双击Ctrl) 转中文

Prettier - Code formatter
- 介绍:Prettier 是一个流行的代码格式化工具,它支持多种语言和框架,包括 Vue。
- 使用方式:安装后,可以通过快捷键(通常是 Shift + Alt + F)或保存时自动格式化代码。

Vue Peek
- 介绍:Vue Peek 插件允许你对 Vue 组件进行快速导航,特别是在查找组件定义的时候非常有用。
- 使用方式:安装后,只需点击组件名,即可跳转到组件的定义处。
Vue 3 Snippets
- 介绍:这个插件专为 Vue 3 提供了代码片段,帮助开发者快速编写 Composition API 等新特性的代码。
- 使用方式:输入特定的缩写,如 v3setup,插件会自动展开为对应的代码片段。
Auto Rename Tag(自动重命名标签)

(必装)indent-rainbow(括号颜色)
功能:彩虹缩进
Path Intellisense(代码建议)
介绍:自动完成文件路径,这对于在 Vue 文件中导入组件或其他文件非常有用。
使用方式:安装后,当你输入 import 语句或其他需要文件路径的地方时,插件会提供自动完成建议。

(必装)path-alias 一个可以解决路径别名提示,跳转的vscode插件
插件右击,扩展配置,设置pathAlias.aliasMap中配置
把我们项目常见的路径进行配置进去
@ 代表我工作目录下的src目录那么我只用在配置中
${cwd}来代替当前工作目录的绝对路径
{ "pathAlias.aliasMap": { "@": "{cwd}/src", "views": "{cwd}/src/views", "assets": "{cwd}/src/assets", "directive": "{cwd}/src/directive", "components": "${cwd}/src/components" } }
可以自定义路径别名,在设置pathAlias.aliasMap中配置,key是你要定义的别名,value是路径别名所对应的绝对路径。其中可以使用
Code Spell Checker(检查单词拼写是否错误)

(必装)TONGYI Lingma (阿里大模型)
可以进行提问和给出你需要的帮助;

Bookmarks(书签)
标记代码进行快速跳转

(必装)Prettier - Code formatter(代码整理)
功能:代码美化,自动格式化成规范格式
(必装)GitLens 管理git和查看提交信息的

Vue 开发推荐
(必装)vue-component
功能:输入组件名称自动导入找到的组件,自动导入路径和组件(选中后自动输入组件名(包含必填属性)、import语句、components属性)

(必装)Vetur(开发 Vue 必备)
vetur 是 vue2 的配套,对vue2相关语法进行提示
(必装)Vue 3 Snippets
基本必备:很多Vue的代码段,很方便开发