vscode 插件推荐安装

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的代码段，很方便开发