VSCode IntelliSense for MODX: форматирование, диагностика и новая подсветка

Привет форум!

С момента анонса расширения для VSCode прошло немало времени. Всё это время оно просто работало, но почти не развивалось. Недавно я наконец-то до него добрался, а заодно и до двух пакетов с грамматиками, на которых держится вся подсветка: modx-tmlanguage и fenom-tmlanguage. В итоге у расширения вышло четыре релиза подряд (с 1.1.0 по 1.3.1), а у обеих грамматик — мажорные версии. Ниже рассказываю, что изменилось.

Форматирование шаблонов

Теперь для MODX и Fenom работают Format Document и Format Selection. Форматтер трогает только отступы в начале строк, больше ничего. Комментарии, {ignore}, а также <pre>, <textarea>, <script> и <style> он не трогает совсем.

Отдельно пришлось повозиться с HTML-тегами, у которых атрибуты разнесены на несколько строк. С Tailwind это обычное дело. Из-за такого тега форматтер сдвигал всё, что шло после него, на уровень влево, и к концу файла {/block} оказывался на четырёх табах. Теперь строки с атрибутами получают дополнительный отступ, а закрывающая > на отдельной строке возвращается на уровень своего тега.

Проблемы в шаблоне

Это, пожалуй, самое полезное в обновлении. Расширение показывает структурные ошибки на панели Problems:

• незакрытые [[, [[-, {, {*, {ignore} и забытый обратный апостроф;
• блочные теги Fenom без пары;
• закрывающий тег, который закрывает не тот блок;
• {else} или {case} вне своего блока.

При этом {set $x = 1} и {var $x = 1} расширение блоками не считает, потому что это инструкции.

Сколько показывать, решает настройка vscode-modx.diagnostics:

• off — ничего;
• unclosed — только незакрытые конструкции (по умолчанию);
• all — ещё и HTML-элементы без пары.

Почему all не включён по умолчанию? Потому что в MODX чанк легко может открыть <div>, который закроет другой чанк. Для целой страницы это ошибка, а для чанка — нормальная практика.

Новые подсказки

fastField и pdoParser

После # появились подсказки для полей ресурса, TV и свойств, а также для суперглобальных массивов:

[[#15.pagetitle]]
[[#15.tv.name]]
[[#15.properties.key]]
[[!#GET.key]]

Кроме GET доступны POST, REQUEST, SERVER, FILES, COOKIE и SESSION.

Имена блоков в Fenom

Расширение собирает имена из {block '…'} в текущем файле и в шаблонах, подключённых через {extends} и {use}. Подсказывает их внутри {paste '…'}, {block '…'} и {$.block.…}. Больше не нужно открывать родительский шаблон, чтобы вспомнить, как там назван блок.

Исправления в подсказках

• {continue} подсказывается внутри {foreach}.
• {block} подсказывается и без {extends}, ведь родительским шаблонам он тоже нужен.
• Параметры сниппета подсказываются внутри $_modx->runSnippet().
• Автокомплит @FILE работает от корня проекта, так что vscode-modx.elementsPath может быть /,. или пустым.
• Если на одной строке два тега [[a]] … [[b]], текст между ними больше не считается внутренностью одного большого тега.
• После лишнего закрывающего тега Fenom расширение не теряется и дальше по файлу подсказывает {else} и {continue}.
• У FormIt параметр redirectTo больше не выводится дважды.

Отступы при наборе

У MODX правило отступов было написано так, что при наборе расширение сдвигало влево любую строку с ]]. В шаблоне, где через строчку стоит [[*pagetitle]], текст потихоньку уползал влево. Уверен, многие это замечали, но не понимали, что происходит. Теперь многострочный вызов сниппета получает отступ, однострочный тег строку не двигает, [[- … ]] считается комментарием, а ]] внутри значения в обратных апострофах ничего не закрывает.

У Fenom была обратная проблема: цепочка {if} / {elseif} / {else} / {/if} с каждой веткой уезжала на уровень вправо. Список блочных тегов я взял из исходника Fenom (Fenom::$_actions), а не из документации, поэтому теперь учтены все: if, foreach, for, while, switch, block, filter, macro, autoescape, escape, strip, ignore, var, set, add.

Работает в браузере

Расширение теперь запускается в github.dev, vscode.dev и других виртуальных рабочих пространствах. Нажимаете. в репозитории на GitHub, и подсветка с подсказками уже на месте.

Расширение больше не забирает .html

Раньше расширение присваивало себе файлы .html, и из-за этого у многих пропадали Emmet, Open with Live Server и всё остальное, что завязано на HTML. Теперь .html снова остаётся за HTML. Если вы храните шаблоны в .html, укажите это явно в настройках:

"files.associations": {
    "*.html": "fenom"
}

Похудело в 4 раза

Я избавился от lodash и json5, собрал расширение в бандл и пережал скриншоты. Размер пакета уменьшился с 4.77 МБ до 1.28 МБ.

Подсветка синтаксиса

Теперь о грамматиках. Если кто не знал, подсветка MODX и Fenom живёт в двух отдельных npm-пакетах, и использовать их можно не только в VSCode, но и везде, где понимают TextMate-грамматики. Например, именно через них подсвечиваются примеры кода на docs.modx.pro. Документация уже переехала на новые версии пакетов, так что все исправления ниже можно увидеть там прямо сейчас. Раньше расширение хранило свои копии, а теперь берёт грамматики прямо из пакетов. Исправление в грамматике попадает в расширение простым обновлением версии.

Новые имена пакетов

Оба пакета переехали под scope @gulomov. Старые имена помечены устаревшими и обновляться больше не будут:

npm uninstall modx-tmlanguage fenom-tmlanguage
npm install @gulomov/modx-tmlanguage @gulomov/fenom-tmlanguage

modx-tmlanguage 2.1.0

• У каждого типа элемента теперь свой scope. Раньше сниппеты, чанки, поля ресурса, плейсхолдеры, системные настройки, ссылки и лексиконы подсвечивались одинаково. Теперь в теме можно раскрасить [[*pagetitle]] и [[pdoResources]] по-разному. Имейте в виду, что у кого-то из-за этого поменяются цвета.
• Модификаторы получили нормальный scope. Раньше у них было имя, которое не узнавала ни одна тема, поэтому они вообще не подсвечивались.
• Цифры в обычной разметке больше не подсвечиваются. <div class=«col-6» data-id=«42»> раскрашивал и 6, и 42.
• Незакрытый тег, комментарий или забытый обратный апостроф больше не красят весь файл до конца, подсветка останавливается на пустой строке.
• Голая [[ внутри строки в JavaScript или CSS больше не открывает тег.
• Распознаются [[*#fieldname]], & перед именем параметра и двойной обратный апостроф как экранирование.
• [[ автоматически закрывается на ]], а команда комментирования ставит [[- … ]].

fenom-tmlanguage 2.1.2

• Числа во всех записях, которые понимает Fenom: десятичные, шестнадцатеричные, двоичные, восьмеричные и с плавающей точкой.
• Теги while, do, escape и strip.
• Недостающие операторы: ?:, !:, is, is not, in, not in, ~~, <> и другие. Раньше === подсвечивался как три отдельных =.
• Интерполяция "{$user.name|up}" работает только в двойных кавычках, как и в самом Fenom.
• {ignore} и опция :ignore ({if:ignore $cdn}) отключают подсветку Fenom внутри, но оставляют подсветку CSS и JavaScript.
• Убраны разделители {% %} и {{* *}}, которых в Fenom никогда не было.

И отдельно про самый неприятный баг. Внутри <style> грамматика Fenom забирала фигурную скобку у CSS, после чего CSS-грамматика не находила </style> и считала CSS весь документ до конца, включая <script>.

Релизы теперь публикуются из GitHub Actions с npm provenance. На странице пакета видно, из какого репозитория и коммита он собран.

Заключение

Расширение стало заметно стабильнее, а подсветка — точнее. Если что-то подсвечивается не так или форматтер ведёт себя странно, пишите в комментариях или создавайте issue на GitHub.

Спасибо всем за внимание и мира над головой.

Страница расширения на Marketplace

Репозиторий расширения на GitHub

@gulomov/modx-tmlanguage на npm

@gulomov/fenom-tmlanguage на npm