live server vs code настройка php
Настройка редактора Visual Studio Code для разработки на PHP
Пора перейти от слов к действиям и познакомиться с Visual Studio Code поближе. В этом посте представлена поэтапная настройка VS Code для разработки на PHP.
Скачайте и установите Visual Studio Code
После загрузки установите редактор на своем компьютере. Подробные инструкции по установке доступны здесь. Теперь можно открыть окно командной строки, запустить Visual Studio Code и начать редактировать файлы в папке.
Встроенные функции работы с PHP
VS Code поддерживает множество языков, в том числе PHP. На портале Visual Studio Marketplace доступны расширения VS Code, обеспечивающие поддержку дополнительных языков. Для PHP работает подсветка синтаксиса, определение парных скобок и фрагменты кода.
Когда вы начнете набирать код в файле PHP, то заметите автоматическое срабатывание цветового выделения синтаксиса, определения парных скобок и функции IntelliSense.
Настройка статического анализа PHP
По умолчанию VS Code будет проводить статический анализ кода на PHP в ходе проверки при сохранении файла. Для этого используется исполняемый файл php. Если вы работаете с VS Code впервые, то получите сообщение об ошибке, в котором сказано, что исполняемый PHP файл не обнаружен.
Необходимо указать путь к исполняемому файлу PHP на вашем компьютере. Для этого следует изменить файл настроек (в VS Code существуют различные уровни файлов настроек, подробнее см. в документации). В нашем примере мы настроим параметры PHP глобально для пользователя.
Откройте пользовательские настройки с помощью панели команд: нажмите F1, введите «user» и нажмите Enter.
Откроется два документа JSON. В документе слева содержатся настройки по умолчанию, в документе справа — пользовательские настройки. В пользовательских настройках можно переопределить настройки по умолчанию. Чтобы включить статический анализ кода PHP, необходимо изменить значения трех параметров.
Чтобы настроить путь к исполняемому файлу PHP, укажите его в файле пользовательских настроек:
После этого функция проверки будет включена для всех файлов PHP. Некорректный код PHP будет подчеркнут красным (в примере ниже пропущена точка с запятой).
Настройка отладки
Расширение PHP Debug (спасибо Феликсу Беккеру!) добавляет в VS Code поддержку отладчика XDebug. Установите расширение через панель команд VS Code: нажмите F1, введите «install ext», нажмите Enter, введите «PHP Debug» и вновь нажмите Enter. После установки расширения может потребоваться перезапуск VS Code.
Обратите внимание: это расширение использует отладчик XDebug. Поэтому для его работы необходимо установить XDebug. Скачать XDebug можно здесь (для Windows выбирайте 32-разрядную non-thread-safe версию).
Затем внесите в файл php.ini следующие настройки. Я установил XDebug в подкаталог ext установочной папки PHP. Если вы выбрали для XDebug другой каталог установки, убедитесь, что параметр zend_extension содержит правильное значение.
Убедитесь, что корневой раздел веб-сервера соответствует вашему проекту. Тогда при каждом запросе файла PHP XDebug будет предпринимать попытку подключения к порту 9000 для отладки.
Чтобы начать отладку, откройте вкладку Debugging в VS Code.
Щелкните значок шестеренки, чтобы сформировать файл launch.json, который позволит VS Code начать сеанс отладки XDebug.
Чтобы начать отладку, нажмите F5 или щелкните зеленую стрелку на вкладке Debugging. Чтобы задать точку останова в исходном коде, выберите строку и нажмите F9.
Теперь, когда вы откроете определенную веб-страницу, VS Code остановит выполнение исходного кода в заданной точке. В области слева отобразится информация о переменных, стеке вызовов и т. п.
Заключение
Visual Studio Code обладает отличной встроенной поддержкой PHP, а расширение PHP Debug добавляет возможность отладки кода на PHP. Все эти инструменты являются бесплатными и кроссплатформенными.
На портале Visual Studio Marketplace доступны и другие расширения для работы с PHP.
Настройка Visual Studio Code для разработки PHP
Visual Studio Code (или просто VS Code) – бесплатный редактор исходного кода или интегрированная среда разработки (IDE), доступная для всех основных операционных систем.
Благодаря большому набору расширений VS Code можно легко настроить для удовлетворения самых разнообразных потребностей разработки. В этом руководстве вы узнаете, как настроить Visual Studio Code для работы над проектами PHP.
Требования
Чтобы следовать этому руководству, вам необходимо загрузить и установить соответствующую версию Visual Studio Code для вашей операционной системы.
Инструкции в этом руководстве были проверены на настольном компьютере Ubuntu 20.04, но они должны без проблем работать и в других операционных системах, поддерживаемых VS Code. Однако обратите внимание, что в системах MacOS сочетания клавиш могут немного отличаться.
1: Установка PHP-расширений VS Code
VS Code распознает PHP-код и помогает с подсветкой синтаксиса, базовой отладкой и отступами кода сразу же после установки. Этого вполне достаточно для быстрого редактирования или для работы с отдельными сценариями PHP. Однако более крупные проекты сложно обслуживать без дополнительного контекста вокруг кода и без наглядного понимания того, что делает каждый файл и как он интегрируется в проект.
Существует ряд расширений VS Code, которые помогут повысить вашу продуктивность при работе над проектами PHP. В этом руководстве мы установим и настроим PHP Intelephense, популярное расширение PHP для VS Code, которое предоставляет несколько дополнительных функций: улучшенное автозаполнение кода, навигацию между компонентами, всплывающие подсказки с полезной информацией при наведении курсора мыши, автоматическое форматирование кода и создание отчетов об ошибках в реальном времени на основе статического анализа кода.
Откройте вкладку расширений, нажав на последний значок в левой строке меню или клавиши CTRL+SHIFT+X. Это вызовет меню боковой панели с полем поиска и списком популярных или рекомендуемых расширений. Введите «php» или «intelephense», чтобы найти нужное нам расширение PHP Intelephense. Затем нажмите кнопку Install, чтобы установить и включить расширение.
Официальная документация Intelephense рекомендует после завершения установки отключить встроенное расширение PHP Language Features, которое поставляется с VS Code.
Чтобы сделать это, введите @builtin php в поле поиска расширений. Когда вы найдете его, нажмите на значок настроек для расширения PHP Language Features и выберите параметр Disable в выпадающем меню.
Если в VS Code у вас есть открытые файлы, вам необходимо перезагрузить редактор, чтобы изменения вступили в силу.
Вы можете установить другие расширения, следуя описанному выше процессу, но имейте в виду, что некоторые расширения потребуют установки дополнительного программного обеспечения в вашей системе. Проверьте документацию по интересующему вас расширению, чтобы убедиться, что у вас установлены соответствующие зависимости.
2: Импорт или создание нового проекта PHP
Чтобы импортировать существующий проект PHP в VS Code, нажмите на первый значок в левой строке меню или клавиши CTRL+SHIFT+E – так вы сможете получить доступ к проводнику файлов. Нажмите кнопку Open Folder и выберите каталог своего проекта. Если вы создаете новый проект, вы можете создать новую папку и выбрать ее в качестве каталога вашего проекта.
В окне проводника теперь будет отображаться дерево каталогов проекта, что даст вам быстрый доступ к необходимым файлам и каталогам.
3: Настройка темы и шрифта редактора (опционально)
В настройке внешнего вида редактора нет острой необходимости, но иногда это бывает полезно – так можно сделать его более удобным для работы в долгосрочной перспективе. Разработчики много времени проводят в IDE (чем и является VS Code), и по этой причине важно убедиться, что шрифт редактора имеет соответствующий размер, что контрастность не утомляет глаза слишком быстро и код удобно читать.
Что касается удобочитаемости, здесь нет единой рекомендации. Советуем вам самостоятельно поэкспериментировать с разными темами и шрифтами, чтобы подобрать настройку, которая вам подходит.
Изменение темы VS Code
VS Code поставляется с несколькими темами, которые позволяют изменять цвета, используемые в интерфейсе редактора и при выделении кода. По умолчанию включены темный и светлый стили.
Также можно установить расширения для темы, чтобы дополнительно настроить внешний вид VS Code. Если вы выполните поиск (CTRL + SHIFT + X), вы найдете несколько расширений для темы с разными стилями и цветами, включая цветовые схемы, перенесенные из других популярных редакторов и платформ.
Настройка шрифта
В целом, настройки шрифтов VS Code по умолчанию достаточно хороши – многие пользователи предпочитают не менять их. Но если вы хотите, вы можете настроить размер и тип шрифта редактора для повышения удобочитаемости.
Изменения немедленно сохраняются и применяются ко всем текущим открытым файлам.
Заключение
Visual Studio Code – это легкий, но мощный редактор кода, который можно настроить в соответствии с потребностями большинства разработчиков. В этом руководстве вы узнали, как установить и настроить расширение PHP Intelephense для работы над проектами PHP, как импортировать и создавать новые проекты в VS Code и как настроить внешний вид редактора, чтобы сделать процесс разработки более удобным.
Лучшие плагины для VS Code
Рассмотрим лучшие плагины редактора Visual Studio Code для Web-разработки в 2021 году.
1. Live Server
Автоматическая перезагрузка статических и динамических страниц.
Как настроить автоматическое обновление страницы для PHP-файлов c помощью Live Server
2. Sass
Поддержка синтаксиса Sass: отступы, автозаполнение и прочее
3. Live Sass Complier
Компилирует SASS / SCSS файлы в CSS в режиме реального времени
Для включения Live Sass Complier нужно нажать Watch Sass в статус баре
Что включает в себя Live Sass Complier:
4. Higlight Matching Tag
Подсветку выделения тегов можно кастомизировать под себя. Моя настройка:
5. Color Highlight
Выделение web-цветов в редакторе соответствующим цветом
6. Bracket Pair Colorizer
Расширение подкрашивает симметричные скобки одинаковым цветом, но отличным от других скобок.
7. Auto Rename Tag
При изменении одного парного тега, второй будет изменён автоматически.
По умолчанию расширение работает для всех языков, чтобы изменить данную настройку используйте следующий код:
8. Auto Close Tag
Автоматическое закрытие тегов
По умолчанию работает для всех языков: HTML, PHP, JavaScript, markdown, liquid и т.д. Изменить настройки можно в setting.json
9. Import Cost
Это расширение будет отображать встроенный в редакторе размер импортируемого пакета.
10. Material Theme
Одна из самых популярных тем для VS Code. Так же можно установить шрифт, поддерживающий лигатуры (преобразование последовательности символов в единый элемент)
Тогда настройки для settings.json будут такими
11. Apache Conf
12. Russian Language Pack
Поддержка русского языка
13. Code Spell Checker
Проверка орфографии русского и английского языков в VS Code.
14. Автоматическая замена табов пробелами в VS Code
Сначала зададим количество пробелов в одном табе:
Теперь настроим автоматическую замену табов пробелами:
Установка Visual Studio Code в облаке
Облачные сервисы давно и плотно вошли в нашу жизнь, сейчас уже немыслимо представить себе без них современное существование в цифровом пространстве, они существенно упрощают жизнь и снижают порог входа в IT для небольших компаний, освобождая их от необходимости закупать и настраивать свою собственную инфраструктуру. К облакам подключены смартфоны и компьютеры, в них переносится все больше данных и сервисов.
Интегрированные среды разработки тоже не избежали переноса в облака. Около десяти лет назад это было диковинкой, Cloud IDE только начинали развиваться, но потом на них обратили внимание самые крупные игроки IT-индустрии.
Amazon выкупили и развивают сервис Cloud9:
Google встроили в свою облачную платформу Cloud Shell Editor:
Microsoft сначала создавали свою собственную облачную платформу для разработки, но потом отказались от нее в пользу решения, которое сейчас готовит GitHub — Codespaces:
Всех их объединяет одна идея: «Пользуйтесь инструментами для разработки в любом месте и на любой платформе!». Производительность IDE больше не зависит от личного компьютера, нет необходимости покупать мощный и дорогой десктоп или еще более дорогой ноутбук — вычислениями будет заниматься облако. А пользователь получит среду для разработки не зависящую от его системы, не требующую локальной настройки, работать в облачной IDE можно даже на планшете, если подключить к нему мышку и клавиатуру. И это будет не vi через скупую консоль, а полноценное GUI-приложение.
Есть и менее распространенные облачные среды для разработки, от простых «песочниц» типа CodePen, до более серьезных, вроде Codenvy, которую взяла под крыло Red Hat.
Но у всех перечисленных решений есть еще несколько общих черт: они работают на своих собственных серверах; некоторые требуют оплаты за часть рабочего функционала; их интерфейс требует привыкания. Решить эти проблемы можно установив привычную Cloud IDE на арендованном VPS. Оплата будет только за аренду сервера нужной мощности, никаких ограничений по возможностям, а интерфейс будет знаком и привычен огромному числу разработчиков, потому что это не что иное — как Microsoft Visual Studio Code. Такая возможность недавно появилась благодаря проекту code-server. В этой статье будет описана пошаговая установка VS Code на виртуальный сервер RuVDS.
Подготовка сервера к установке
Сначала надо выбрать и запустить тестовый VPS. Для демонстрации я выбрал виртуальный сервер RUCLOUD в Москве, чтобы уменьшить ping:
Самый доступный вариант с дисковой системой на SSD:
Этого достаточно, чтобы проверить функционирование Cloud IDE и работы над самыми простыми проектами, не требующими большой вычислительной мощности.
После коннекта в свежему серверу с пользователем root, проведем первоначальную настройку. Сначала заведем нового пользователя и добавим его в группу sudo:
adduser
adduser sudo
Затем отключим авторизацию пользователя root через SSH, для этого в файле /etc/ssh/sshd_config нужно изменить параметр PermitRootLogin yes на no
Для упрощения описания, оставим вход по паролю, не занимаясь генерацией ключей. Потом исправим файл host, добавив в него имя виртуальной машины, чтобы не получать предупреждение «sudo: unable to resolve host ruvds-xx12x: Name or service not known»:
После этого отключаемся от сервера, соединяемся уже под новым пользователем и
завершаем настройку установкой правил для файрвола:
Проверим настройки командой sudo ufw status.
Вывод программы должен быть таким:
Обновим систему и установим веб-сервер nginx:
После этого в файрвол будут добавлено несколько новых профилей, которые можно посмотреть командой sudo ufw app list:
Для проверки настроек веб-сервера нам потребуются оба вида подключения, активируем их:
Убедимся, что все включено правильно:
Проверяем, что веб-сервер запущен:
Вывод должен быть примерно таким:
http://
Должен появиться следующий текст:
Первоначальная настройка закончена, приступим к установке среды разработки.
Для начала создадим директорию, где будут храниться все данные IDE и перейдем в нее:
Затем скачаем последнюю версию релиза проекта и распакуем его. Номер релиза можно узнать по адресу: https://github.com/cdr/code-server/releases. На данный момент это v3.8.0, а файл для него называется: code-server-3.8.0-linux-amd64.tar.gz
Получившуюся директорию надо скопировать в /usr/lib/code-server
Потом сделать сим-линк на исполняемый файл IDE и создать директорию, где будут храниться данные пользователя::
Пришло время настройки службы облачной среды разработки. Создайте в редакторе файл code-server.service и добавьте туда следующие строки:
sudo nano /lib/systemd/system/code-server.service
[Unit]
Description=code-server
After=nginx.service
Почти все готово, можно запускать службу:
Проверим статус ее работы.
Если все было сделано правильно, то он будет Active: active (running):
Осталось привязать к нашему серверу домен, защитить его установив сертификат от Let’s Encrypt и настроить Nginx для работы с ним. Бесплатный домен легко получить на сайте https://www.freenom.com, его вполне достаточно для запуска нашей среды. О том, как привязать его, можно прочитать в справочном разделе RuVDS.
Файл конфигурации создаем в редакторе:
И добавляем туда следующие строки:
server <
listen 80;
listen [::]:80;
На всякий случай проверим валидность настроек:
Если все в порядке, то мы увидим в консоли следующий текст:
За последние несколько лет нас приучили к тому, что сайты должны быть защищены и работать по протоколу HTTPS, сайт, который работает без SSL кажется странным и выглядит это неловко, будто админу лень прописать пару строчек в консоли. Потому мы возьмем сертификат от известной компании Let’s Encrypt и облачная IDE будет готова к использованию.
Установим один из самых распространенных ботов по настройке:
А потом, с его помощью, зарегистрируем и установим сертификат для нашего домена :
В процессе настройки нам придется ответить на несколько вопросов: ввести адрес своей электронной почты, согласиться с правилами сервиса, поделиться (или нет) адресом почты с Electronic Frontier и настроить принудительный редирект на HTTPS (рекомендуется). Вдогонку, можно установить Git:
Откройте в браузере ваш сайт и вы получите приглашение от VS Code на ввод пароля, который указывали в файле конфигурации
Среда запущена, мы видим привычный интерфейс VS Code:
Можно приступать к работе. В качестве теста попробуем отредактировать файл со стандартным приглашением Nginx.
Заменим nginx на VS Code, и обновим страницу, которую выдает сервер в ответ на прямое обращение по IP-адресу:
Это полностью функциональный и привычный VS Code, он будет работать с системой контроля версий:
К нему можно подключать плагины:
IDE ничем не отличается от десктопного приложения, за исключением того, что работает на удаленном сервере и запускается в браузере.
PHP in Visual Studio Code
Visual Studio Code is a great editor for PHP development. You get features like syntax highlighting and bracket matching, IntelliSense (code completion), and snippets out of the box and you can add more functionality through community-created VS Code extensions.
Linting
Tip: Using XAMPP? Install the full version of PHP in order to obtain the development libraries.
There are three settings to control the PHP linter:
To change the PHP settings, open your User or Workspace Settings ( ⌘, (Windows, Linux Ctrl+, ) ) and type ‘php’ to filter the list of available settings.
To set the PHP executable path, select the Edit in settings.json link under PHP > Validate: Executable Path, which will open your user settings.json file. Add the php.validate.executablePath setting with the path to your PHP installation:
Windows:
Linux and macOS:
Snippets
Visual Studio Code includes a set of common snippets for PHP. To access these, hit ⌃Space (Windows, Linux Ctrl+Space ) to get a context-specific list.
PHP extensions
There are many PHP language extensions available on the VS Code Marketplace and more are being created. You can search for PHP extensions from within VS Code in the Extensions view ( ⇧⌘X (Windows, Linux Ctrl+Shift+X ) ) then filter the extensions dropdown list by typing ‘php’.
Disable built-in PHP support
To disable the built-in PHP smart completions in favor of suggestions from an installed PHP extension, uncheck PHP > Suggest: Basic, which sets php.suggest.basic to false in your settings.json file.
Debugging
PHP debugging with XDebug is supported through a PHP Debug extension. Follow the extension’s instructions for configuring XDebug to work with VS Code.
Next steps
Read on to find out about: