Sublime怎么配置Vue语法高亮_Sublime安装Vue插件支持Vue3方法-sublime-PHP中文网

vue syntax highlight是唯一稳定支持vue3全特性（含、lang="ts"、scoped、lang="scss"）的sublime语法高亮方案，需严格按名安装、重启并配置vue_version为3，否则.vue文件将无法正确高亮。

sublime怎么配置vue语法高亮_sublime安装vue插件支持vue3方法

Vue Syntax Highlight 是唯一能稳定支持 Vue 3（含 <script setup></script>、lang="ts"、scoped、lang="scss"）的语法高亮方案；不装它，或装错名字，.vue 文件永远是白底黑字。

装 Vue Syntax Highlight 插件，别搜“VueJS”或“vue-component”

Sublime 原生完全不认识 `.vue` 文件，这不是你漏步骤，是它压根没语法定义。装错插件名会导致：报 ImportError: No module named 'sublime_plugin'、右下角不出现 Vue Component 选项、`<script setup>` 始终灰色。</script>

按 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，否则 `<script setup>` 高亮断裂</script>

Sublime Text 4 默认启用新语法引擎，但旧版 Vue Syntax Highlight 仍用 .tmLanguage，会导致 defineProps()、withDefaults() 括号配对错乱、参数部分不着色。

Vue-router参考手册

Vue-router参考手册下载

下载

进 Preferences → Package Settings → Vue Syntax Highlight → Settings
在右侧用户设置中确认有："vue_version": "3"（默认可能是 "2"）
若仍无效，临时验证：把文件后缀改成 .js，看 <script></script> 区块是否恢复高亮——能恢复说明是 Vue 语法层解析失败，不是 Sublime 整体崩溃

`<style lang="scss"></style>` 或 `<script lang="ts"></script>` 不高亮？缺底层语言支持

Vue Syntax Highlight 只负责切分区块，不提供 JS/TS/CSS/SCSS 的具体语法渲染。`lang="scss"` 区域空白，大概率是因为没装 SCSS 插件；`lang="ts"` 灰色，往往因为没开 TS 嵌入或没装 TypeScript 插件。

装 SCSS 插件（Package Control 搜 SCSS，作者是 css415）；装完打开任意 .scss 文件，确认右下角显示 SCSS，再回看 `.vue` 中的 <style lang="scss"></style> 就好了
若用 TypeScript，进 Preferences → Package Settings → Vue Syntax Highlight → Settings，加一行："enable_ts_in_script": true
同时确保已安装 TypeScript 插件（官方维护）或 JavaScriptNext - ES6 Syntax（兼容性更广）
别手动改 Vue.sublime-syntax 文件——它自带嵌入声明，改错会导致整个语法崩溃

为什么 `

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 文件本身能正确高亮。少一环，<script setup lang="ts"></script> 就只是个带颜色的文本框。