В сложившейся ситуации с покупкой продуктов JetBrains на территории РФ задумался об альтернативе одному из их продуктов PHPStorm. Давно слышал много хороших отзывов о VSCode и решил попробовать поработать в нем недельку. Начал с изучения доступных расширений и их настройки. В итоге мне удалось собрать под себя очень достойную альтернативу PHPStorm. В чем-то она хуже, в чем то лучше продукта от JetBrains, но для себя я решил пока остаться на VSCode. Ниже я поделюсь с вами расширениями, которые использую и настройками.
Начинаем с установки Visual Studio Code. Для этого нужно скачать установщик с официального сайта. После установки мы получим голый VSCode.
При желании можно установить языковый пакет, который локализует интерфейс приложения.
Установка расширений
Менеджер проектов
По умолчанию в VSCode нет привычной работы с проектами, но эту проблему легко решить используя расширение Project Manager. Чтобы создать проект открываем папку с файлами, которую хотим использовать как проект, нажимаем ctrl+shift+P, в появившейся строке вводит Project и выбираем выделенный ниже элемент списка.
Будет предложено ввести имя проекта.
После подтверждения проект будет создан и его можно будет увидеть в разделе с проектами.
При клике на проект VSCode сразу откроет папку, к которой был привязан проект.
Расширения для PHP
Для комфортной работы с PHP необходимо установить эти расширения:
- Для отладки через XDebug
- Для удобной работы с кодом PHP Intelephense (Очень советую приобрести Premium версию)
- Альтернатива предыдущего расширения для работы с кодом PHP IntelliSense (На мой взгляд хуже предыдущего)
- Для работы с DocBlock PHP DocBlocker
- Для автовставки Namespace PHP Namespace Resolver
- Для генерации getters и setters
- Генератор конструктора PHP Constructor
- Добавляет генерацию классов, интерфейсов, трейтов, enum при создании нового файла PHP Create Class
- Вставка подсказок type hints и входных параметров PHP Parameter Hint
- Для работы с Composer
- Для подсказок пакетов и версий в composer.json Composer IntelliSense
- CSFixer по желанию, требуется установленный на машине PHP
Если включить одновременно IntelliSense и Intelephense, то будут задвоены подсказки методов и аннотации с описанием функций.
После установки расширений нужно отключить базовые подсказки PHP VSCode. Для этого нужно в расширениях в поисковой строке ввести @builtin php и отключить расширение PHP Language Features.
Расширения для Symfony
Symfony for VSCode
Symfony Console Run All Symfony Commands
Symfony code snippets And Twig Support & Yaml
Расширения для Laravel
Laravel Artisan
Laravel Blade Snippets
Laravel Blade Spacer
Laravel Extra Intellisense
Laravel Goto Controller
Laravel goto view
Laravel Snippets
Работа с тэгами
Для удобства работы с HTML, XML и прочими документами с тэгами:
- Auto Rename Tag
- Auto Close Tag
- Auto Complete Tag Ставит сам два расширения выше
Встроенный Rest Client
Rest client по аналогии с тем, что был добавлен в PHPStorm
REST Client.
Thunder Client - встроенный клиент, похожий на Postman.
Работа с проектом по FTP/SFTP
Для работы с проектами на удаленных машинах нужно установить расширение SFTP. Оно добавляет возможность в проектах добавлять SFTP конфиг, в котором можно указать опции синхронизации.
Системы контроля версий VCS
Для работы с Git, пожалуй, лучшее расширение GitLens — Git supercharged.
Для отображения веток в виде графа Git Graph.
Для удобного просмотра истории Git History.
Для работы с GitLab и проведения CodeReview есть хорошее официальное расширение GitLab Workflow.
Есть еще интересный проект New Relic CodeStream, но мне не нравится, что там нужна регистрация и части кода, который комментируется, сохраняются на их серверах.
Верстка и шаблонизаторы
Для быстрого составления HTML Emmet
Для поддержки синтаксиса TWIG Twig Language 2
Для удобной работы с CSS CSS Peek
JavaScript (ES6) code snippets JavaScript (ES6) code snippets
Работа с СУБД
Для работы с СУБД из VSCode SQLTools Есть драйвера для всех популярных СУБД (ставятся отдельными расширениями).
Работа с Docker
Для удобной работы с контейнерами, сетями, образами, voluems и т.д. есть отличное расширение от Microsoft Docker.
Документация
Для работы с Markdown markdownlint
Для предпросмотра Swagger прямо в IDE Swagger Viewer
Автоподсказки для написания Swagger Swagger Snippets
Форматирование и читаемый вид
Крутое расширение для форматирования и работы с XML от RedHat.
При нажатии правой кнопкой мыши в открывшемся меню появится новый блок для форматирования после установки расширения.
Альтернатива расширениею выше для работы c XML.
Форматирование JSON JSON Tools
Для форматирования нужно использовать комбинации славишь ниже:
- Ctrl(Cmd)+Alt+M для преобразования JSON в читаемый вид
- Alt+M для минимизализации JSON
Форматирование SQL SQL Formatter
При нажатии правой кнопки мыши по выделенному SQL в меню появится новый блок после установки расширения.
Для работы с GraphQL.
TODO и FIXME
Работая с PHPStorm многие из вас привыкли к удобному просмотру TODO и FIXME в виде списка по всему проекту. В VSCode для этой задачи есть два расширения.
Todo Tree - очень удобное расширение, позволяет видеть все TODO в виде списка, огромные возможности кастомизации отображения, возможность добавлять свои тэги.
TODO Highlight - расширение попроще предыдущего, но также позволяет кастомизировать отображение и добавлять свои тэги. На мой взгляд менее удобно реализован листинг TODO по проекту.
Работа с таск-трекерами
Для быстрой работы с задачами прямо из VSCode для себя использую эти расширения:
- Redmine - позволяет быстро просматривать список задач, менять статусы и трекать затраченное время;
- YouTrack - позволяет смотреть задачи, создавать ветки при открытии задачи, MR и прочее;
- YouTrack Issues - попроще предыдущего, но мне он нравится больше, так как сосредоточен только на работе с задачами и более удобный листинг задач;
- Jira and Bitbucket - официальное расширение, которое отлично реализует работу с задачами в Jira и Bitbucket.
Темы
В магазине VSCode есть большой выбор тем. Мне больше всего нравится во всех IDE Twilight Twilight Theme Многим нравится GitHub Theme. В целом в магазине каждый найдет что-то на свой вкус.
Если вы обычно работаете с несколькими окнами VSCode одновременно, то вас может заинтересовать расширение Peacock, которое позволяет задать окнам IDE разную палитру и проще ориентироваться в открытых проектах.
Прочее
Total Lines - добавляет в тулбар информацию, о количестве строк в файле.
Regex Previewer - быстрая отладка регулярных выражений прямо в VSCode.
Bookmarks - для удобных флажков на строчки кода.
Better Comments - кастомизация комментариев в коде.
Edit CSV - просмотр и редактирвоание CSV.
Hungry Delete - быстрое удаление пустых строк и пробелов одним нажатием.
Path Intellisense - автоподставление путей к файлам.
Настройки
Посе установки всех необходимых расширений необходимо произвести некоторые настройки в самом settings.json VSCode и в проектах настроить файлы-конфигурации расширений для их использования.
Базовые настройки VSCode
Для комфортной работы расширений нужно произвести настройки в главном settongs.json.
Для открытия его редактирования нужно набрать ctrl + shift + P и в строке ввести settings.json.
В выпадающем списке выбрать выделенный на скрине вариант.
Откроется глобальный settings.json для всего VSCode, в котором нужно добавить / обновить значение узлов, как показано ниже.
{
/ Если нужен прокси для выкачивания плагинов
"http.proxyStrictSSL": false,
"http.proxy": "http://proxy-host.ru:3128",
"editor.rulers": [ 125 ], // Максимальное количество символов в строке. Рисуется вертикальная линия, как в PHPStorm
// Настройки, чтобы подсказки работали везде (аннотации и прочее)
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
"workbench.editor.labelFormat": "medium", // Показывать путь до файла в табе вкладки (long, medium, short, default)
"workbench.colorCustomizations": {
// Цвет текста у подсказок TypeHint
"phpParameterHint.hintForeground": "#757373",
// Цвет фона у подсказок TypeHint
"phpParameterHint.hintBackground": "#2b2b2b"
},
// Путь до интерпретатора PHP для линтеров (пример пути для Windows)
"php.executablePath": "D:/Users/user/php/php.exe",
"php.validate.executablePath": "D:/Users/user/php/php.exe",
// Путь до интерпретатора PHP для Symfony VSCode расширения
"symfony-vscode.phpExecutablePath": "/usr/local/bin/php",
// Чтобы в терминале поддерживался шрифт Menlo для Powerline
"terminal.integrated.fontFamily": "Menlo for Powerline",
// Отключаем отправку данных об использовании
"redhat.telemetry.enabled": false,
// Путь до исполняемого файла Composer
"composer.executablePath": "/usr/local/bin/composer",
// Переопределяем шаблоны исключения для расширения подсказок
"intelephense.files.exclude": [
"**/.git/**",
"**/.svn/**",
"**/.hg/**",
"**/CVS/**",
"**/.DS_Store/**",
"**/node_modules/**",
"**/bower_components/**",
"**/vendor/**/{Test,test,Tests,tests}/**/*Test.php"
],
// Чтобы Twig обрабатывался как HTML (расширение добавляет само)
"emmet.includeLanguages": {
"twig": "html"
},
// Настройки для расширения автозакрытия тэгов (расширение добавляет само)
"auto-close-tag.activationOnLanguage": [
"xml",
"php",
"blade",
"ejs",
"jinja",
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"plaintext",
"markdown",
"vue",
"liquid",
"erb",
"lang-cfml",
"cfml",
"HTML (EEx)",
"HTML (Eex)",
"plist"
]
}
Настройка SFTP / FTP подключения в проекте
Для настройки SFTP / FTP подключения в проекте нужно создать файл-конфигурацию sftp.json в проекте. Для этого нужно набрать ctrl + shift + P, в строке ввести SFTP: Config и выбрать выделенный ниже элемент списка.
Оптимальный файл-конфигурации приведен ниже.
{
"name": "Connection Name", // Название соединения
"host": "test.ru", // Адрес сервера
"interactiveAuth": true, // Чтобы работал 2fa (DUO, Мультифактор и т.п.)
"protocol": "sftp", // Протокол подключения к серверу
"port": 22, // Порт подключения к серверу
"username": "user", // Имя пользователя, под которым подключаемся
"privateKeyPath": "/Users/user/.ssh/id_rsa", // Путь к приватному SSH ключу на ПК
"remotePath": "/var/www/html", // Каталог, который нужно синхронизировать
"downloadOnOpen": true, // Скачивать файл с сервера при открытии
"uploadOnSave": true, // Загружать файл на сервер при сохранении
"ignore": [ // Список файлов и папок, которые нужно исключить из синхронизации
".vscode",
".idea",
".git",
".DS_Store",
"var"
],
"remoteExplorer": { // Список файлов и папок, которые нужно исключить из визора файлов на сервере
"filesExclude": [
"/var"
]
}
}
Для скачивания проекта файлов с сервера нужно ввести SFTP Download и выбрать выделенный ниже элемент списка.
При нажатии правой кнопкой мыши по файлу в дереве файлов в открывшемся меню есть блок скачки и выгрузки файла на сервер.
Настройка SQLTool
Для добавления подключения к СУБД нужно нажать ctrl+shift+P, в строке ввести SQLTool и выбрать выделенный ниже элемент списка.
Откроется ассистент настройки подключения
В итоге будет получен settings.json файл с параметрами подключения.
В одном проекте может быть несколько подключений к разным БД.
Для MySQL файл-конфиграции выглядит как приведено ниже.
{
"sqltools.connections": [
{
"mysqlOptions": {
"authProtocol": "default"
},
"previewLimit": 50, // Количество строк в превью
"server": "test.ru", // Адрес сервера СУБД
"port": 3306, // Порт СУБД
"driver": "MySQL", // Драйвер
"name": "ConnactionName", // Имя подключения в визоре
"database": "testdb", // Имя БД
"username": "user", // Пользователь БД
"connectionTimeout": 60, // Тайм-аут подключения в секундах
"password": "db_password" // Пароль пользователя БД
}
]
}
Настройка расширения XDebug
Для отладки PHP кода средствами Xdebug нужно составить файл-конфигурацию.
Для этого в меню Run нужно выбрать Add Configuration...
Откроется редактор launch.json.
Пример заполненного файла конфигурации для xdebug приведен ниже.
{
// Используйте IntelliSense, чтобы узнать о возможных атрибутах.
// Наведите указатель мыши, чтобы просмотреть описания существующих атрибутов.
// Для получения дополнительной информации посетите: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Listen for Xdebug", // Название дебаггера
"type": "php",
"request": "launch",
"pathMappings": {
"/application": "${workspaceFolder}/application" // Слева директория приложеиня
},
"port": 9005 // Порт, который слушает xdebug
}
]
}
По итогу работа отладчика будет выглядеть, как на скрине ниже
Настройка расширения Redmine
Для работы с задачами в таск-трекере Redmine в конфигурационном файле settings.json в каталоге .vscode проекта нужно добавить настройки ниже. После сохранения для работы нужно перезапустить VSCode.
"redmine.url": "https://redmine.example.ru", // Адрес Redmine
"redmine.apiKey": "ApiKey", // API Ключ Redmine
"redmine.rejectUnauthorized": true, // Если самоподписанные SSL сертификат
Настройка расширения Intelephense
Чтобы указать версию PHP у проекта для корректной работы линтера нужно в файле settings.json в проекте указать ее, как показано ниже.
"intelephense.environment.phpVersion": "7.4.0"
Спасибо, что дочитали до конца! Надеюсь, моя инструкция будет полезна и вам!
Top comments (0)