Настройка VS Code для верстки
Сегодня мы рассмотрим установку и настройку Visual Studio Code для верстки. В результате мы получим удобную, лаконичную рабочую среду с необходимыми плагинами, которые я использую в своей работе. VS Code в настоящее время является самым популярным редактором кода благодаря широкому функционалу, кроссплатформенности, огромному сообществу разработчиков как самого редактора, так и расширений для него и открытой лицензии. Этот редактор я могу смело рекомендовать к использованию.
Поделиться Отправить Класснуть Запинить
![]()
![]()
Материалы урока и полезное
- Visual Studio Code: Страница редактора
- Simple Starter: Ознакомиться и скачать
- Урок по GitHub Gist: Ознакомиться с уроком
- Архив с настройками: Скачать
- Верстка с Emmet: Смотреть урок
Рекомендуемые расширения
- CSS Peek
- eCSStractor for VSCode
- Gist
- Sass
- HTML to CSS autocompletion
- IntelliSense for CSS class names in HTML
- Live Server
- One Dark Pro
Пресет настроек settings.json
< "emmet.extensionsPath": [ "~/AppData/Roaming/Code/User/emmet" ], // "php.validate.executablePath": "D:/OSPanel/modules/php/PHP_8.1/php.exe", // "terminal.integrated.defaultProfile.windows": "Git Bash", // "terminal.integrated.defaultProfile.windows": "Ubuntu (WSL)", "workbench.startupEditor": "none", "editor.smoothScrolling": true, "editor.fontSize": 16, "editor.minimap.enabled": false, "breadcrumbs.enabled": false, "editor.renderControlCharacters": true, "editor.tabSize": 2, "workbench.activityBar.visible": false, "files.defaultLanguage": "html", "git.ignoreMissingGitWarning": true, "editor.detectIndentation": false, "editor.folding": false, "editor.glyphMargin": false, "editor.parameterHints.enabled": false, "editor.hover.enabled": false, "terminal.integrated.fontSize": 16, "editor.renderWhitespace": "boundary", "editor.lineHeight": 23, "liveServer.settings.donotShowInfoMsg": true, "liveServer.settings.donotVerifyTags": true, "security.workspace.trust.enabled": false, "editor.linkedEditing": true, "editor.bracketPairColorization.enabled": true, "editor.wordSeparators": "`~!@#$%^&*()=+[\\|;:'\",.<>/?", "emmet.triggerExpansionOnTab": true, "editor.insertSpaces": false, "git.openRepositoryInParentFolders": "never", "editor.cursorSmoothCaretAnimation": "on", "explorer.confirmDelete": false, "workbench.colorTheme": "One Dark Pro Darker", "ecsstractor_port.add_comment": false, "ecsstractor_port.empty_line_before_nested_selector": false >
Как настроить VS Code для разработки на PHP

Так может выглядеть интерфейс редактора после установки расширений
- Основные возможности
- EditorConfig for VS Code
- PHP Intelephense
- PHP Debug
- PHP Sniffer
- Semicolon Insertion Shortcut
- Extra
Основные возможности
- отладчик кода
- встроенный терминал
- удобные инструменты для работы с 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 [*. ] indent_size = 2 [ ] indent_style = space indent_size = 2 [lib/**.js] indent_style = space indent_size = 2
PHP Intelephense
В редакторе уже есть поддержка синтаксиса и подсказок стандартных функций языка. Но без специального дополнения редактор не будет подсказывать пользовательские функции из других частей проекта. Поэтому для поддержки автодополнения, анализа кода, перехода к месту, где создана функция/класс/переменная (с помощью шортката Alt+Click ), используется дополнение PHP Intelephense
Чтобы подсказки не дублировались необходимо отключить встроенную в редактор поддержку кода для PHP: Extensions -> Search @builtin php -> PHP Language Features -> Disable
PHP Debug
При разработке может возникнуть ситуация, когда простых функций отладки и логирования становится недостаточно. Тогда может помочь специальный инструмент — Дебаггер. Для PHP есть расширение xdebug, которое позволяет расставить точки останова и посмотреть окружение в предполагаемом месте ошибки, выполняя код поэтапно либо до следующей точки.
Чтобы воспользоваться 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 — моноширинный шрифт, в котором используются лигатуры (объединяет несколько символов в один) для общих комбинаций символов в программировании. Визуальная надстройка для более удобного чтения кода.
Форум
Здравствуйте. В мануале ничего не нашёл, прошу совета здесь.
Как сделать php openserver исполняемым в терминале VS Code?
Строка «php.validate.executablePath»: «E:\\OS\\OpenServer\\modules\\php\\PHP_8.0\\php.exe» в настройках редактора ситуации не меняет, добавление его в закладки openserver-a тоже.
Как быть? Не переключаться же постоянно между встроенным терминалом и редактором?
flipper Сообщения: 2 Зарегистрирован: 26 дек 2021, 18:44
Re: Терминал VS Code
Спасибо, что не ответили. А то, наверное, и дальше бы годами сидел на этих костылях вместо реального прокачивания скиллов в профессии
Максим Сообщения: 6022 Зарегистрирован: 11 дек 2010, 20:29
Re: Терминал VS Code
Думаю дело в том, что здесь банально никто не пользуется сием редактором, поэтому и ответить вам было некому. Сам ответ гуглится за минуту, полагаю скилл по поиску инфы в сети вам стоит прокачать в первую очередь
Не удается проверить так как не задан исполняемый PHP-файл
При сохранении php-файла в Visual Studio Code может возникнуть следующая проблема у новичков и не только.
Не удается проверить, так как не задан исполняемый PHP-файл. Используйте параметр php.validate.executablePath, чтобы настроить исполняемый PHP-файл.

Эта ошибка сообщает о том, что VS Code не может проверить php-файл на ошибки, т.к. не находит исполняемый файл php. Следовательно, нам нужно указать путь до исполняемого файла.
Раз уж вы открыли php-файл, следовательно, вероятнее всего вы используете какой-то локальный сервер. От того какой, будет зависеть путь до исполняемого файла.
Я использую Open Server, в моём случае путь будет следующим:
"D:\\_SERVER\\OSPanel\\modules\\php\\PHP-7.1-x64\\php.exe"
У вас путь возможно будет другим, зависит от того какой локальный сервер вы используете и какую версию php вы выбираете.
Теперь нам нужно указать в Visual Studio Code данный путь до файла php.exe .

Или используя горячие клавиши: CTRL + ,
Находим через поиск параметр:
php.validate.executablePath
Нажимаем карандаш чтобы изменить настройку.

Вводите свой путь до файла php.exe .

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
- Git SSH Windows — пошаговое руководство
- Настройка Gulp Babel
- Микроразметка сайта
- Как перенести сайт WordPress на хостинг
- Настройте показ всего текста во время загрузки веб-шрифтов
- Сниппеты в VS Code
