在工作的时候被要求安装几十个插件，工欲善其事必先利其器，打算积极研究下插件的作用并使用起来，大概分为代码美化、功能强化、智能辅助、扩展工具等几类。介绍插件之余也会穿插着介绍几个vscode中好用的配置功能和快捷方式供大家参考，大家一起进步吧。
代码美化
Code Spell Checker
作用：代码拼写检查，用于检查代码中的单词拼写错误，帮助开发者维护代码的准确性和专业性
如果有单词拼写错误就会给出提示，默认是蓝色，支持驼峰命名。
Image Preview
作用：引用图片预览，当有使用图片路径的时候，在左边实现小的预览器
Color Highlight
作用：颜色代码高亮，在开发过程中直接高亮使用的颜色
如果在变量中或者template中需要定义颜色的时候，会直接高亮展示的颜色，开发时更为直观
indent-rainbow
作用：颜色化代码缩进
通过颜色化代码缩进来提升代码的可读性和易读性。该插件通过交替使用四种不同的颜色来标记每一级的缩进，从而帮助开发者更容易地识别代码的结构。
Better Comments
作用：注释高亮，不同的注释实现不同的高亮效果
安装该插件中，它会在setting.json中默认配置以下几种类型的颜色注释效果
// setting.json文件
"better-comments.tags": [
// 用于标记需要注意的代码部分
{
"tag": "!",
"color": "#FF2D00",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
// 用于标记需要进一步查询或确认的代码部分
{
"tag": "?",
"color": "#3498DB",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
// 用于标记被注释掉的代码，使其更加醒目
{
"tag": "//",
"color": "#474747",
"strikethrough": true,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
// 用于标记待办事项
{
"tag": "todo",
"color": "#FF8C00",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
// 用于标记需要特别关注的代码部分
{
"tag": "*",
"color": "#98C379",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
}
],
如果注释在vue文件中不生效？
请根据C:\Users\用户名\.vscode\extensions\aaron-bond.better-comments-版本号\out该路径找到parser.js文件，在setDelimiter函数中添加以下代码：
case "vue":
this.setCommentFormat("//", "/*", "*/")
break;
Highlight Matching Tag
作用：主要用于代码编辑和编程时，帮助开发者快速识别和定位代码中的标签对
高亮显示匹配的开启和关闭标签，帮助开发者更高效地处理HTML和JSX文件。当开发的页面嵌套为复杂时，高亮可以有效地区分出标签之间的层级与关系。
高亮配对的括号
该功能已经内置在vscode中，直接配置即可。
它能够为匹配的括号添加颜色，以便于开发者更好地识别和匹配代码中的括号。
配置方法如下：
方法一
在设置中搜索
@id:editor.bracketPairColorization.enabled @id:editor.guides.bracketPairs
勾选控制是否启用括号对着色，并设置控制是否启用括号对指南为active
方法二
直接在 setting.json 文件中配置
打开设置点击右上角按钮打开设置(json)，就能打开setting.json文件，配置以下内容
{
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs":"active"
}
功能强化
CSS Navigation
作用：css定义跳转，允许你通过ctrl+点击 HTML 文件中的 CSS 类名来跳转到 CSS 文件中的定义位置
跳转到css定义的位置后，如何再跳转回tempalte中引用的位置？
可以使用快捷键 alt+leftArrow，可以实现返回
KoroFileHeader
作用：快捷生成注释，可以添加文件头部注释和函数注释
设置方法查看VSCode注释神器，快捷键设置让注释轻松搞定
快捷键：添加文件头部注释Ctrl + Win + I
快捷键：添加函数注释Ctrl + Win + T
Auto Rename Tag
作用：可以在一个标签更改时自动更新另一个标签
Auto Colose Tag
作用：实现自动闭合标签
注意：该功能VSCode已内置
Error Lens
作用：代码静态检查与提示工具
在代码行末尾或行内直接显示错误/警告信息（如语法错误、类型错误、未定义变量等）。直接定位代码问题，无需查看底部面板。
实现颜色hex（16进制）和rgb的转换
不需要安装插件
将鼠标移动到色块上，点击弹窗最上方的颜色值，就可以进行切换
css扩展缩写
更多语法规则可以查看一篇文章搞懂【Emmet】语法规则
代码片段类插件
这一类的插件比较多，功能都提供代码片段，输入几个字符，就能提供一整段代码提示。常用的插件如下所示，也可以利用vscode自带的snippets功能自定义模板。
- JavaScript (ES6) code snippets
- Jest Snippets
- HTML Snippets
- Vue VSCode Snippets
- Vue 3 Snippets
如何自定义代码模板
例如：自定义了一个名称为vue2的模板，输入vue2按回车键，模板自动生成
配置方法如下
1.ctrl+shift+p打开命令面板搜索snippets，选择代码片段：配置代码片段
2.搜索vue，选择vue.json，进行配置
3.自定义模板配置
{
"Print to console": {
"prefix": "vue2", // 快捷键
"body": [
"<template>",
" <div></div>",
"</template>",
"",
"<script>",
"export default {",
" components: {},",
" props: {},",
" data() {",
" return {};",
" },",
" watch: {},",
" computed: {},",
" mounted() {},",
" methods: {},",
" beforeCreated() {}",
"};",
"</script>",
"<style lang=\"scss\" scoped></style>",
],
"description": "A vue file template"
}
}
如何实现文件跳转
网上分享了有
别名路径跳转、Path Alias，可能是我之前有安装其它插件冲突，导致安装这些插件的时候路径跳转不生效。
下面推荐我目前正在使用的插件配套，通过ctrl+点击(组件/变量/方法)实现快速定位
1.配置jsconfig.json文件
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}
jsconfig.json 文件允许你定义项目的根目录和文件路径。
通过配置 compilerOptions 中的 baseUrl 和 paths，设置别名，使得在项目中引用模块时，能够正确解析路径。
设置jsconfig.json文件后其实大部分情况下已经能实现组件跳转了
前提是引入的子组件必须为完整的路径。
// 可以实现跳转
import NavigationBar from "@/components/NavigationBar/index.vue";
// 无法实现跳转
import NavigationBar from "@/components/NavigationBar";
2.安装vue-helper插件
作用：实现变量/方法/组件的快速定位
vue helper插件的功能还有很多，具体可查看文档vue helper
3.如果出现了ctrl+左键跳转时出现存在多个定义的情况
设置将控制存在多个目标位置时"xxxx"命令的行为修改为goto（转到主结果）
智能辅助
CodeGeex
作用：一款基于大模型技术的代码生成工具，旨在帮助开发者提高编程效率。它可以根据用户输入的注释、需求描述或其他代码片段，自动生成相应的代码。
扩展工具
Code Runner
作用：快速运行调试代码，直接在编辑器中查看代码
可以在VSCode中直接运行代码片段，就不需要启动某个项目，在浏览器的控制台中打印输出内容了
使用：点击右上角的三角形按钮或者右键选择Run Code运行
也可以在vue中直接运行代码，需要在设置中配置Code-runner: Default Language为javascript
drawio
作用：允许你在VSCode中直接编辑和预览Draw.io图表
Markdown Preview Enhanced
作用：markdown文件预览，在md文件中右键选择Markdown Preview Enhanced就能实现预览
Auto Markdown TOC
作用：可以自动生成markdown目录
Postman
作用：在vscode中就能实现接口调用
VSCODE快捷方式参考
最常用
ctrl+shift+p 打开所有命令，搜索Reload Window，重新加载窗口
备注
stylelint、Eslint、Prettier、Vetur、Vue - Official、GitlLens、Git Graph等vscode装机必备插件后面持续更新
