1. 2 Установка и настройка ПО. Дистрибутивы AMP. Интегрированная среда разработки NetBeans. Редактор Visual Studio Code

1 Установка и настройка ПО

1.1 Дистрибутивы AMP

Для автоматической установки и настройки PHP, сервера HTTP Apache и СУБД MySQL можно воспользоваться пакетами AMP. Системы AMP представляют собой пакеты, связывающие входящие в набор программы таким образом, чтобы их не нужно было устанавливать и настраивать по отдельности.

AMP – акроним, обозначающий набор серверного программного обеспечения, широко используемый в Интернет (от Apache, MySQL, PHP или Perl). Обычно в акрониме присутствует также первая буква, обозначающая соответствующую оперционную систему:

  • LAMP – для операционной системы Linux
  • WAMP – для Windows
  • MAMP – для Mac OS X

phpXAMPP

Одной из наиболее распространенных является кроссплатформенная сборка веб-сервера XAMPP – X (любая из четырех операционных систем), Apache, MySQL, PHP, Perl.
XAMPP свободно распространяется согласно лицензии GNU General Public License. Сборка содержит также веб-интерфейс для администрирования СУБД MySQL phpMyAdmin, поддерживает управление базами данных SQLite.

Инсталляцию XAMPP в виде выполняемого файла или в виде zip-архива можно скачать с официального сайта по адресу https://www.apachefriends.org/download.html.

1.2 Установка веб-сервера XAMPP

php
XAMPP – кроссплатформенная сборка веб-сервера, содержащая Apache, MySQL, интерпретатор скриптов PHP, PHPMyAdmin, а также большое количество дополнительных библиотек. Для установки XAMPP нужно произвести следующие действия.

Скачать инсталляцию XAMPP, можно с официального сайта по адресу https://www.apachefriends.org/download.html (например, файл xampp-portable-win32-5.6.24-1-VC11-installer.exe).

После запуска инсталляции  в открывшемся диалоговом окне нужно нажать на кнопку «Run«. На появившемся диалоговом окне  нажать на кнопку Next. В следующем окне со списком устанавливаемых программ можно убрать галочки с Tomcat и Perl. Далее- нужно нажать на кнопку Next. После этого в диалоговом окне можно установить путь, по которому должен будет храниться каталог со всеми файлами сервера XAMPP. По умолчанию чаще всего это путь C://xampp. После этого нажмите «Install«.

После раскрытия файлов должно появится диалоговое окно, на котором нужно нажать на кнопку «Finish«. На следующем диалоговом окне следует нажать кнопку «Yes«.

После этого должна запуститься контрольная панель XAMPP ( “XAMPP control panel«) , отражающая состояние запущенных сервисов программы (Apache , MySQL … ), а также с окном, содержащим журнал с записями о действиях программы. Возле каждого из сервисов расположена кнопка с предложением изменить состояние данной программы ( «Start» обеспечивает ее запуск,  «Stop» служит для ее остановки). Необходимо, чтобы были запущены серверы Apache и MySQL.

Далее следует открыть интернет-браузер и написать в адресной строке (без префиксов) слово»localhost«, затем нажать «Enter«. Перенаправление на служебную страницу программы XAMPP означает, что XAMPP успешно установлен.

Для повторного запуска сервера XAMPP после перезагрузки компьютера необходимо зайти в каталог XAMPP, путь к которому был прописан при установке (например, C ://xampp) и запустить файл xampp-start.exe, который и активизирует сервер XAMPP. Остановить работу сервера можно, запустив файл xampp_stop.exe. На контрольную панель “ XAMPP control panel» можно перейти, запустив файл xampp-control.exe.

1.3 Консольное приложение PHP

Теперь можно протестировать установленный интерпретатор PHP, создав и запустив на выполнение программу (скрипт). Для этого в любом текстовом редакторе, например,  в Notepad++, нужно создать новый файл (File->New), установить кодировку в UTF-8 (Encoding->Encode in UTF-8) и сохранить, дав название, например, как first.php и установив тип расширения как PHP: Hypertext Preprocessor file (*.php; *.php3; *.phtml).

Далее – набрать следующий код:

<?php 
echo "Hello, World!" ;

Затем после выполнения  в командной строке cmd, в появившейся командной строке набрать после приглашения c:\>

C:\xampp\php\php  C:\xampp\htdocs\first.php

И нажать на клавишу Enter. Программа запустится на выполнение.

Сервер Apache по умолчанию будет установлен как сервис (служба) Windows на порт 80. При этом необходимо выйти из программ, занимающих этот порт (например, Skype). Командой "netstat -ab", набранной в командной строке, можно просмотреть, какие процессы занимают порт 80. В случае конфликта можно изменить порт 80 на 8080 (в файле c:\xampp\apache\conf\httpd.conf заменить строчку Listen 80 на строчку Listen 8080).

Если другим процессом занят порт 443, то его можно изменить в файле httpd-ssl.conf (папка xampp\apache\conf\extra). В єтом файле нужно найти строку Listen 443 и изменить порт, напрмер, на Listen 4430.
Также требуется заменить в этом файле все вхождения 443 на 4430, после чего сохранить файл.

Проверить работу сервера Apache можно, создав в каталоге C:\xampp\htdocs\  файл с названием info.php с таким содержанием:

<?php  
phpinfo();

Затем – набрать в браузере:

http://localhost/info.php

или

http://localhost:8080/info.php

в случае использования порта 8080.

В результате будет выведена таблица, отображающая текущую конфигурацию интерпретатора PHP.

Также можно создать простейшую веб-страницу со встроенным кодом PHP. Страница будет иметь, например, такой вид:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>first</title>
	</head>
	<body>
		<h1><?php echo "Hello, html!"; ?></h1>
	</body>
</html>

Эту страницу можно назвать «index.php» и разместить в папке «site1», которую, в свою очередь, расположить в в каталоге C:\xampp\htdocs\. Тогда увидеть отображение ее браузером можно, набрав в его адресной строке адрес http://localhost/site1/index.php.

Обычные HTML-страницы также будут отображаться с помощью сервера Apache, если их размещать в каталоге C:\xampp\htdocs\ (например, страницу test.html можно отобразить, набрав в адресной строке браузера адрес http://localhost/test.html).

Примечание. Для работы PHP (а также Apache) может также понадобится установить Visual C++ Redistributable for Visual Studio 2012 Update 4 с официального сайта MicroSoft по ссылке http://www.microsoft.com/en-us/download/details.aspx?id=30679 (нужно выбрать файл VSU_4\vcredist_x86.exe или VSU_4\vcredist_x64.exe, соответствующий битности Windows). Запустите и установите этот скачанный файл.

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

  • В браузере набрать http://localhost/info.php (или http://localhost:8080/info.php ).
  • Скопировать в буфер содержимое файла.
  • Открыть страницу сайта http://xdebug.org/wizard.php и вставить в окно содержимое буфера, нажать кнопку «Analyse my phpinfo() output». Будет получен, например, такой результат:
    Or Flattr this website: Flattr this
    Tailored Installation Instructions
    Summary
    Xdebug installed: no
    Server API: Apache 2.0 Handler
    Windows: yes - Compiler: MS VC11 - Architecture: x86
    Zend Server: no
    PHP Version: 5.6.24
    Zend API nr: 220131226
    PHP API nr: 20131226
    Debug Build: no
    Thread Safe Build: yes
    Configuration File Path: C:\Windows
    Configuration File: C:\xampp\php\php.ini
    Extensions directory: C:\xampp\php\ext
    Instructions
    
        Download php_xdebug-2.4.1-5.6-vc11.dll
        Move the downloaded file to C:\xampp\php\ext
        Edit C:\xampp\php\php.ini and add the line
        zend_extension = C:\xampp\php\ext\php_xdebug-2.4.1-5.6-vc11.dll
        Restart the webserver
  • Выполнить указанные инструкции:
    • Скачать указанную dll (например, php_xdebug-2.2.5-5.5-vc11.dll )
    • Переместить скачанный файл в папку C:\Server\bin\php\ext
    • В файл c:\xampp\php\php.ini внести изменения в строке
      zend_extension = C:\xampp\php\ext\php_xdebug-2.4.1-5.6-vc11.dll
    • Перегрузить веб-сервер Apache (с помощью c:\xampp\xampp-control.exe).
  • В файл c:\xampp\php\php.ini также добавить строчки:
[XDebug] 
xdebug.remote_enable=1
xdebug.remote_host=127.0.0.1 
xdebug.remote_port=9000 
xdebug.remote_handler="dbgp"
xdebug.profiler_enable=1

Или:

[XDebug]
xdebug.stopOnEntry = true
xdebug.profiler_enable = off
xdebug.profiler_enable_trigger = Off
xdebug.profiler_output_name = cachegrind.out.%t.%p
xdebug.profiler_output_dir ="c:/xampp/tmp"
xdebug.show_local_vars=0
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
xdebug.remote_handler = "dbgp"
xdebug.remote_host = "127.0.0.1"
xdebug.remote_log = "C:\xampp\tmp\xdebug.txt"
xdebug.remote_port = 9000
xdebug.trace_output_dir = "C:\xampp\tmp"
xdebug.remote_cookie_expire_time = 36000

Или:

[XDebug]
zend_extension = C:\xampp\php\ext\php_xdebug-3.0.2-8.0-vs16-x86_64.dll
xdebug.stopOnEntry = true
xdebug.profiler_enable = off
xdebug.profiler_enable_trigger = Off
xdebug.profiler_output_name = cachegrind.out.%t.%p
xdebug.profiler_output_dir ="c:/xampp/tmp"
xdebug.show_local_vars=0
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
xdebug.remote_handler = "dbgp"
xdebug.remote_host = "127.0.0.1"
xdebug.remote_log = "C:\xampp\tmp\xdebug.txt"
xdebug.remote_port = 9000
xdebug.trace_output_dir = "C:\xampp\tmp"
xdebug.remote_cookie_expire_time = 36000
xdebug.mode = debug
xdebug.start_with_request = yes
xdebug.client_port = 9000
xdebug.client_host = "127.0.0.1"
xdebug.log = "C:\xampp\tmp\xdebug\xdebug.log"
xdebug.idekey = VSCODE

Файл xdebug.log в папке C:\xampp\tmp\xdebug\ для журналирования ошибок xdebug требуется создать самостоятельно.

2 Интегрированная среда разработки (IDE).

Интегрированная среда разработки (IDE — Integrated development environment) — комплекс программных средств, используемый программистами для разработки программного обеспечения.

Среда разработки, как правило, включает в себя:

  • текстовый редактор
  • компилятор и/или интерпретатор
  • средства автоматизации сборки
  • отладчик и т.д.

Существуют как свободно распространяемые (бесплатные), так и проприетарные (платные) IDE. Среди IDE, поддерживающих PHP, хорошо себя зарекомендовали проприетарные PhpStorm, Zend Studio, Komodo, среди свободных — Eclipse, Aptana, NetBeans.

2.1 Установка IDE NetBeans

NetBeans

Популярная интегрированная среда разработки NetBeans — свободная IDE, поддерживающая  языки программирования Java, PHP, Python, JavaScript, C, C++, Ruby и ряд других.
Установить эту IDE можно, выполнив следующие действия.

На первом шаге рекомендуется загрузить и установить последнее обновление JDK со страницы http://www.oracle.com/technetwork/java/javase/downloads/index.html (например, соответственно 32-х разрядной платформе – jdk-8u101-windows-i586.exe, 64-х разрядной —  jdk-8u101-windows-x64.exe).

Далее нужно перейти по адресу https://netbeans.org/downloads/, выбрать в таблице колонку «PHP» и, соответственно установленной версии Windows скачать файл для установки NetBeans (например, netbeans-8.2-php-windows.exe или netbeans-8.2-php-windows-x64.exe).

В процессе установки NetBeans:

  • принимаем соглашение
  • указываем путь размещения каталога NetBeans( можно оставить по умолчанию «С:Program Files\ NetBeans 8.2»)
  • галочку «contribute to the NetBeans project…» можно убрать.

Установленный NetBeans запускаем с рабочего стола, на котором должна появиться пиктограмма для запуска (или из папки «С:Program Files\ NetBeans 8.2\bin\netbeans.exe»).
NetBeans
Закрываем стартовую страницу.

2.2 Настройка IDE NetBeans

После запуска NetBeans в настройках Tools->Options (Сервис->Параметры) нужно:

  • на вкладке General (Общие) выбрать браузер по умолчанию, который будет использоваться при запуске web-страниц (например, встроенный – «Embedded WebKit Browser«);  галочку с «Usage Statistics» («Использовать статистику«) можно убрать;
  • в разделе PHP на вкладке «General» («Общие«) указать «PHP 5 Interpreter» («Интерпретатор PHP 5«) как «C:\xampp\php\php.exe«;
  • там же » Global Include Path«, «Use the Following Path by Default» («Полный путь«, «Путь по умолчанию«) установить как  « C:\xampp\htdocs«.
  • в разделе PHP на вкладке «Debugging» («Отладка«) указать номер порта, который  указан  в файле C:\xampp\php\php.ini (обычно 9000) и убрать галочку с флажка «Stop at first line» («Останавливаться в первой строке» ) и поятавить галочку возле  «Watches and balloon evaluations».  Значение «netbeans-xdebug» остается по умолчанию.

Далее рекомендуется в используемом файле C:\xampp\php\php.ini задать output_buffering = оff, чтобы предотвратить задержку выводов сценариев.

В файле «c:\Program Files\NetBeans 8.2\etc\netbeans.conf» рекомендуется в строке «netbeans_default_options=…» дописать значение для задания кодировки по умолчанию:

-J-Dfile.encoding=UTF-8

Кроме того, выбрав пункт меню Tools->Templates (Сервис->Шаблоны), можно по необходимости редактировать шаблоны создаваемых файлов.  Также настойки Tools->Options (Сервис->Параметры) позволяют настраивать форматирование документов в редакторе, «горячие» клавиши, вид и размещение окон и др.

Расширить возможности IDE можно с помощью установки плагинов.

Рекомендуется установить плагин Emmet, предоставляющий возможность писать блоки кода HTML и CSS, используя сокращения. Для этого его нужно скачать (http://plugins.netbeans.org/plugin/48315/emmet или http://download.emmet.io/org-lorenzos-emmet.nbm). Затем в NetBeans выбрать Tools->Plugins->Downloaded ->Add Plugins… , затем —  выбирать скачанный файл,  нажать  кнопку Install,  после этого — перезапустить Netbeans.

Также см. Справочник EMMET сокращений для ускорения верстки

2.3 Создание и запуск проектов в среде NetBeans

Создать новый проект  в среде NetBeans можно следующим образом.

Выбрать пункт меню File->New Project (Файл->Создать проект).

На следующей вкладке – выбрать пункт PHP и указать имя проекта, по умолчанию — PhpProject1.

Далее — указать в Sources Folder путь к проекту:

C:\xampp\htdocs\PhpProject1

На следующей вкладке в поле Run as можно указать вариант запуска по умолчанию проекта: как web-сайта или как скрипта в командной строке.

Далее, если не требуется подключать фреймворки и библиотеки, можно не заходить на вкладки PHPFrameworks и Composer, а сразу нажать на кнопку Finish.

После этого откроется файл «index.php» с кодом:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <?php
        // put your code here
        ?>
    </body>
</html>

Вместо строки // put your code here в файл «index.php» можно вписать, например,  строчку

echo "Hello, html!";

и запустить проект на выполнение — либо нажав на зеленую стрелку верхней панели инструментов

php

либо через пункт меню Run->Run File.

В этом же проекте можно создавать другие файлы PHP,  а также страницы HTML и CSS, файлы JavaScript.

Открыть существующий проект NetBeans можно через пункт меню File->Open Project (Файл->Открыть проект).

Можно создать проект на основе существующей папки с файлами PHP и HTML. Для этого нужно также выбрать пункт меню File->New Project (Файл->Создать проект), далее — указать пункт PHP Application with Existing Sourses, затем — выбрать нужную папку.

Можно также экспортировать или импортировать проект в виде zip-файла.

Дополнительно настроить запуск проекта можно, нажав на кнопку выпадающего списка в разделе главного меню
php
и выбрав вместо «<default>» («<по умолчанию>«) пункт «Customize» («Пользовательская«) и затем настроить «Run configuration«. Для этого в пункте «Configuration» («Конфигурация«) выбрать «New» («Новый«), задать название (например, «Web«для варианта web-сайта и «Script» для варианта запуска проекта как скрипта в командной строке) и для каждого из вариантов выбрать «Run as» («Запускать как«) как web-сайт и как скрипт соответственно.
php
Теперь можно попеременно запускать проект как сайт или как скрипт, выбирая соответствующий пункт из выпадающего списка в меню.

2.4 Отладка проектов в среде NetBeans

Использование редактора NetBeans и панели инструментов отладчика при отладке обеспечивает пошаговое выполнение кода с просмотром конкретных значений переменных.

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

  • Завершение сеанса отладки
  • Приостановка сеанса отладки
  • Возобновление сеанса отладки
  • Переход к следующему оператору выполнения
  • Переход к вызову функции
  • Выход из текущего состояния вызова функции
  • Запуск выполнения с позиции курсора

Для каждого из описанных действий на панели инструментов отладчика имеется соответствующая кнопка.

Точки останова, установленные в файлах, указывают позицию, в которой отладчик должен прервать выполнение кода. Для установки точки останова нужно щелкнуть в левом поле редактора строку, в которой необходимо установить эту точку. Если отладчик во время работы достигает точки останова, отладка приостанавливается, что позволяет просмотреть значения в окнах отладки (в WatchesОкна, или VariablesПеременные). Также можно навести мышь на идентификатор или выражение PHP для отображения их значения. Все окна отладки можно вызвать из среды IDE путем выбора Window -> Debugging (Окно-> Отладка).
php
Чтобы удалить точку останова, нужно щелкнуть маркер точки останова. Также можно временно отключить точки останова. Для этого нужно щелкнуть правой кнопкой мыши значок точки останова и снять выделение: Breakpoint->Enabled (Точка останова -> Включено). Выполняется переключение точки останова в отключенное состояние, после чего маркер выделяется серым.

Дополнительно см.:

2.5 Установка IDE Apache NetBeans

Организация Apache Software Foundation, которой был передан кода NetBeans компанией Oracle, представила IDE Apache NetBeans. IDE содержит поддержку языков программирования Java, PHP, JavaScript и Groovy. В настоящее время проект Apache NetBeans (incubating) 11.0 находится в инкубаторе Apache, в котором проводится подготовка проеькта и проверка соблюдения принципов разработки.

Для установки IDE потребуется наличие Java Development Kit версии 8, получить которую можно на странице сайта компании Oracle Java SE Development Kit 8 Downloads. В настоящее время для получения ресурса требуется создание учетной записи.

Скачанный архив incubating-netbeans-11.0-bin.zip нужно раскрыть, далее — запустить на выполнение файл из папки netbeans netbeans64.exe. После запуска среды требуется выбрать пункт меню Tools->Options, затем перейти на вкладку PHP, далее средой будет предложено установить необходимый плагин JavaScript Parser.

3 Редактор Visual Studio Code

3.1 Visual Studio Code

Visual Studio Code

Visual Studio Code — кроссплатформенный редактор кода, созданный в Microsoft, вышел относительно недавно, но уже завоевал популярность. Visual Studio Code распространяется бесплатно. Поддерживает базовые возможности IDE и позволяет обойтись без полной интегрированной среды разработки. В редакторе присутствуют встроенный отладчик, инструменты для работы с Git, автодополнения, контекстная подсказка и многое другое.

Установка редактора Visual Studio Code

  • Скачать инсталляцию Visual Studio Code с сайта https://code.visualstudio.com
  • Запустить файл VSCodeUserSetup-x64-1.27.1.exe
  • Проставить галочки:
    • Create a desctop icon
    • Add Open with Code action … — обе
  • install

Интерфейс VS Code

Интерфейс VS Code разделен на четыре основных блока:

  • Editor — редактор, основной блок для редактирования файла
  • SideBar — файлы проекта
  • StatusBar — показывающий информацию о текущем статусе
  • ViewBar — позволяющий переключаться между режимами сайдбара и индицирующий с помощью иконок различную информацию, например количество исходящих git изменений

Палитра команд

Вызов палитры команд — Ctrl+Shift+P

  • Ввод в строке палитры знака вопроса («?») дает перечень возможных команд
  • Ctrl+P — навигация к нужному файлу
  • Ctrl+Tab — список всех файлов которые недавно открывались
  • Ctrl+Shift+O — переменные и функции (методы) в файле
  • Ctrl+G навигация к строке в файле по ее номеру
  • Ctrl+\ — разбивает экран на два, редактирования на экране до трех файлов одновременно
  • Ctrl+Space — окно подсказки
  • Shift+F12 или Alt+F12 — посмотреть на определение символа или ссылки на него
  • Ctrl+Shift+X — быстрый доступ к расширениям
  • Shift+Alt+F — форматирование кода

Поиск

Ctrl+Shift+F — поиск. Поддерживаются регулярные выражения.
Ctrl+Shift+J — расширенный поиск с возможностью задать дополнительные критерии поиска.

Автоматическое сохранение

Можно включить режим автоматического сохранения (Auto Save) из меню File->Auto Save, или нажав Ctrl+Shift+P и набрать «auto»

Изменить язык пользовательского интерфейса

  • Открыть VS Code
  • Нажать F1 и ввести «язык»
  • Выбрать «Настроить язык» в меню
  • Изменить значение ‘locale’ — выбрать одну из возможных вариантов строк
    •  «locale»:»en-US»
    •  «locale»:»ru»
  • Сохранить
  • Перезапустить VS Code

Функциональные клавиши

  • F2 — изменение имени функции (метода) или переменной
  • F12 — подсказка по символу (его определение), Ctrl+hover по символу — его определение в дополнительном окне.

Встроенные возможности VS Code

VS Code содержит мощную систему анализа кода для автодополнений и подсказок – IntelliSense.
VS Code также поддерживает Emmet по умолчанию:

Расширения VS Code 

Расширить функциональность VS Code можно с помощью расширений. Некоторые популярные расширения требуют установки программной платформы Node.js  (Recommended For Most Users).

Рекомендуемые расширения

  • AutoFileName — автодополние пути
  • open in browser — открыть в браузере по выбору
  • Auto Rename Tag — переименование парных тегов
  • Prettier (Prettier  Code Formattre), Beautify — переформатированный вариант кода, выглядящего так, как он должен выглядеть в соответствии с заданными правилами

Дополнительные расширения

  • Path Intellisense — автодополнение пути к файлу
  • Regex Previewer — работа с регулярными выражениями
  • SVG Viewer — просмотр изображений SVG
  • minify — сжатие кода
  • Faker — Для быстрой вставки случайных данных при помощи библиотеки Faker
  • Code Spell Checker — проверка орфографии в коде.

Можно настроить форматирование  файлов при сохранении. Для этото нужно зайти в Setting (File->Preferences->Setting или значок шестеренки в левом нижнем углу), выбрать закладку User, Text Editor->Formatting, далее нужно поставить птичку на пункте Format on save.

Примечание. Если установлено несколько плагигнов, форматирующих текст, то вначале необходимо указать, который из них должен отвечать за форматирование. В таком случае, при попытке отформатировать текст с помощью Format Document будет предложено конфигурировать форматирование. После выбора конкретного плагина он в дальнейшем будет форматировать код по умолчанию.

Отладка кода. Расширение Debugger for Chrome

Для отладки можно воспользоваться расширением Debugger for Chrome.
Поставив расширение, нужно сконфигурировать файл launch.json. Для этого:

  • Нажать на значок Debug (значок жука на панели слева)
  • Нажать на значок шестеренки, при этом открывается конфигурационный файл launch.json
  • В файл занести следующую конфигурацию:
    {
       "version": "0.2.0",
       "configurations": [ 
         {
           "name": "Launch index.html",
           "type": "chrome",
           "request": "launch",
           "file": "${workspaceFolder}/index.html"
         },
       ]
    }
  • Перезагрузить VS Code.

После этого появляется возможность отладки кода непосредственно в редакторе, запуская отладчик либо с помощью зеленой стрелки, либо кнопки F5. Можно ставить точки прерывания, просматривать значения текущих переменных в окне WATCH, проходить скрипт по шагам, отслеживать сообщения консоли.

Подробнее:

Дополнительные возможности VS Code

Некоторые популярные расширения, такие как JSHint (проверяет отвечает ли написаный код стандартам программирования) и ESLint (дает возможность выводить сообщения об ошибках прямо в редакторе, а также быстро исправлять ошибки) требуют установки программной платформы Node.js  (Recommended For Most Users).

Расширение Live Server (быстрое отображение в браузере) также требует наличия установленного сервера NodeJS.

Также в VS Code возможна удаленная отладка кода.

Темы VS Code

Сменить тему редактора VS Code можно, выбрав нужную тему из пункта меню File > Preferences > Color Theme или сочетанием клавиш Ctrl+K+T .

Можно установить новую тему разработки  (аналогично расширениям), например, Monokai Dark Soda.

Также можно установить расширение Extension Marketplace, поставляющее на выбор дополнительное количество тем, просмотреть которые можно, набрав сочетание клавиш Ctrl+Shift+X.

Есть возможность создать собственную тему.

См.:

Дополнительно см.:

3.2 Работа с кодом php в редакторе Visual Studio Code

Работу с PHP можно настроить и в редакторе

Прежде всего, нужно установить расширение PHP Debug.

Далее требуется указать путь к интерпретатору PHP.

Для этого нужно открыть пользовательские настройки с помощью панели команд:

  • Выбрать пункт меню  File -> Preferences -> Settings. (или нажать клавишу F1)
  • ввести «user» и нажать Enter
  • перейти к User settings
  • из списка выбрать раздел Extensions -> PHP.
  • найти строчки
PHP › Validate: Executable Path
Points to the PHP executable.
Edit in settings.json
  •  Далее — нажать на ссылку settings.json, откроется файл с настройками.
  • Чтобы настроить путь к исполняемому файлу PHP, нужно указать его в файле пользовательских настроек в правой части User Setting:
"php.validate.executablePath": "c:xampp/php/php.exe"

Весь файл настроек может выглядеть, например, так:

{
  "liveServer.settings.donotShowInfoMsg": true,
  "window.zoomLevel": 0,
  "launch": {
    "configurations": [
    {
      "type": "php",
      "request": "launch",
      "name": "Run using local PHP Interpreter",
      "program": "${file}",
      "runtimeExecutable": "c:\\xampp\\php\\php.exe"
    }],
    "php.validate.executablePath":"c:\\xampp\\php\\php.exe"
  }
}
После этого путь к интерпретатору PHP будет включен для всех файлов PHP, и запустить файл php на выполнение можно с помощью клавиши F5 или по нажатию на стрелку возле Run в левом верхнем углу и выбору команды Run using local PHP Interpreter. После этого скрипт будет выполнен, и в закладке TERMINAL, расположенной внизу редактора, будет выведен результат выполнения программы.
Рекомендуемые плагины:

После установки PHP formatter файл настроек может быть дополнен кодом:

  "editor.formatOnSave": true,
  "phpfmt.php_bin": "c:\\xampp\\php\\php.exe"

Тогда форматирование кода будет осуществляться при сохранении.

Tutorial for Setting up phpfmt extension for Visual Studio Code: https://www.youtube.com/watch?v=cXGZ8nhH-TM

3.3 Отладка кода php в редакторе Visual Studio Code

Для настройки отладки кода в редакторе Visual Studio Code нужно перейти на вкладку в левой панели с изображением жука, и по нажатию на стрелку возле Run в левом верхнем углу выбрать пункт Add Configuration. Будет сформирован файл launch.json, который позволит настроить отладку XDebug.

Код  файла  launch.json может быть таким:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
        "version": "0.2.0",
        "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000,
            "runtimeExecutable": "c:\\xampp\\php\\php.exe"
        }   
   ]
}

После этого можно установить режим отладки Launch currently open script (с помощью серой  стрелки вниз возле зеленой стрелки в левом верхнем углу).  После этого с помощью зеленой стрелки будет запускаться скрипт в режиме отладки (работа интерпретатора PHP).

Результат работы кода будет отображаться в панели DEBUG CONSOLE.

Можно запускать работу скрипта по шагам (с заходом в функции и без захода), останавливать выполнение скрипта с помощью красной кнопки, запускать далее до ближайшей точки останова или до конца программы с помощью синей стрелки.  Кроме того, можно отслеживать  текущее состояние переменных в разделах Variables и Watch на левой панели.

Также можно добавить точку прерывания программно:

xdebug_break();

Для запуска в браузере Chrome можно создать такую конфигурацию:

{
     "type": "chrome",
     "request": "launch",
     "name": "Launch Chrome",
     "cwd": "${workspaceRoot}",
     "url": "http://localhost:80/URL/",
}

Где URL — папка проекта, находящегося в папке htdocs.

Для дебага сайта, развернутого непосредственно в браузере, используется конфигурация

{
     "name": "Listen for XDebug",
     "type": "php",
     "request": "launch",
     "port": 9000
}

Полная конфигурация файла launch.json может иметь вид:

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:80/testVSCode/index.php",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch index.html",
      "type": "chrome",
      "request": "launch",
      "file": "${workspaceFolder}/index.html"
    },
    {
      "name": "Listen for XDebug",
      "type": "php",
      "request": "launch",
      "port": 9000
    },
    {
      "name": "Launch currently open script",
      "type": "php",
      "request": "launch",
      "program": "${file}",
      "cwd": "${fileDirname}",
      "port": 9000,
      "runtimeExecutable": "c:\\xampp\\php\\php.exe"
    }
  ]
}

См.:

4 Задания на самостоятельную работу

  1. Произвести настройку интегрированной среды разработки для PHP на домашнем компьютере (XAMPP, NetBeans).
  2. Создать и пошагово отладить программу, вычисляющую сумму произведений двух пар чисел (a*b + c*d).