Sublime Text原生不支持Alpine.js指令高亮，因其未定义x-data、@click等scope；推荐安装Vue Syntax Highlight插件并绑定.html文件为Vue语法，或手动创建自定义HTML (Alpine).sublime-syntax语法文件。

Alpine.js 属性为什么在 Sublime 里不高亮

Sublime Text 原生不识别 x-data、@click、x-show 这类 Alpine 指令——它把它们当普通 HTML 属性，用灰色显示，没有语法区分。这不是插件没装，而是默认的 HTML 或 Vue 语法包根本没定义这些 scope。

直接复用 Vue 语法包是最省事的方案

Alpine 的模板语法和 Vue 高度兼容（都是双大括号、x-/@ 前缀），而 Vue Syntax Highlight 插件已内置对 x- 和 @ 属性的 scope 定义，开箱即用。

• 用 Package Control: Install Package 装 Vue Syntax Highlight（别选 VueJS Complete，它不改语法高亮）
• 打开一个含 Alpine 的 .html 文件，右下角点击当前语法 → Open all with current extension as… → 选 Vue
• 确认生效：把光标停在 x-show 上，按 Ctrl+Shift+P → 输入 Support Info → 看输出里是否含 source.vue 或 text.html.vue

不想装 Vue 插件？手动扩展 HTML 语法

如果你坚持用原生 HTML 语法，可以给它“打补丁”：在用户语法配置里加 Alpine 指令的 scope 规则。但注意，这不是改设置文件，而是新建一个自定义语法定义。

Json Repair Kit

使用 Node.js 评估修复格式错误的 JSON，自动纠正尾随逗号、单引号、未加引号的键等常见问题，实现文件规范化。

下载

• 菜单栏 → Tools → Developer → New Syntax…
• 粘贴基础 HTML 语法内容（可从 Packages/HTML/HTML.sublime-syntax 复制），然后在 contexts: 下追加：

  alpine-directives:
    - match: '\b(x-|@)[a-zA-Z0-9\-]+'
      scope: entity.other.attribute-name.alpine.html

• 保存为 Packages/User/HTML (Alpine).sublime-syntax，再通过 View → Syntax → Open all with current extension as… 绑定到 .html
• 缺点：每次 Sublime 升级，这个文件不会自动更新 HTML 主语法的新特性

为什么 ApplySyntax 或文件后缀绑定不管用

ApplySyntax 只能决定“用哪种语法”，不能改变语法内部的高亮逻辑；后缀绑定（如把 .alpine.html 绑到 HTML）也一样——它只是让文件被当成 HTML 解析，但 HTML 语法本身仍不认识 x-cloak。

• 常见错觉：改了 Preferences.sublime-settings 里的 syntaxes 字段，以为能加 Alpine 支持 → 实际上该字段只控制后缀映射，不改语法定义
• 更隐蔽的坑：如果之前手动点过右下角选了 “HTML (Rails)” 或 “HTML (Django)”，Sublime 会锁定该选择，后续所有配置都不生效，必须先点右下角切回 “HTML”，再重新绑定
• 验证是否真生效：写一行
  ，鼠标悬停在 @click 上，看状态栏是否显示 entity.other.attribute-name.alpine.html —— 这才是关键信号