sublime怎么安装Vue插件_Sublime配置Vue语法高亮【插件】

vue syntax highlight是当前sublime text唯一持续维护且兼容st3/st4的.vue文件语法高亮插件，支持template/script/style三块按html/js/css分别着色，并兼容lang=”ts”、scoped、lang=”scss”等特性。

Vue Syntax Highlight 是目前唯一靠谱的高亮方案

sublime text 原生完全不识别 .vue 文件，打开就是纯文本；旧插件 vue-component 已停更多年，装在 ST3/ST4 上直接报 ImportError: No module named 'sublime_plugin'。现在能用、持续维护、无冲突的只有 Vue Syntax Highlight——它不提供 ide 级补全，但能把 <template></template>、<script></script>、<style></style> 三块分别按 HTML/JS/CSS 正确着色，连 lang="ts"、scoped、lang="scss" 都支持。

• 别搜“VueJS”或“vue-component”，这两个不是同一个东西，容易装错
• 安装后不会自动绑定 .vue 后缀，必须手动设置一次，否则右下角永远显示 Plain Text
• 如果已装过其他 Vue 插件（比如旧版 Vuejs），先用 Package Control: Remove Package 卸载干净，再装 Vue Syntax Highlight，否则语法会错乱

安装步骤：三步走，不重启也能生效

前提是已装 Package Control（没装就先按 Ctrl+` 粘贴官方脚本，2026 年推荐用：import urllib.request,os,hashlib; exec(urllib.request.urlopen('https://packagecontrol.io/installation.py').read().decode('utf-8'))）。

• 按 Ctrl+Shift+P（Win/linux）或 Cmd+Shift+P（macos）→ 输入 Package Control: Install Package → 回车
• 等列表加载完，输入 Vue Syntax Highlight（注意大小写，首字母大写，中间有空格）→ 回车安装
• 打开任意一个 .vue 文件，点击右下角当前语法名（如 Plain Text）→ 选 Open all with current extension as… → 找到并点击 Vue Component

这一步会写入用户级配置，之后所有新打开或新建的 .vue 文件都会自动高亮。不需要改配置文件，也不用重启 Sublime。

为什么 script 区域没提示？这不是插件问题

Vue Syntax Highlight 只负责高亮，不提供代码补全。如果你在 <script></script> 里敲 this.$emit 没提示，是正常现象——它压根不干这事。

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

• 要补全，得额外装 Vuejs Complete Package（提供 v-if、props、data 等 snippet 和 Tab 补全）
• 想让 JS 区域更准，建议搭配 JS Custom 或配好 SublimeLinter-eslint + 项目级 .eslintrc.js，否则 this.$refs 这类 Vue 实例属性始终不会出提示
• 别同时开 Babel 和 Vue Syntax Highlight，它们对 <script></script> 的解析逻辑冲突，会导致 JS 高亮错位

ESLint 自动修复怎么接上？关键在 --fix-on-save

光装 SublimeLinter 和 SublimeLinter-eslint 不够，不配置就不会修。核心是告诉 Sublime：保存时调 ESLint 加 --fix-on-save 参数。

• 进 Preferences → Package Settings → SublimeLinter → Settings
• 在右侧用户设置里加这段：

  {   "lint_mode": "background",   "on_save": true,   "linters": {     "eslint": {       "args": ["--fix-on-save", "--ext", ".js,.vue"],       "selector": "source.js, text.html.vue"     }   } }

• 确保项目里有 node_modules/eslint-plugin-vue，且 .eslintrc.js 中 extends 包含 plugin:vue/vue3-recommended（Vue 3）或 plugin:vue/vue2-recommended（Vue 2）

最容易被忽略的是：selector 必须包含 text.html.vue，否则 ESLint 根本不扫描 .vue 文件里的 JS 部分——装了等于没装。