Sublime Text离线环境下怎么安装Vue代码高亮包

梦伟姑娘_8533

发布时间：2026-10-20 10:09:14

364人浏览过

来源于php中文网

原创

离线安装 Vue Syntax Highlight 插件需手动拷贝 GitHub 最新版源码至 Packages 目录并重命名为“Vue Syntax Highlight”，再手动绑定 .vue 后缀为 Vue Component；若需 Vue3 嵌套高亮，还需离线部署 TypeScript/SCSS 等子语言插件并正确配置 enable_ts_in_script 等选项。

sublime text离线环境下怎么安装vue代码高亮包

离线安装 Vue Syntax Highlight 插件必须手动拷贝文件夹

Sublime Text 离线环境下无法用 Package Control 安装插件，唯一可行方式是手动将 Vue Syntax Highlight 插件源码放入 Packages 目录。注意：必须用 GitHub 上最新版（2026 年仍在维护），不能用已停更的 vue-component 或 VueJS —— 后者在 ST4 下会直接报 ImportError: No module named 'sublime_plugin'。

操作步骤：

在有网络的机器上访问 https://github.com/vuejs/vue-syntax-highlight，点击绿色 Code 按钮 → Download ZIP
解压后得到 vue-syntax-highlight-master/ 文件夹，重命名为 Vue Syntax Highlight（大小写、空格、复数 s 缺一不可）
打开 Sublime → Preferences → Browse Packages…，把重命名后的文件夹整个拖入该目录
重启 Sublime，按 Ctrl+` 查看控制台是否报错；若无报错且出现 reloading plugin Vue Syntax Highlight.vue 行，则加载成功

手动绑定 .vue 后缀为 Vue Component 是离线生效的关键一步

插件只提供语法定义文件 Packages/Vue Syntax Highlight/Vue.sublime-syntax，不会自动关联 .vue 后缀。离线环境跳过这步，所有 .vue 文件右下角永远显示 Plain Text，和插件是否装对无关。

绑定方法（无需联网）：

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

vue-composition-api-best-practices

Vue 3 组合式 API 与最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

打开任意一个 .vue 文件
点击右下角当前语法名（如 Plain Text）
选择 Open all with current extension as… → 找到并点击 Vue Component（不是 Vue、不是 HTML、也不是 Vue Template）
成功后，Sublime 会在 Preferences → Settings – User 中自动生成一行："syntaxes": {"vue": "Packages/Vue Syntax Highlight/Vue.sublime-syntax"}

Vue3 嵌套高亮（`<script setup lang="ts">`）需要额外配子语言插件

离线状态下，<script setup lang="ts"> 区块显示灰色，不是 Vue 插件问题，而是 Sublime 没法把 JS/TS/CSS 交给对应语言插件渲染——它依赖“嵌入语法”机制，而该机制需子语言插件存在且启用。

你必须提前在另一台联网机器上下载并离线部署这些依赖：

TypeScript 支持：下载 https://github.com/Microsoft/TypeScript-Sublime-Plugin 或 JavaScriptNext - ES6 Syntax（后者更轻量）
SCSS/Less 支持：下载 https://github.com/danro/LESS-sublime 或 SCSS（作者 css415）
全部解压后，按相同方式放入 Packages 目录，文件夹名须与插件要求一致（如 TypeScript 或 JavaScriptNext）
再进 Preferences → Package Settings → Vue Syntax Highlight → Settings – User，确保有：
```
{
  "vue_version": "3",
  "enable_vue_blocks": true,
  "enable_ts_in_script": true,
  "enable_css_in_style": true
}
```
注意：enable_ts_in_script 不是 enable_js_in_script，拼错会导致 TS 区块不生效。

离线验证时别信右下角显示，要看实际区块着色效果

右下角显示 Vue Component 只代表语法被选中，不代表嵌套内容能正确高亮。最可靠的验证方式是：
- 新建一个 test.vue，写入含 <template>、<script setup lang="ts">、<style scoped lang="scss"> 的完整结构
- 观察 <template> 是否有 HTML 高亮（如 div 蓝色、属性红色）
- 观察 <script> 内是否出现 TS 关键字（如 const、ref）颜色，而非全灰或白底黑字
- 临时把文件后缀改成 .ts：如果此时 <script> 区恢复高亮，说明 Vue 层解析失败，重点查 vue_version 和 enable_ts_in_script 配置
离线部署最容易忽略的是子语言插件缺失和配置项拼写错误，这两点不解决，<script setup> 永远是灰色。