在 VSCode 中需配置 html.customData 指向自定义 JSON 文件，声明 hx-* 属性为全局属性并定义其 valueSet 类型，才能实现语法高亮、悬停提示和精准补全；手动维护该文件以适配 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 元素范围，且类型要标清楚。
示例（仅覆盖最常用场景）：
{
"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">和<button hx-post="/save">都生效） - 每个
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 格式化逻辑，临时禁用看看是否恢复补全
要不要用 htm 或 hyperscript 插件？
不需要。HTMX 本身纯 HTML 驱动，hx-* 属性和 hyperscript 的 _ 属性是两套东西。装 hyperscript 插件只会让 _<code>click 高亮，对 hx-get 完全无用，还可能引发属性名冲突或格式化异常。
真正需要关注的是 HTMX 版本迭代带来的新属性——比如 v2 新增的 hx-retry、hx-timeout，这些得你手动追加到 html-custom-data.json 的 globalAttributes 和 properties 里。没人自动帮你同步，这点容易被忽略。
