首先安装Package Control，再通过命令面板安装vue Syntax Highlight插件，接着将.vue文件关联为Vue Component语法类型，最后可选配Babel、Emmet等插件增强功能，完成sublime Text对Vue文件的语法高亮支持。

要让sublime text支持Vue语法高亮，你需要安装合适的插件来识别.vue文件中的模板、脚本和样式部分。Vue单文件组件（SFC）包含<template>、<script>和<style>标签，原生Sublime无法正确解析，需通过插件实现高亮。

1. 安装Package Control（如未安装）

Package Control是Sublime的插件管理工具，绝大多数插件都通过它安装。

按下 Ctrl+` 打开控制台，粘贴以下代码并回车：

import urllib.request,os,hashlib; exec(urllib.request.urlopen(‘https://packagecontrol.io/installation’).read().decode(‘utf-8’))

安装完成后重启Sublime。

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

2. 安装Vue Syntax Highlight插件

推荐使用Vue Syntax Highlight，它专为Vue文件设计，支持html、javaScript（es6）、typescript、Scss、Pug等语法嵌套高亮。

安装步骤：

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

31

查看详情

• 按下 Ctrl+Shift+P 打开命令面板
• 输入 Install Package 并选择
• 搜索 Vue Syntax Highlight
• 点击安装

3. 设置.vue文件关联语法

安装完成后，打开一个.vue文件，点击右下角显示的语法类型（可能是“Plain Text”或“HTML”）。

在弹出菜单中选择：
Open all with current extension as… → Vue Component (Vue)

此后所有.vue文件都会自动使用Vue语法高亮。

4. 可选：配置额外功能增强体验

如果你希望获得更好的开发体验，可搭配以下插件：

• Babel：提供ES6/jsX语法支持（注意可能与Vue插件冲突，建议只启用必要功能）
• Emmet：在<template>中使用Emmet缩写快速生成HTML
• ColorHelper：CSS颜色值实时预览

基本上就这些。配置完成后，你的Sublime就能正确高亮Vue文件中的HTML、javascript和CSS代码块，提升编码效率。不复杂但容易忽略的是文件类型的关联步骤，记得手动设置一次即可永久生效。