Встречайте VSCode IntelliSense for MODX

Представляю вашему вниманию расширение для VSCode, которое обеспечивает широкий спектр инструментов для работы с MODX и Fenom. Этот плагин значительно упрощает процесс разработки ваших проектов, делая его более эффективным и удобным.

Установить бесплатно.

Возможности

Возможности расширения можно поделить на 3 категории:

MODX парсер
Шаблонизатор Fenom
Подсказки с путями

MODX парсер

Ниже приведен список возможностей связанных с родным парсером MODX.

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

Да, я сначала реализовал подсветку синтаксиса MODX в нашей новой документации, когда её нет даже в официальной. Теперь, я сделал тоже самое в самом популярном IDE VSCode, пока MODX LLC чем-то занят.

MODX: Автокомплит полей ресурса

MODX: Автокомплит системных настроек

MODX: Автокомплит phx фильтров (модификаторов)

Автокомплит учитывает наличие у модификатора аргументов или входных параметров.

MODX: Автокомплит сниппетов и их параметров

ВАЖНО! Расширение не требует подключения локального сервера с запущенным MODX и мало того, оно не умеет. Поэтому автокомплит сниппетов и их параметров реализован через предустановленный список:

Сниппеты pdoTools
Сниппеты miniShop2
FetchIt
и сниппеты FormIt

Расширение учитывает уже введенные параметры и исключает их из автокомплита.

Кстати, а вы знаете почему в этом списке есть FetchIt? Да потому, что это единственная замена AjaxForm, который я напоминаю, больше не поддерживается.

Fenom

Далее будут возможности связанные с шаблонизатором Fenom.

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

В своё время и для меня было удивлением отсутствие поддержки синтаксиса шаблонизатора Fenom в VSCode и я также как и многие пользовался расширением Smarty, т.к. они слегка похожи. Но теперь всё будет по другому.

Fenom: Автокомплит тэгов

Прошу обратить внимание, это не набор простых сниппетов VSCode (Да, в VSCode есть сущность называемая сниппетом и он не имеет ничего общего со сниппетами MODX), а полноценный автокомплит тегов. Который учитывает многое, относительно позиции курсора.

Fenom: Автокомплит модификаторов

Fenom: Автокомплит переменных

Fenom: Автокомплит сниппетов и их параметров

Расширение умеет подсказывать и вызовы через модификатор {'Название сниппета' | snippet} и через метод {$_modx->runSnippet('Название сниппета')}

Подсказки путей

Расширение умеет подсказывать пути @FILE биндингов и директив file: в fenom, а также реализовано быстрое открытие файла по нажатии Ctrl + Click. Для работы данного функционала вам необходимо установить путь до папки с шаблонами от корня рабочего пространства или открытой папки в качестве значения настройки vscode-modx.elementsPath (по аналогии с настройкой pdoTools), по умолчанию: /core/elements/.

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

Страница расширения на Marketplace
Репозиторий на GitHub
☕ Угостить чашкой кофе

Баха Волков

13 ноября 2023, 08:16

4 328

Комментарии: 39

Николай Савин

13 ноября 2023, 09:10

Со стороны представителя сообщества хочу сказать огромное спасибо тебе Баха. Ты большой молодец. На полном энтузиазме, не прося ничего в замен, не хвастаясь (ну ладно чуть чуть среди своих) — проделал огромную работу. Кто не в курсе Баха занимался этим наверное полгода, периодически показывая нам в закрытой группе небольшие кусочки проделанной работы.

Друзья, вот именно на такие заметные проекты, ускоряющие вашу собственную работу и идут донаты.
Мы от коллектива поощряем нашего друга на сумму 20 000 рублей. Но хотелось бы выделить больше.
Потому в очередной раз призываю вас всех поддержать копеечкой сообщество или лично Баху для дальнейшего развития.
Все реквизиты сообщества можно посмотреть здесь

Баха Волков

13 ноября 2023, 09:49

Спасибо товарищ за теплые слова, они зачастую бывают важнее всего остального

Александр Мельник

13 ноября 2023, 09:15

нет слов, вы большой молодец.

Arahort

13 ноября 2023, 10:59

Респект, хоть и пользуюсь phpStorm)

Алексей

13 ноября 2023, 11:42

Добрый день!
Спасибо за проделанную работу! Очень нужное дополнение. Донат отправил.

Баха Волков

13 ноября 2023, 12:45

Спасибо!

Алексей

13 ноября 2023, 13:02

Баха, а подскажите пожалуйста, как сделать синтаксис как у вас на фото. Не выходит.
Прописал вот так:

"files.associations": {
      "*.tpl": "html | modx | fenom"
    }

Работает либо одно, либо другое.

Баха Волков

13 ноября 2023, 13:26

Указывать нужно либо modx, либо fenom

Алексей

13 ноября 2023, 13:29

Разобрался. Спасибо!

Дмитрий

13 ноября 2023, 13:39

Просто лучший

Дима Касаткин

13 ноября 2023, 16:48

Впечатляющая работа! Было бы здорово такое же, для PhpStorm / WebStorm, но ради такого возможно стоит дать VSCode второй шанс. Теперь есть причина, по которой VSCode может оказаться удобнее PhpStorm для разработки под MODX, и это прекрасно!

Вообще Developer experience (DX) в MODX и раньше был очень неплохим. Кто касается других систем, очень меня сейчас поймут. Один только Ace, который поддерживает @Иван Бочкарев чего стоит. Если править что-то быстро из админки, и связка modDevTools + Ace = просто класс!

А если и если основную разработку чаще ведут в файлах, под git-ом, и тут уже связка StaticElementsLive и новый VSCode IntelliSense for MODX будет отличным решением!

А для тех, кто собирает пакеты (modx packages), и особенно если их часто обновляет, поддерживая более одного modx-пакета постоянно, также может пригодиться git-модуль с GUI: modx-build-environment-gui

Вообще, с выходом этого плагина для весь DX при работе с файлами в MODX переходит на другой уровень, на голову выше! Больше cпасибо @Баха Волков !

Дима Касаткин

13 ноября 2023, 16:55

Пользуясь случаем, если у кого есть под рукой, кроме супер плагина из топика, какие ещё плагины надо поставить в VSC для удобной работы с MODX.

Необходимый минимум функций вот такой:
• Автозагрузки на сервер (SFTP) по CTRL+S (желательно без хранения учетных данных от удаленного сервера в JSON-файле рядом с исходниками)
• Перехода к объявлению JS/PHP-функций по CTRL+click
• Сборки CSS из LESS/SCSS исходников, но без бандлеров (как file watchers в phpstorm) и мудреных JSON-конфигов.

Просто года два назад такой простой набор не получилось собрать для VSCode и мне пришлось его опустить. Но я вижу, что всё меняется, и с тех пор VSC стал настолько лучше, что я рискнул заменить им (и пока не пожалел) notepad++ для открытия одиночных файлов (которые вне проектов), которым пользовался много лет (правда зарешал дизайн, а не функционал, но всё таки). Но как проектным редактором, мне осадочек от предыдущего подхода пока не наёт пользоваться.

Посоветуйте джентельменский набор модыксера (или модэксера?) для VSC плиз!

Алексей Соин

13 ноября 2023, 22:20

Чтобы редактировать файлы на удалённом сервере не нужно придумывать синхронизацию по сохранению, в vscode есть официальное расширение Remote-SSH. Прочитать как всё настроить можно тут. На сервере нужен только nodejs, например, у хостинга бегет можно без проблем так править файлы на сервере, у них в доке есть инструкция по настройке.

Также насчёт настройки проекта, если над сайтом работает команда разработчиков, то хорошим подходом будет чтобы настройки среды были у всех одинаковые. Для этого в корне проекта, куда подключаемся(либо открываем папку через vscode) нужно добавить папку .vscode в которую положить несколько json файлов:

settings.json

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

extensions.json

{
  "recommendations": [
    "EditorConfig.EditorConfig",
    "gulomov.vscode-modx",
  ]
}

Файл settings.json задаёт настройки среды, сюда можно указывает любые параметры vscode, д данном примере указываем использование fenom для tpl файлов.

Файл extensions.json нужен для указания рекомендуемых расширений, которые нужно поставить для текущего проекта. В данном примере указываем, что нужно установить расширение editorconfig и расширение для modx.

Также пробегусь кратко по нескольким расширениям которые я часто использую, но редко встречающихся в таких подборках:

Error Lens — расширение для более информативной подсветки предупреждений и ошибок в коде.

File Utils — добавляет в контекстное меню дополнительные возможности для работы с файлами.

Path Intellisense — подсказка путей для файлов.

Thunder Client — postman на минималках.

Turbo Console Log — быстрое добавление console.log в коде.

PHP Tools — отличный пакет при работе с php. Подсказывает методы, классы, ошибки в коде и т.д.

Дима Касаткин

14 ноября 2023, 12:44

Спасибо за развернутый ответ!

Редактировать файлы на сервере… официальное расширение Remote-SSH… На сервере нужен только nodejs

Ну чтобы редактировать файлы, дополнять серверный софт что-то не хочется. Для любых других редакторов (да и того же VSC если не в проектном режиме использовать а просто файл удаленный открывать через WinSCP) хватает поддержки SFTP (Через SSH который)… Вроде на странице по ссылке Remote-SSH требование установленной nodejs не нашел, так что это обнадеживает!

Конечно, для человека, который использует PhpStorm без плагинов и расширений, не иначе как джунглями представляется VSC…

В PhpStorm всё просто работает: подсвечивается, переходится по клику и автодополняется, бандлится и минифицируется и т.п., без необходимости даже открывать консоль, и уж тем более перебирать (нет, не изучать) бесконечные подборки плагинов в интернетах…

Но крутого расширения для MODX из этого поста, для PhpStorm пока нет, так что хватаем мачете и прыгаем в джунгли VSC, получивший второй шанс! :)

Andrew

14 ноября 2023, 13:06

Да vsCode разок под себя настроить (главное не скачивать все подряд плагины), и настройки на гит засинхронить, чтоб потом заново эту процедуру не проходить при переустановки ОС к примеру. И кайф)

Алексей Соин

14 ноября 2023, 13:27

В vscode синхронизация учетки через github есть. Все расширения, сниппеты, настройки сохраняются. Раньше приходилось переносить либо сохраняя всё в файлах, либо через специальный плагин, но к счастью теперь стало намного проще)))

я пользуюсь как vscode, так и phpstorm, мне оба этих инструмента нравятся)

Дима Касаткин

14 ноября 2023, 13:30

(главное не скачивать все подряд плагины)

Ну точно джунгли этот VSCode :) В скачивании плагинов подстерегает опасность?))

Я к PhpStorm пришел после Dreamviewer и NetBeans. Редакторы по типу Sublime, Notepad++ или Atom (из которого вырос VSC) всегда казались блокнотами с доп. функционалом, на фоне этих мощных IDE.

То, как вырос VSC конечно впечатляет (и как он обогнал популярнейший когда-то Sublime), но стоит ли идти на него из «другой лиги» IDE, вопрос открытый конечно…

Andrew

14 ноября 2023, 13:46

Мне кажется, уже многие по тихому все чаще vsCode юзают чем phpStorm) Но не говорят об этом))

Дима Касаткин

14 ноября 2023, 14:08

Думаешь, это работает также, как мода на короткие носки? – ну кстати очень может быть 8-)

deleted

17 ноября 2023, 22:55

Автозагрузки на сервер (SFTP) по CTRL+S (желательно без хранения учетных данных от удаленного сервера в JSON-файле рядом с исходниками)

использую sshfs. не знаю правда работает ли на винде. но может расширение для vscode есть одноимённое

Алексей Суслов

14 ноября 2023, 01:36

Большое спасибо за ваш вклад в развитие экосистемы модикс!

Andrew

14 ноября 2023, 12:23

Подскажите, как правильно настроить форматтер?)

Баха Волков

14 ноября 2023, 16:03

На данный момент никак, мне придётся самому писать форматтер, буду думать в этом направлении.

Ivan

14 ноября 2023, 13:45

Добрый день. Возможно для кого-то это глупый вопрос, но не могли бы вы сказать как вообще из IDE работать в MODX? Если у нас все элементы привязаны к БД. То есть получается что бы мне создать чанк и он был файловый мне нужно создать чанк в админке а далее поставить галочку Статичный файл и дальше уже создать этот файл и в нем работать, при чем в БД все равно будет запись об этом чанке. Это же капец какой маразм и не удобно.
Может есть какой-то логичный нормальный способ?
Если не сложно дайте статью или хотя бы немного объясните.
Спасибо

Andrew

14 ноября 2023, 13:51

Ну, чуть проще. Можно все через Fenom делать. В таком контексте, нужно только к шаблону страницы в админке привязать файл. А далее уже через IDE спокойно работать.

Шпаргалка
Курс Феном

Ivan

14 ноября 2023, 13:57

Феном я знаю. То есть вы хотите сказать, что после того как я только к шаблону привяжу файл, то когда я буду писать {include 'chunkname'} мне не нужно будет создавать этот чанк в админке, а только в файлах делать?

Ivan

14 ноября 2023, 13:58

аааа. Понял. Вы предлагаете делать

{include 'file:chunks/test.tpl'}

Andrew

14 ноября 2023, 14:19

Да в таком духе) Используем возможности шаблонизатора. Это ускорит процесс разработки)

Ivan

14 ноября 2023, 14:02

Спасибо. Обязательно ознакомлюсь.

Дима Касаткин

14 ноября 2023, 14:19

Ставишь галку Статичный и всё работает. Маразмом в этом подходе мне кажется можно как раз назвать ситуацию, в которой имеет смысл заморачиваться в том, что там где в БД остаётся или не остаётся… Система предоставляет функционал работы с файлами — поставил галочку и забыл.

Я проводил тесты, и да, из-за особенностей реализации через галочку «Статичный файл», на 10%-15% медленнее отрабатывают все шаблоны-чанки. В процентах кажется много, а в абсолютных числах разница типа в 0.1 сек на медленных сайтах, и ещё менее заметно – на быстрых.

А вообще, человечество, в лице @Prihod изобрело StaticElementsLive, рекомендую обратить внимание!

И ещё, в свежих версиях MODX (ну уже года полтора как, может больше) появились настройки автоматического создания статичных элементов.

Ivan

14 ноября 2023, 14:57

StaticElementsLive — Спасибо. То что нужно.

Если было непонятно, то повторю что я имею ввиду:
Очень неудобно при создании допустим 100 чанков создавать их из админки, ставить галочку, указывать путь и тд.

А как раз указанное вами StaticElementsLive похоже решит эту проблему.

deleted

17 ноября 2023, 22:52

zoomx)

Баха Волков

14 ноября 2023, 15:50

Вышла версия 1.0.5 расширения IntelliSense for MODX в котором есть фикс важной проблемы связанной с подсказками html которые не были доступны до этого, теперь всё отлично.

Еще добавил в README секцию Troubleshooting с решениями некоторых ситуаций:

— Как включить подсказки Emmet
— Как включить подсказки TailwindCSS

deleted

17 ноября 2023, 22:50

Не очень понятно зачем поддержка стандартного парсера. Кто-то пишет код в ide и использует стандартный парсер?) Мне кажется, что такие люди пишут код в админке. Может ошибаюсь, конечно.

А поддержка smarty планируется?

Anton

27 ноября 2023, 03:13

Я, как человек, который работает с modx практически с момента выхода Revo, года с 2011 точно, снимаю перед тобой шляпу! Баха, ты — молодец!

Баха Волков

27 ноября 2023, 09:24

Спасибо большое!

Валентина Павлова

05 апреля 2024, 19:37

Хотелось бы попробовать, круто выглядит. Но выдает ошибку:

Это расширение было отключено, так как оно не поддерживает виртуальные рабочие области.

То есть файл можно только локальный редактировать? И потом через git синхронизировать?
Удаленно нельзя?

Баха Волков

13 апреля 2024, 09:31

Выпустил обновление которое добавляет ограниченную поддержку виртуальных областей, не будут работать подсказки путей

Fred

22 января 2026, 04:41

Есть проблема с расширением, убирает из контекстного меню «Open with Live Server», с файлами шаблонов понятно это допустимо, хотя и не очень нужно, но а в .html то зачем убирать, приходится его отключать, неудобно. В настройках смотрел, нет ничего, как это исправить?

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

Встречайте VSCode IntelliSense for MODX

Возможности

MODX парсер

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

MODX: Автокомплит полей ресурса

MODX: Автокомплит системных настроек

MODX: Автокомплит phx фильтров (модификаторов)

MODX: Автокомплит сниппетов и их параметров

Fenom

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

Fenom: Автокомплит тэгов

Fenom: Автокомплит модификаторов

Fenom: Автокомплит переменных

Fenom: Автокомплит сниппетов и их параметров

Подсказки путей

Комментарии: 39

Здесь упомянуты