Настройка VS Code для работы с CMS MODX

Настройка VS Code для работы с CMS Инструментарий
Так как в рамках данного курса мы делаем сайт на файловых элементах, чтобы не создавать и не редактировать их через файловый менеджер или админку сайта (нужно вносить настройки). Настроем крутой бесплатный редактор кода (целый комбаин) Visual Studio Code.

Скачать visual studio code можно с оф. сайта: code.visualstudio.com.

Русификация VS Code

На одном из ПК он у меня сам русифицировался после установки, на другом самостоятельно не захотел)

В общем для русификации интерфейса, зайдите в extensions (расширения) в строке поиска наберите: Russian Language Pack for Visual Studio Code или просто Russian Language Pack, установите расширение и перезагрузите редактор.

Russian Language Pack for Visual Studio Code

Настройка FTP или sftp подключения и синхронизации VS Code при помощи RemoteFS

Нажимаем на расширения, в окне поиска вбиваем RemoteFS и нажимаем установить.

установка расширения в VS CODE

После установки, идем в настройки Remote FS и щелкаем на строку Изменить setting.json

Идем в настройки Remote FS

И указываем промеж "remotefs.remote": { ... } следующий конфиг

"dev": {
            "scheme": "ftp",
            "port": 21,
            "host": "host",
            "username": "username",
            "password": "password",
            "rootPath": "/"
          }

где:

  • «protocol» — используемый для подключения протокол, указать можно FTP или SFTP, в зависимости от выбранного нужно указывать различные настройки далее.
  • «port» — порт: (Для FTP — укажите 21., Для SFTP — обычно 22).
  • «host» — укажите хост из данных для подключения по FTP или SSH.
  • «username» — имя пользователя: (Для FTP — укажите логин из данных для подключения по FTP, Для SFTP — укажите логин из данных для подключения по SSH.
  • «password» — пароль: (Для FTP — укажите пароль FTP-пользователя, Для SFTP — укажите пароль из данных для подключения по SSH.
  • «remotePath» — полный путь к каталогу сайта: (Для FTP: Либо укажите / — если нужно попасть напрямую в каталог доступа пользователя FTP, либо укажите остаток пути от каталога доступа пользователя FTP до нужного подкаталога — если нужно попасть не напрямую в каталог доступа, а в его подкаталог. Для SFTP — укажите путь в виде /home/user/example.com/www/, где user это название хостинг-аккаунта, а example.com/www это каталог сайта.
Сохраните изменения в конфигурационном файле.
После этого жмем Ctrl+Shift+P (Windows/Linux), вводим Remote FS: Add Folder to Workspace. И радуемся — теперь можно кодить на сайте прям из редактора.
Пример подключения
Так можно подключать множество сайтов.
конфиг для нескольких сайтов

Немного о настройке FTP и SFTP на виртуальном хостинге Beget

Идем в раздел FTP, там видим наши сайты, на против них есть зеленые плюсики, жмем на плюс, выскакивает окно. В окне указываем «Логин», «Пароль» (можно сгенерировать), «Путь к директории» где у нас лежат стили, скрипты, шаблоны и т.д. Включаем SSH и жмем на кнопку «Добавить». Не забудьте предварительно записать пароль.
Настройка FTP - SFTP на beget

Получение автокомплита полей и методов классов MODX в VS Code

Установим расширение PHP (если оно не установлено ранее). Для этого перейдем в extensions и установим пакет PHP Intelephense.

устанавливаем пакет PHP Intelephense

Далее необходимо рассказать VS Code, что не нужно использовать встроенные языковые функции. Для этого в той же вкладке расширения (extensions) введем @builtin php и выключим для всего редактора PHP Language Features (в самом свежем VS code (на текущий момент у меня версия 1.60 от августа 2021) уже отключено:  так как оно не поддерживает виртуальные рабочие области. Ну на всякий случай проверьте, и отключите его если не отключено.

Отключаем расширение

В принципе — все, вы восхитительны! Давайте проверим. Откроем какой-нибудь проект и откроем какой-нибудь код, в котором содержатся PHP функции и попробуем получить подсказки от пространства $modx
тест VS code.jpgКлево! Давайте попробуем получить информацию о определенном методе и узнаем его параметры:

получить информацию о определенном методе

При наведении на метод, мы получим его более подробную информацию.

Получение подробной информации о методе

Так же работают go to defenition переходы.

go to defenition переходы

Пользуйтесь с удовольствием) В следующем уроке начнем создавать дизайн для нашего сайта.

Понравилась статья? Можно поблагодарить автора: отправив ему донат на
YooMoney
или
Qiwi
. Либо поделившись статьей ☟
Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
Web-Revenue.ru
Добавить комментарий