VSCode怎么让Vue高亮_VSCode实现Vue语法高亮与色彩主题设置教程

安装Vetur或Volar插件即可实现vue高亮，推荐Vetur功能全面，Volar性能更优；搭配One Dark Pro等主题提升视觉体验，并可通过自定义代码片段提高开发效率。

vscode想要Vue高亮，其实很简单，装个插件就行。

VSCode实现Vue语法高亮与色彩主题设置，主要靠的就是插件。接下来细说。

Vetur插件：Vue开发者的瑞士军刀

Vetur这玩意儿，简直是Vue开发者的标配。它不光能搞定语法高亮，还能提供代码补全、错误检查、格式化等等一系列功能。装了它，你的VSCode立马就能理解Vue文件里的各种奇奇怪怪的语法，让代码看起来清晰多了。

立即学习“前端免费学习笔记（深入）”；

安装Vetur的步骤也很简单：打开VSCode，点开左侧的扩展商店图标，搜索”Vetur”，然后点击安装就完事儿了。装完之后，重启一下VSCode，就能看到效果了。

如果装了Vetur之后，发现Vue文件的高亮还是不对劲，那可能是你的VSCode没正确识别Vue文件类型。这时候，你可以手动设置一下：打开Vue文件，点击VSCode右下角的语言模式（一般显示的是”纯文本”或者其他语言），然后选择”Vue”。

色彩主题：让你的代码更养眼

光有语法高亮还不够，一个好看的色彩主题也能提升开发效率。VSCode自带了一些主题，但如果你觉得不够个性，也可以安装第三方主题。

在扩展商店里搜索”theme”，就能找到一大堆主题。我个人比较喜欢One Dark Pro，这个主题颜色搭配比较舒服，长时间看代码眼睛也不容易疲劳。

安装主题的步骤和安装插件差不多，搜索到主题后点击安装，然后在VSCode的设置里选择这个主题就行了。

如何解决Vetur插件导致的卡顿问题？

Vetur虽然好用，但有时候也会出现卡顿的问题，尤其是在大型vue项目里。这主要是因为Vetur的功能太多，占用资源比较多。

解决卡顿问题，可以尝试以下几个方法：

• 禁用不常用的功能： Vetur有很多功能，但并不是所有功能都用得上。可以在VSCode的设置里禁用一些不常用的功能，比如模板校验、代码片段等等。
• 升级Vetur版本： Vetur的作者会不断优化插件的性能，所以保持Vetur版本最新也是一个好方法。
• 使用更轻量级的插件： 如果Vetur实在太卡，可以考虑使用一些更轻量级的插件，比如Vue Language Features (Volar)。这个插件只提供基本的语法高亮和代码补全功能，性能比Vetur好一些。

Vue Language Features (Volar) 是什么，它和Vetur有什么区别？

Vue Language Features (Volar) 是一个由Vue官方团队维护的VSCode插件，旨在提供更高效、更稳定的Vue开发体验。它与Vetur的主要区别在于底层实现方式。Volar基于Language Server Protocol (lsp) 构建，而Vetur则不是。LSP允许编辑器和语言服务器之间进行更高效的通信，从而提高性能和稳定性。

简单来说，Volar通常比Vetur更快、更流畅，尤其是在处理大型Vue项目时。此外，Volar对typescript的支持也更好，如果你使用TypeScript开发Vue项目，那么Volar可能更适合你。

但Vetur也有它的优点，比如它提供了更多的功能，比如模板校验、代码片段等等。所以，选择哪个插件取决于你的个人需求和偏好。

如何自定义VSCode的Vue代码片段？

代码片段可以大大提高开发效率，尤其是在编写重复性代码时。VSCode允许你自定义代码片段，你可以根据自己的需求创建一些常用的Vue代码片段。

创建自定义代码片段的步骤如下：

1. 打开VSCode，点击”文件” -> “首选项” -> “用户代码片段”。
2. 在弹出的对话框中，选择”vue“。
3. VSCode会打开一个名为”vue.json”的文件，你可以在这个文件里定义你的代码片段。

代码片段的格式如下：

{   "Vue Template": {     "prefix": "vtemplate",     "body": [       "<template>",       "  <div>",       "    <!-- Your content here -->",       "  </div>",       "</template>",       "",       "<script>",       "export default {",       "  name: '${1:ComponentName}',",       "  data() {",       "    return {",       "      ${2:data}: null",       "    }",       "  },",       "  methods: {",       "    ${3:method}() {",       "      // Your code here",       "    }",       "  }",       "}",       "</script>",       "",       "<style scoped>",       "",       "</style>"     ],     "description": "Vue template with script and style"   } }

• "Vue Template"

  ：代码片段的名称，会在代码补全时显示。

• "prefix"

  ：触发代码片段的关键词，比如输入”vtemplate”就会触发这个代码片段。

• "body"

  ：代码片段的内容，是一个字符串数组。

• "description"

  ：代码片段的描述，会在代码补全时显示。

${1:ComponentName}

、

${2:data}

、

${3:method}

是占位符，输入代码片段后，你可以按Tab键依次切换到这些占位符，并输入相应的内容。

保存”vue.json”文件后，你就可以在Vue文件中使用你的自定义代码片段了。比如，输入”vtemplate”，然后按Tab键，就会自动生成一个Vue模板。

总而言之，VSCode的Vue高亮主要靠插件，Vetur和Volar都是不错的选择。搭配一个好看的主题和自定义代码片段，你的Vue开发效率就能更上一层楼。