跳转到主内容
websoft网络软件专家 - 深耕网络技术,打造实用软件!

Sublime怎么配置Vue语法高亮_Sublime安装Vue插件支持Vue3方法

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