VSCode + Vue3 常用组件

问题概述

新开发环境：
如下截图所示，App.vue 组件的标签内容均灰色，没有颜色区分。

解决方案

1. 必装：Vue - Official

在 VS Code 扩展中搜索：

Vue - Official

发布者为 Vue，扩展 ID：

Vue.volar

它以前叫 Volar，负责 .vue 文件的语法高亮、组件提示、模板类型检查和跳转等功能，是 Vue 官方推荐的 VS Code 扩展。([Vue.js][1])

也可以在终端安装：

code --install-extension Vue.volar

如果安装了旧的 Vetur，建议在 Vue 3 项目中将其禁用，避免两个 Vue 语言服务冲突。Vue 官方也明确建议 Vue 3 使用 Vue - Official 替代 Vetur。([Vue.js 中文网][2])

安装后执行：

Ctrl + Shift + P

输入：

Developer: Reload Window

重新加载 VS Code。

2. 更换颜色区分明显的主题

你的截图使用的是颜色比较接近的暗色主题。即使安装了 Vue - Official，具体显示什么颜色，主要还是由 VS Code 的主题决定。VS Code 官方说明，语义标记是否使用不同颜色取决于当前主题的配置。([Visual Studio Code][3])

推荐安装：

One Dark Pro

扩展 ID：

zhuangtongfa.Material-theme

该主题对关键字、变量、字符串、组件名和属性的颜色区分通常比较明显。([Visual Studio Marketplace][4])

安装命令：

code --install-extension zhuangtongfa.Material-theme

然后按：

Ctrl + K
Ctrl + T

选择：

One Dark Pro

也可以先尝试 VS Code 自带的：

Dark+ (default dark)

3. 开启语义高亮

打开 VS Code 设置：

Ctrl + ,

搜索：

Semantic Highlighting

将其启用。

或者打开 settings.json，加入：

{
  "editor.semanticHighlighting.enabled": true
}

语义高亮会让语言服务根据变量、属性、组件等实际含义进行着色，而不只是根据文本格式着色。([Visual Studio Code][5])

4. 检查文件语言模式

打开 App.vue 后，看 VS Code 右下角的语言模式，应该显示：

Vue

如果显示的是：

Plain Text
HTML

点击它，然后选择：

Vue

否则 Vue 扩展不会完整工作。

5. 想突出成对标签，可以再装这个

如果你的需求是快速区分：

<template>
</template>

<div>
</div>

对应的开始标签与结束标签，可以安装：

Highlight Matching Tag

扩展 ID：

vincaslt.highlight-matching-tag

它会突出显示当前光标所在标签所对应的开始或结束标签；其说明中表示 Vue 文件通常也可以使用，但官方主要保证 HTML 和 JSX。([Visual Studio Marketplace][6])

code --install-extension vincaslt.highlight-matching-tag

建议安装组合

最少安装这两个：

Vue - Official
One Dark Pro

需要突出成对标签时再加：

Highlight Matching Tag

需要注意，正常语法高亮通常是按照“类型”区分颜色，例如组件名一种颜色、属性一种颜色、字符串一种颜色，并不会让 <div>、<span>、<el-button> 每一种标签都拥有完全不同的颜色。安装 Vue - Official + One Dark Pro 后，你截图中的 import、变量、路径字符串、template 和 HelloWorld 应该会有更清晰的颜色区别。