Sublime Text需安装Vue Syntax Highlight插件并手动绑定.vue语法,配置enable_vue_blocks等选项启用区块内高亮,设默认编码为UTF-8,为Emmet添加vue语法作用域,最后重启编辑器。

Vue单文件组件(.vue)不识别语法怎么办
Sublime Text 默认不支持 .vue 文件的语法高亮,打开后全是纯文本。这不是插件没装对,而是 Sublime 没把 .vue 后缀和 Vue 语法关联起来。
解决方法分两步:先装插件,再手动设置语法绑定。
- 推荐安装
Vue Syntax Highlight(比老牌的Vuejs插件更轻量、更新勤、无 Python 依赖) - 通过
Package Control → Install Package → Vue Syntax Highlight安装 - 安装后不会自动生效——右键编辑区 →
Set Syntax → Vue Syntax Highlight → Vue - 为避免每次手动设置,可点击
View → Syntax → Open all with current extension as... → Vue,这样所有.vue文件都会默认用该语法
template/script/style 块内语法高亮失效
即使绑定了 .vue 文件,也常出现 里没 JS 高亮、 里没 HTML 高亮的情况。这是因为 Vue 语法包本身不嵌套解析子语言,需额外配置作用域。
打开 Preferences → Package Settings → Vue Syntax Highlight → Settings,在用户配置中加入:
立即学习“前端免费学习笔记(深入)”;
{
"enable_vue_blocks": true,
"enable_html_in_template": true,
"enable_js_in_script": true,
"enable_css_in_style": true
}
注意:enable_vue_blocks 是开关,必须设为 true;其余三项控制各区块是否启用对应语言高亮。若你用 TypeScript,把 enable_js_in_script 改成 enable_ts_in_script 并确保已装 JavaScriptNext - ES6 Syntax 或 TypeScript 插件。
中文注释乱码或标点显示异常
部分老版本 Sublime(尤其是 Windows 下未改编码的)读取 .vue 文件时会误判为 GBK,导致中文注释变方块或标点错位。这不是 Vue 插件的问题,是文件编码没统一。
- 打开文件后,右下角查看当前编码(如显示
UTF-8或Western (Windows 1252)) - 若非
UTF-8,点击右下角编码名 →Reopen with Encoding → UTF-8 - 之后保存前务必确认右下角是
UTF-8,再按Ctrl+S,否则下次打开仍可能回退 - 一劳永逸:进
Preferences → Settings,在右侧用户设置加一行:"default_encoding": "UTF-8"
Emmet 在 中不工作
Emmet 默认只在 HTML、JSX 等语法下激活, 块虽是 HTML 结构,但 Sublime 不会自动继承父语法上下文。需要显式告诉 Emmet:这里支持 HTML 缩写。
打开 Preferences → Package Settings → Emmet → Settings,在用户配置中添加:
{
"syntax_scopes": {
"vue": ["text.html.vue", "source.vue"]
}
}
其中 text.html.vue 是 Vue Syntax Highlight 插件为 块定义的作用域名(可通过 Tools → Developer → Show Scope Name 在模板内光标处验证)。如果换用其他 Vue 插件,作用域名可能不同,得对应调整。
别漏掉重启 Sublime——有些插件配置变更需完全重启才生效,热重载不一定管用。










