Vue Syntax Highlight是唯一稳定支持Vue3全特性(含
按
(Win/Linux)或
(macOS),输入
,回车
等列表加载完,**严格输入
(首字母大写,中间有空格,带 s 和 H)** —— 不是
、
、
安装后必须重启 Sublime Text(2026 年最新版仍需重启才能加载
文件)
重启后打开一个 `.vue` 文件,右下角应显示
→ 点击它 → 选
→ 找到并点击
配置
为 3,否则 `
Sublime Text 4 默认启用新语法引擎,但旧版 Vue Syntax Highlight 仍用
,会导致
、
括号配对错乱、参数部分不着色。
进
在右侧用户设置中确认有:
(默认可能是
)
若仍无效,临时验证:把文件后缀改成
,看
区块是否恢复高亮——能恢复说明是 Vue 语法层解析失败,不是 Sublime 整体崩溃
或
不高亮?缺底层语言支持
Vue Syntax Highlight 只负责切分区块,不提供 JS/TS/CSS/SCSS 的具体语法渲染。`lang="scss"` 区域空白,大概率是因为没装 SCSS 插件;`lang="ts"` 灰色,往往因为没开 TS 嵌入或没装 TypeScript 插件。
Vue-router参考手册
Vue-router参考手册下载
下载
立即学习
“
前端免费学习笔记(深入)
”;
装
插件(Package Control 搜
,作者是
);装完打开任意
文件,确认右下角显示
,再回看 `.vue` 中的
就好了
若用 TypeScript,进
,加一行:
同时确保已安装
插件(官方维护)或
(兼容性更广)
别手动改
文件——它自带嵌入声明,改错会导致整个语法崩溃
为什么 `
` 里 Emmet 不生效?要显式告诉它作用域
Emmet 默认只在原生
、
语法下激活,不会自动继承 `.vue` 的上下文。所以 `div.my-class+Tab` 没反应,不是 Emmet 没装,是它没被“授权”在 Vue 模板里工作。
确保已安装 Emmet(Package Control 搜
)
进
,添加:
保存后重启 Sublime,`
` 内即可正常使用 Emmet 缩写
注意:这个配置只影响 Emmet,不影响语法高亮本身
真正容易被忽略的是嵌入语法的依赖链:
→ 启用
→ 要求
插件已加载 → 要求
文件本身能正确高亮。少一环,
就只是个带颜色的文本框。
Ctrl+Shift+PCmd+Shift+PPackage Control: Install PackageVue Syntax HighlightVuejsVue Syntax Highlightervue-component.sublime-syntaxPlain TextOpen all with current extension as…Vue Componentvue_version.tmLanguagedefineProps()withDefaults()Preferences → Package Settings → Vue Syntax Highlight → Settings"vue_version": "3""2".jsSCSSSCSScss415.scssSCSSPreferences → Package Settings → Vue Syntax Highlight → Settings"enable_ts_in_script": trueTypeScriptJavaScriptNext - ES6 SyntaxVue.sublime-syntaxHTMLXMLEmmetPreferences → Settings – User"emmet_syntax_scopes": { "vue": "html" }Vue Syntax Highlightenable_ts_in_scriptTypeScript.ts