Поддержка редакторов

Инструменты для работы с htmx в редакторах: файл web-types для JetBrains, расширение для VS Code и редакторы на основе LSP.

Атрибуты htmx — это обычные атрибуты HTML, поэтому любой редактор может работать со страницей htmx без дополнительной настройки. Инструменты для редакторов добавляют автодополнение атрибутов, документацию при наведении курсора и ссылки на справочные страницы этого сайта.

htmx поставляется с одной официальной интеграцией — для IDE JetBrains. Остальные проекты на этой странице созданы сообществом.

IDE JetBrains

htmx поставляется с файлом web-types. Web-types — это формат метаданных JetBrains для веб-библиотек. Его читают IntelliJ IDEA, WebStorm, PyCharm, PhpStorm и другие IDE на базе IntelliJ.

В файле описаны:

Все атрибуты htmx 4, например hx-get, hx-trigger и hx-config
Атрибуты, добавляемые встроенными расширениями, например hx-sse:connect, hx-ws:send и hx-live
Элемент <hx-partial>

Каждая запись содержит описание и ссылку на справочную страницу, поэтому документация при наведении курсора доступна прямо в IDE.

Установка с помощью npm

Если вы устанавливаете htmx с помощью npm, IDE находит файл автоматически. Пакет htmx.org указывает на него через поле web-types в своем файле package.json:

npm install htmx.org

Если автодополнение не появилось, перезапустите IDE.

Установка без npm

Если вы подключаете htmx через CDN, скачайте файл в свой проект:

curl -O https://four.htmx.org/js/editors/jetbrains/htmx.web-types.json

Затем добавьте поле web-types в собственный файл package.json:

{
  "web-types": "./htmx.web-types.json"
}

Поле также принимает массив путей, поэтому в проекте можно зарегистрировать несколько файлов.

Плагин сообщества

HTMX Support — плагин сообщества для тех же IDE. Последний выпуск вышел в июне 2024 года, поэтому плагин не распознает атрибуты htmx 4. Вместо него используйте файл web-types.

VS Code

Расширение HTMX Toolkit добавляет поддержку htmx в Visual Studio Code:

Автодополнение атрибутов htmx
Документация при наведении курсора со ссылками на этот сайт
Фрагменты кода для часто используемых шаблонов htmx
Поддержка htmx 2.x и 4.x

Чтобы установить расширение, найдите HTMX Toolkit на панели расширений VS Code. Исходный код доступен в репозитории atoolz/htmx-vscode-toolkit.

Редакторы на основе LSP

htmx-lsp — языковой сервер, созданный сообществом. Он обеспечивает автодополнение атрибутов в любом редакторе с клиентом LSP, например Neovim, Helix и Emacs.

В Neovim его можно установить с помощью Mason и настроить через lspconfig:

local lspconfig = require('lspconfig')
lspconfig.htmx.setup{}

В README проекта сказано, что он находится в разработке; последний коммит датирован октябрем 2025 года. Поэтому автодополнение не учитывает изменения после выхода htmx 4. Список изменившихся атрибутов см. в разделе Что нового в htmx 4.

ИИ-помощники для программирования

Пакет npm содержит четыре навыка для ИИ-агентов в каталоге dist/skills/:

Навык	Назначение
`htmx-guidance`	Написание разметки htmx 4, атрибутов, событий и стратегий подмены
`htmx-debugging`	Диагностика запросов, которые не отправляются, и некорректной подмены содержимого
`htmx-extension-authoring`	Написание и отладка расширений htmx 4
`htmx-upgrade-from-htmx2`	Перенос кодовой базы с htmx 2.x на 4.x

Скопируйте файлы в каталог навыков вашего помощника для программирования. Навыки представлены обычными файлами Markdown, поэтому их также можно вставлять в запрос.

Licensed under the Zero-Clause BSD License.
https://four.htmx.org/docs/editor-support/