VSCode怎么配置HTMX前端开发语法支持_VSCode如何安装HTMX插件获得属性自动补全和语法高亮【指南】-VSCode-PHP中文网

在 vscode 中需配置 html.customdata 指向自定义 json 文件，声明 hx-* 属性为全局属性并定义其 valueset 类型，才能实现语法高亮、悬停提示和精准补全；手动维护该文件以适配 htmx 版本更新。

vscode怎么配置htmx前端开发语法支持_vscode如何安装htmx插件获得属性自动补全和语法高亮【指南】

HTMX 属性在 VSCode 里不被识别，怎么让 `hx-get`、`hx-trigger` 这些高亮并补全？

VSCode 默认不认 HTMX 自定义属性，它们会被当成普通 HTML 属性，没有语法高亮、没有悬停提示、补全也只靠 HTML 全局属性兜底——所以 hx-swap-oob 这种拼写错误根本不会报错。

核心解法是告诉 VSCode：这些是合法的 HTML 属性。不是装“HTMX 插件”，而是配置 HTML 语言服务本身。

别搜 “HTMX extension” —— 目前（2024）没有成熟、持续维护的专用插件，所谓“HTMX 插件”多数只是加了个语法高亮配色，不解决属性补全
打开 VSCode 设置（Cmd+, 或 Ctrl+,），搜 html.suggest.html5，确保它是 true（默认开启）

关键一步：在工作区根目录加 .vscode/settings.json，写入：

{
  "html.suggest.html5": true,
  "html.customData": ["./html-custom-data.json"]
}

html-custom-data.json 文件需手动创建，内容是 HTMX 属性定义（见下一条）

怎么写 `html-custom-data.json` 让 `hx-*` 属性真正可补全？

这个 JSON 文件不是随便列几个属性就行，它得符合 VSCode 的 custom data 规范，否则补全无效。重点在于：必须声明属性所属的 HTML 元素范围，且类型要标清楚。

示例（仅覆盖最常用场景）：

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

{
  "version": "1.1.0",
  "tags": [],
  "properties": [
    {
      "name": "hx-get",
      "description": "Issue a GET request",
      "valueSet": "uri"
    },
    {
      "name": "hx-post",
      "description": "Issue a POST request",
      "valueSet": "uri"
    },
    {
      "name": "hx-trigger",
      "description": "Specify the event that triggers the request",
      "valueSet": "string"
    },
    {
      "name": "hx-swap",
      "description": "How the response will be swapped in",
      "valueSet": ["innerHTML", "outerHTML", "beforeend", "afterend", "beforebegin", "afterbegin", "delete", "none"]
    }
  ],
  "globalAttributes": ["hx-get", "hx-post", "hx-put", "hx-patch", "hx-delete", "hx-trigger", "hx-target", "hx-swap", "hx-select", "hx-select-oob", "hx-swap-oob", "hx-push-url", "hx-history", "hx-history-elt", "hx-boost", "hx-indicator", "hx-disable", "hx-disabled-elt", "hx-include", "hx-params", "hx-preserve", "hx-replace-url", "hx-request", "hx-sync", "hx-validate", "hx-vals", "hx-confirm"]
}

globalAttributes 列表决定哪些元素能用这些属性（比如 <div hx-get="/api"> 和 <code><button hx-post="/save"></button> 都生效）
每个 property 的 valueSet 影响补全行为："uri" 触发路径/URL 补全，"string" 不补全，枚举数组则给出下拉选项
漏掉 hx-swap-oob 或拼错成 hx-swap-oob="true"（实际只接受 true、outerHTML 等值）会导致补全失效

为什么改了设置还是没补全？常见断点排查

配置写对了，但补全不弹出，大概率卡在语言模式或缓存上。

确认当前文件是 HTML 模式：右下角状态栏看是否显示 HTML，不是 Plain Text 或 Auto；如果不是，点击切换，或按 Cmd+K M 手动设为 HTML
VSCode 有时会缓存 custom data，改完 html-custom-data.json 后，重启 VSCode 或执行命令面板（Cmd+Shift+P）→ Developer: Reload Window
检查 settings.json 里的 html.customData 路径是否正确：./html-custom-data.json 是相对工作区根目录，不是相对于 .vscode 文件夹
如果用了 Prettier 或 ESLint 插件，它们可能干扰 HTML 格式化逻辑，临时禁用看看是否恢复补全