常见的vscode插件推荐

在工作的时候被要求安装几十个插件，工欲善其事必先利其器，打算积极研究下插件的作用并使用起来，大概分为代码美化、功能强化、智能辅助、扩展工具等几类。介绍插件之余也会穿插着介绍几个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装机必备插件后面持续更新