Как настроить VS Code для разработки на PHP

Че так долго = P.S. Словом, разлил газировку на ноут, был в депрессии, ай пофиг, начали.

1.C чего начать

Для работы с текстом вам нужен текстовый редактор (World), для обработки фотографий вам нужен графический редактор (Photoshop), для программирования требуется IDE(интегрированная среда разработки).

IDE – это комплекс программных средств для разработки ПО, такие как

a.Текстовой редактор (Ну это просто, это там, где мы пишем код)

b.Компилятор/интерпретатор (переводит наш код в машинный код, способный к выполнению процессором)

c.Средства автоматизации сборки (Помогает собрать наш проект. К примеру, в исполняемый .exe файл)

d.Отладчик/Debugger (Можно ставить всякие точки остановки (breakpoint и watch) чтобы отслеживать, что выполняет код на данной строчке кода)

Под C# основной IDE является Visual Studio (Community является бесплатной, и в принципе там есть практически всё). Но(!) в наших уроках мы будем писать в Visual Studio Code (редактор кода).

Итак, определились. Скачиваем Visual Studio Code (https://code.visualstudio.com/)

Нажимаем на нужную кнопку “Windows” и скачиваем установщик. Там всё стандартно, ставим галочку В«Добавить в PathВ».

А затем скачиваем .NET Core SDK (https://dotnet.microsoft.com/download). Просто ждем установки, после установки вроде потребуется перезагрузить ПК, я уже не помню.

Далее запускаем VSCode, переходим на вкладку Extension и устанавливаем расширение для VSCode ->C#. Для этого нужно в поиске расширений просто написать C#

Далее создаем какую-нибудь папку, где у нас будет проект, и открываем эту папку в VSCode File->Open Folder…

Далее нам нужно создать консольное приложение на языке C#. Переходим по этой ссылке, https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-ne…, и находим среди всех команд ту что нужно.

Далее в VSCode выбираем меню Terminal->New Terminal и пишем туда команду

dotnet new console

Ждем и затем пишем

dotnet restore

чтобы скачались нужные компоненты (требуется один раз). Далее пишем

dotnet run

и в терминале происходит запуск нашей программы. Выглядит не Айс, поэтому идет до конца.

Запускаем нашу программу Debug-Start Debugging. Выбираем (.NET Core), чем будем компилировать наш код и открывается окно настройки.

В данном окне настройки поменяем строку

«console»: «internalConsole»,

на

«console»: «externalTerminal»,

Затем добавляем в наш код следующий код Console.ReadLine(); и вновь запустим Debug-Start Debugging. Мы должны увидеть следующее

Конечно, это не конечный вариант, конечный вариант будет в виде видеоурока на youtube (писать что и как устанавливать, это конечно же жесть) https://www.youtube.com/channel/UCxHlqdzYPZCKHTDWFZ895Qg?vie…. Спасибо за внимание.

1225 Январь 2019

Разберём, как установить и настроить новый редактор кода vs code.

Заходим на официальный сайт программы код вс и скачиваем установщик.

Программа работает под windows, mac os и linux.

После загрузки нас перекинет на страницу с документацией.

Вернёмся к программе vs code и запустим её.

Плагины для vs code

Поменять язык в vs code Система вс кода сама определит, что на компьютере установлен русский язык и предложит установить языковой пакет.

Вручную установить можно из панели управления выбрать пункт меню расширения.

В поле ввода пишем слово russian.

Найдутся плагины для языка, устанавливаем языковой пакет.

All autocomplete плагин помогает сразу писать класс в css, не вспоминая как он был в html.

Autoprefixer помогает расставлять префиксы в css.

Beautify. Если код поехал, стал не упорядочен, то мы запускаем плагин Beautify и он расставляет всё по правилам.

Bootstrap v4 snippets. Готовые участки кода от четвертой версии Bootstrap.

Помогает быстро вставить кнопку, форму или прогресс бар через поиск сниппета.

Eslint. Позволяет проверять правильно ли написан javascript код.

8 GitHub.

Live Sass compiler. Компилирует внутри программы вс код файлы стилей.

Sass.

Twig расширение даёт подсветку кода при работе с шаблонами open cart.

12 GistExtension. Эта функция позволяет использовать свои Gist.

Заходим или регистрируемся на сайт GistGithub.

Внутри мы создаём свои кусочки кодов, которые могут понадобиться.

В вс коде зажимаем клавишу F1 выбираем gist open block, и мы увидим все наши кусочки кода, которые можем добавить в наш проект.

Не терять время их искать.

Также когда мы написали новый код, который может быть, понадобиться в будущем, то сохраняем его в интернет через create new block.

Проверяем, появился ли он на сайте GitHub.

Настройка параметров vs code

Слева редактора будет панель ActivityBar, она даёт доступ к отладке и к установке расширений.

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

• Ctrl b открыть панель, повторное нажатие закрыть.
• Клавишей ctrf+shift+f вызываем панель поиска.

Для настройки редактора перейдём в файл settings и видим выпадающее меню параметров, нажимаем на этот пункт.

Поменяем несколько параметров, которые улучшают работу в редакторе вс код.

В верхней части в поле поиска пишем:

1. StatusBar параметр, который отвечает за отображение нижней полоски редактора. Отключаем его visible в положение false.
2. MenuBar отображает строку меню. Делаем этот параметр выпадающим toogle при нажатии горячей клавишей alt.
3. ActivityBar параметр убирает боковое меню. Отключили все меню.
4. Minimap отображает в редакторе кода маленькую копию странички с кодом. Помогает быстрее искать нужные строки, если длинный код.
5. DefaultLanguage параметр, который задаёт тип новому документу при создании ctrl+n. В поле этого параметра напишем значение html.
6. FontSize размер шрифта, как в html, выставим 16.
7. TabeSize выставим два, по умолчанию 4.
8. DetectIndentation полоски отображения расстояний между Tabs в коде. Мы используем препроцессор sass, поэтому для понимания, на каком уровне находится стиль блока используем их.
9. InsertSpaces отвечает за жёсткую или мягкую табуляцию. Делаем, чтобы вместо пробелов вставлялись tab. Отключаем параметр и проверяем, что пропали пробелы внутри одного Tab.
10. Folding отключает сворачивание и разворачивание кода.
11. GlyfMargin отображает поля глифа в редакторе вс кода. Это поле используется для debug отладки javascript, python, c и других языков программирования. Можно это поле отключить.
12. SmoothScrolling делает плавное перемещение курсора мыши в редакторе кода vs code.

Emme для вс кода

Emmet встроенный плагин работает вначале как подсказка структуры, которая будет. Как можно быстро верстать плагином emmet читать тут.

Клавишей Tab разворачивается код.

Терминал в вс коде

Консоль кода очень удобна.

Вызываем её через меню терминал, создать Terminal.

Пишем команду gulp и изнутри запускается окно с нашим проектом. Нет лишнего действия, когда нужно переходить в консоль.

В параметре пользователя Terminal.integrated можно поменять консоль на другую.

Тему для цветовой схемы также можно менять в настройках.

По умолчанию, стоит лучшая тема с цветами.

Как проверить встроенный live reloader? В нижней части экрана есть кнопка Go live нажимаем её и сразу открывается окно браузера.

Переходим на новый редактор кода vs code и делаем настройки под себя.

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

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

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

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

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

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> 

Semicolon Insertion Shortcut

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

Extra

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

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

  

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

  

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

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

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

• story/c_urok_1_ustanovka_visual_studio_code_6987987
• https://sdelatlending.ru/nastrojka-vs-code.html
• https://guides.hexlet.io/vscode-for-php-setup/