Андрей Смирнов
Время чтения: ~11 мин.
Просмотров: 46

Настройка редактора Visual Studio Code для разработки на PHP

Содержание

Visual Studio Code – популярный бесплатный редактор кода. Может с легкостью конкурировать с PhpStorm, ведь он бесплатный и с открытым исходным кодом

screen.pngТак может выглядеть интерфейс редактора после установки расширений

Основные возможности

  • отладчик кода
  • встроенный терминал
  • удобные инструменты для работы с Git
  • подсветка синтаксиса для множества популярных языков и файловых форматов
  • удобная навигация
  • встроенный предпросмотр Markdown
  • умное автодополнение
  • встроенный пакетный менеджер

VS Code имеет большое количество расширений для разработчика. Для установки нового пакета зайдите во вкладку “Extensions”, введите название пакета в строке поиска, нажмите кнопку “Install”.

recommended_extensions.png

EditorConfig for VS Code

EditorConfig — это конфигурационный файл и набор расширений к большому количеству редакторов кода. Он подхватывает настройки из файла .editorconfig, который, как правило, размещается в корне проекта. Расширение автоматически настроит отступы и перевод строк единообразно для всех разработчиков, использующих его. PHP код чаще всего выполняется на *nix системах, поэтому необходимо использовать стандарт.

Ниже приводится пример файла .editorconfig, который используется в Laravel:

root = true  # Глобальные настройки, которые будут записаны для всех файлов. [*] charset = utf-8 # На Unix системах используется lf для перевода строки. # Это также требование стандарта PSR. end_of_line = lf insert_final_newline = true indent_style = space indent_size = 4 trim_trailing_whitespace = true  # Можно задать индивидуальные настройки как для типов файлов, # так и отдельных файлов по имени. [*.md] trim_trailing_whitespace = false  [*.{yml,vue,js,html}] indent_size = 2  [{package.json,.travis.yml}] indent_style = space indent_size = 2  [lib/**.js] indent_style = space indent_size = 2 

PHP Intelliphense

В редакторе уже есть поддержка синтаксиса и подсказок стандартных функций языка. Но без специального дополнения редактор не будет подсказывать пользовательские функции из других частей проекта. Поэтому для поддержки автодополнения, анализа кода, перехода к месту, где создана функция/класс/переменная (с помощью шотката Alt+Click), используется дополнение PHP Intelliphense

Чтобы подсказки не дублировались необходимо отключить встроенную в редактор поддержку кода для PHP: Extensions -> Search @builtin php -> PHP Language Features -> Disable

PHP Debug

При разработке может возникнуть ситуация, когда простых функций отладки и логирования становится недостаточно. Тогда может помочь специальный инструмент — Дебаггер. Для PHP есть расширение xdedug, которое позволяет расставить точки останова и посмотреть окружение в предполагаемом месте ошибки, выполняя код поэтапно либо до следующей точки.

Чтобы воспользоваться PHP Debug, необходимо установить сам XDebug, без него расширение для редактора работать не будет. Установив расширение, необходимо добавить конфигурацию для PHP в разделе Debug. После выбора языка в корне проекта будет создан файл .vscode/launch.json с задачами для Дебаггера. Расширение создаст файл со стандартными параметрами.

Для того, чтобы XDebug общался с нашим дебаггером, необходимо добавить настройки в файл конфигурации php. Чтобы найти этот файл выполните в терминале команду php --ini или запустите веб-сервер с кодом phpinfo().

В Linux PHP подгружает не только основной файл, но и файл из этой директории. Например, на Ubuntu путь к директории конфигурационных файлов для PHP может быть таким — /etc/php/7.3/cli/conf.d/. В ней создаём файл с необходимыми правами (требуются root права):

$ sudo touch /etc/php/7.3/cli/conf.d/99-local.ini $ sudo chmod 777 /etc/php/7.3/cli/conf.d/99-local.ini 

Содержимое файла:

xdebug.remote_enable=1 xdebug.remote_host=127.0.0.1 xdebug.remote_port=9000 ; Порт, который мы указали в launch.json xdebug.idekey=code xdebug.remote_autostart=1 

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

PHP Sniffer

В языках программирования есть понятие стиль кодирования. Но не все разработчики знают об этом. Программа, которая отвечает за проверку на соответствие стандартам, называется линтер. В PHP приняты стандарты под названием PSR. Нас интересуют стандарты PSR-1 и PSR-12. Именно эти два стандарта касаются кодирования и правил оформления.

В PHP в качестве линтера используется PHP_CodeSniffer. Для его работы необходимо установить глобально сам линтер composer global require "squizlabs/php_codesniffer=*" и расширение PHP Sniffer.

Проверьте, что линтер установился:

$ phpcs --version  PHP_CodeSniffer version 3.4.2 (stable) by Squiz (https://www.squiz.net) 

Выполнить проверку кода в терминале можно с помощью команды phpcs, явно указав стандарт, который мы хотим использовать, и путь для проверки:

$ phpcs --standard=PSR12 <dirname> 

phpcs-vscode.png

Semicolon Insertion Shortcut

PHP требует разделять инструкции с помощью точки запятой. Расшрение Semicolon Insertion Shortcut добавляет необходимый символ в конец строки с помощью шортката. Если при нажатии [Ctrl] + ; символ не вставляется, то необходимо проверить список горячих клавиш и при необходимости назначить комбинацию вручную: File -> Preferences -> Keyboard Shortcuts

semicolon.png

Extra

Список расширений, которые могут быть использованы не только для PHP:

  • GitLens — в VS Code уже встроена поддержка Git. Но когда базовых возможностей становится недостаточно, на помощь может придти Gitlens. Например, одна из полезных фич — git blame на текущей строке.

    current-line-blame.png

  • Indent Rainbow — разноцветные отступы в коде. Подсвечивает некорректный отступ. Можно вместо радуги установить оттенки серого.

    intend-rainbow.png

  • Settings Sync — плагин, позволяющий синхронизировать настройки редактора между разными компьютерами. В качестве облачного хранилища используется Github Gists. Все настройки можно скачать, указав нужный файл синхронизации.

  • Fira Code — моноширинный шрифт, в котором используются лигатуры (объединяет несколько символов в один) для общих комбинаций символов в программировании. Визуальная надстройка для более удобного чтения кода.

16/12/2018 21:361544976582_visual_studio.pngVsCode — это кроссплатформенный редактор исходного кода, разработанный компанией Microsoft.Распространяется бесплатно как программное обеспечение с открытым исходным кодом.Функциональность редактора без проблем можно расширить с помощью плагинов.Благодаря плагинам данный редактор приобретает множество полезных возможностей, что позволяет VsCode составить конкуренцию платным редакторам.Первым шагом необходимо установить сам редактор VsCode.Для этого необходимо перейти на официальный сайт VsCode, скачать редактор и выполнить установку.После того как установка будет завершена, запускаем редактор и переходим в раздел «Расширения«(Extensions).1544985179_rasshirenija.pngТеперь благодаря строке поиска ищем необходимые плагины.Список плагинов, который позволит нам расширить функциональные возможности редактора для Web разработки на языке PHP:

  1. PHP IntelliSense — расширение VSCode, которое порождает фактический языковой сервер. Сам языковой сервер реализован исключительно на PHP. Позволяет выполнять автозаполнение и анализ кода. Для работы данного плагина требуется установленный PHP интерпретатор (Разработчики плагина просят версию интерпретатора не ниже PHP7.0). Установка:Необходимо прописать PATH до местоположения PHP интерпретатора.Или так-же можно указать данный путь в настройках, заменяя null на путь до php интерпретатора:
    "php.executablePath": null

    1544989192_executablepath.pngВ документации к плагину, так-же рекомендуется отключить встроенный в VsCode PHP IntelliSense, чтобы избегать повторяющиеся предложения.Для этого в настройках необходимо отключить конфигурацию:

    "php.suggest.basic": true

    Для отключения необходимо заменить true на false.1544989016_suggest-basic.pngРезультат:После завершения установки данного плагина вам будет доступно:

    • Автоподстановка кода.
    • Всплывающие подсказки по синтаксису.
    • Поиск символов рабочего пространства.
    • Поиск всех рекомендаций.1545482738_poisk-vseh-rekomendacij.png
    • Переход к определению.
    • Нависающая подсказка.
  2. Поиск всех символов.
  3. Уведомления об ошибках.1545483688_tochnoe-uvedomlenie-ob-oshibkah.png
  4. Code Navigation — расширение, которое упрощает переход по коду. С помощью данного расширения можно перемещаться по классам, функциям, методам, переменным и т.д.
  5. Docker — Расширение Docker упрощает создание, управление и развертывание контейнерных приложений, находясь в Visual Studio Code.Вы можете с легкостью с помощью графического интерфейса создавать, редактировать и загружать необходимые вам контейнеры.Для автоматического создания Dockerfile, docker-compose.yml, и .dockerignore файлов необходимо нажать клавишу F1 и выбрать Docker: Add Docker files to Workspace.1545158580_sozdat-kontejner-v-docker.pngУправление Docker контейнерами так-же осуществляется в графическом интерфейсе Docker плагина. После установки плагина в левой части IDE появится Docker ярлык.При переходе в данный плагин, будет отображена панель управления контейнерами.1545158993_upravlenie-docker-kontejnerami.pngТак-же данный плагин имеет множество дополнительных возможностей, с которыми вы можете познакомиться на официальной странице плагина.
  6. PHP Debug — Плагин, который позволяет выполнять отладку кода с использованием xdebug, находясь в VsCode.Для работы с данным плагином требуется наличие xdebug на отлаживаемом Web сервере.И наличие базовой конфигурации в php.ini файле:
    [XDebug]  xdebug.remote_enable = 1  xdebug.remote_autostart = 1
  7. PHP Getters & Setters — Плагин для автоматической генерации getter и setter.1545160091_insert-getter-and-setter.jpg
  8. phpfmt — PHP formatter — Плагин, который позволяет форматировать код.Можно отформатировать весь код:Или только необходимую его часть:
  9. minify — Плагин для минимизирования css, js и html фалов. Возможности данного плагина позволяют минимизировать все js и css файлы находящиеся в папке в один сжатый файл.Данный файл получит название по следующей схеме:dirname — Наименование директории в которой находятся данные файлы. min — Обозначает, то что файл минимизирован. css|js — Тип файла.
    {dirname}.min.[css|js]

    Данный плагин можно настроить под личные требования.Для этого нужно зайти в настройки и в поисковой строке написать «minify».По умолчанию можно настроить минимизацию для всех 3х типов файлов (css, js и html). Со списком всех настроек можно ознакомиться на официальном сайте разработчика.

Данный набор значительно улучшает и упрощает работу с кодом.На VsCode есть так-же множество интересных плагинов, которые стоит попробовать.Найти и установить необходимые вам плагины вы можете без проблем и сами в хранилище плагинов, которое доступно прямо в самой IDE в разделе «Плагины«(Extension).Всем спасибо! В комментариях вы можете поделиться своим набором плагинов для VsCode.PhpStorm / vscodeАвтор оригинала: Nick J Trogh

  • Перевод
  • Tutorial

18ec5ce4a2084d32a54875451614b2fc.png Всем привет! Пора перейти от слов к действиям и познакомиться с Visual Studio Code поближе. В этом посте представлена поэтапная настройка VS Code для разработки на PHP. Если кратко, то мы поговорим о том как:

  1. Скачать и установить Visual Studio Code.
  2. Настройть статистический анализ кода на PHP в параметрах пользователя.
  3. Скачать и установить расширение PHP Debug с портала Visual Studio Marketplace.
  4. Настройть расширение PHP Debug для использования XDebug.

Скачайте и установите Visual Studio Code

Visual Studio Code — бесплатный кроссплатформенный, легковесный редактор кода от Microsoft. Пока он будет загружаться (в нем всего 42 мегабайта), рассмотрим подробнее каждое из этих свойств:

  • Бесплатный: да, VS Code полностью бесплатен, никаких приписок мелким шрифтом.
  • Кроссплатформенный: доступны версии VS Code для Windows, Linux и OS X.
  • Легковесный: VS Code, в отличие от Visual Studio, — не полнофункциональная среда IDE, а редактор кода. Он поддерживает ряд мощных функций, характерных для IDE, например, IntelliSense, отладку и интеграцию с системой управления исходным кодом Git.

Кроме того, VS Code — это проект с открытым исходным кодом. Вы можете принять участие в разработке или отправлять сообщения о проблемах через репозиторий на GitHub. После загрузки установите редактор на своем компьютере. Подробные инструкции по установке доступны здесь. Теперь можно открыть окно командной строки, запустить Visual Studio Code и начать редактировать файлы в папке.fd5910c167eb76ae238ad67503b5d546.png Если вы откроете файл с расширением .php, Code поймет, что это файл на языке PHP. Тип файла можно изменить и вручную: щелкните кнопку Language Mode в правом нижнем углу окна редактора или последовательно нажмите клавиши Ctrl+K и M.0b1d5f5caf11b38054d112527e118fdb.png

Встроенные функции работы с PHP

VS Code поддерживает множество языков, в том числе PHP. На портале Visual Studio Marketplace доступны расширения VS Code, обеспечивающие поддержку дополнительных языков. Для PHP работает подсветка синтаксиса, определение парных скобок и фрагменты кода. Когда вы начнете набирать код в файле PHP, то заметите автоматическое срабатывание цветового выделения синтаксиса, определения парных скобок и функции IntelliSense.40e449aba92b39e03c4547e6f8b009aa.png

Настройка статического анализа PHP

По умолчанию VS Code будет проводить статический анализ кода на PHP в ходе проверки при сохранении файла. Для этого используется исполняемый файл php. Если вы работаете с VS Code впервые, то получите сообщение об ошибке, в котором сказано, что исполняемый PHP файл не обнаружен.d0f19ef1b87baa647de7c2ff3dc1bd25.png Необходимо указать путь к исполняемому файлу PHP на вашем компьютере. Для этого следует изменить файл настроек (в VS Code существуют различные уровни файлов настроек, подробнее см. в документации). В нашем примере мы настроим параметры PHP глобально для пользователя. Откройте пользовательские настройки с помощью панели команд: нажмите F1, введите «user» и нажмите Enter.2c0c78f26d1ccfdf9de1f4c0a69345a8.png Откроется два документа JSON. В документе слева содержатся настройки по умолчанию, в документе справа — пользовательские настройки. В пользовательских настройках можно переопределить настройки по умолчанию. Чтобы включить статический анализ кода PHP, необходимо изменить значения трех параметров.c25f3ac0e066198fee4aa84ee8131a3e.png Чтобы настроить путь к исполняемому файлу PHP, укажите его в файле пользовательских настроек:047e7d44c27c81166a78cc9dc567f7ef.png После этого функция проверки будет включена для всех файлов PHP. Некорректный код PHP будет подчеркнут красным (в примере ниже пропущена точка с запятой).ed9f5ad9badeed0b0216e1ca3f9b754c.png

Настройка отладки

Расширение PHP Debug (спасибо Феликсу Беккеру!) добавляет в VS Code поддержку отладчика XDebug. Установите расширение через панель команд VS Code: нажмите F1, введите «install ext», нажмите Enter, введите «PHP Debug» и вновь нажмите Enter. После установки расширения может потребоваться перезапуск VS Code.4c94c702cc50b60154eb0031d4d706d4.png Обратите внимание: это расширение использует отладчик XDebug. Поэтому для его работы необходимо установить XDebug. Скачать XDebug можно здесь (для Windows выбирайте 32-разрядную non-thread-safe версию). Затем внесите в файл php.ini следующие настройки. Я установил XDebug в подкаталог ext установочной папки PHP. Если вы выбрали для XDebug другой каталог установки, убедитесь, что параметр zend_extension содержит правильное значение.d30027d0f374c2e4a110d3c03d01bb44.png Убедитесь, что корневой раздел веб-сервера соответствует вашему проекту. Тогда при каждом запросе файла PHP XDebug будет предпринимать попытку подключения к порту 9000 для отладки. Чтобы начать отладку, откройте вкладку Debugging в VS Code.f79254b1bbd8765b0622bed21b733927.png Щелкните значок шестеренки, чтобы сформировать файл launch.json, который позволит VS Code начать сеанс отладки XDebug.f461f00d5dc7271f8488b84d45ec3260.png   Чтобы начать отладку, нажмите F5 или щелкните зеленую стрелку на вкладке Debugging. Чтобы задать точку останова в исходном коде, выберите строку и нажмите F9.be99318307701d12c7b3f9ba38999db5.png Теперь, когда вы откроете определенную веб-страницу, VS Code остановит выполнение исходного кода в заданной точке. В области слева отобразится информация о переменных, стеке вызовов и т. п.04f2233b3d39702c38d35eaaad08b9a8.png

Заключение

Visual Studio Code обладает отличной встроенной поддержкой PHP, а расширение PHP Debug добавляет возможность отладки кода на PHP. Все эти инструменты являются бесплатными и кроссплатформенными. На портале Visual Studio Marketplace доступны и другие расширения для работы с PHP.

Полезные ссылки

  • Visual Studio 2015: бесплатные предложения для разработчиков
  • Дополнительные и бесплатные инструменты и службы в программе Visual Studio Dev Essentials
  • Лабораторные работы по разработке, тестированию и управлению жизненым циклом ПО для Visual Studio 2015

Используемые источники:

  • https://guides.hexlet.io/vscode-for-php-setup/
  • https://pacificsky.ru/ide/phpstorm/164-ide-prokachka-vscode-dlja-raboty-s-php.html
  • https://habr.com/post/279947/

Рейтинг автора
5
Подборку подготовил
Максим Уваров
Наш эксперт
Написано статей
171
Ссылка на основную публикацию
Похожие публикации