WildTuna

Posted on May 19, 2022 • Edited on Sep 29, 2022

Visual Studio Code как альтернатива PHPStorm для Backend-разработчика

#vscode #phpstorm #php #webdev

В сложившейся ситуации с покупкой продуктов 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"

Спасибо, что дочитали до конца! Надеюсь, моя инструкция будет полезна и вам!

DEV Community