DEV Community

WildTuna
WildTuna

Posted on • Edited on

23 2

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

Image description

В сложившейся ситуации с покупкой продуктов JetBrains на территории РФ задумался об альтернативе одному из их продуктов PHPStorm. Давно слышал много хороших отзывов о VSCode и решил попробовать поработать в нем недельку. Начал с изучения доступных расширений и их настройки. В итоге мне удалось собрать под себя очень достойную альтернативу PHPStorm. В чем-то она хуже, в чем то лучше продукта от JetBrains, но для себя я решил пока остаться на VSCode. Ниже я поделюсь с вами расширениями, которые использую и настройками.

Начинаем с установки Visual Studio Code. Для этого нужно скачать установщик с официального сайта. После установки мы получим голый VSCode.

При желании можно установить языковый пакет, который локализует интерфейс приложения.

Установка расширений

Менеджер проектов

По умолчанию в VSCode нет привычной работы с проектами, но эту проблему легко решить используя расширение Project Manager. Чтобы создать проект открываем папку с файлами, которую хотим использовать как проект, нажимаем ctrl+shift+P, в появившейся строке вводит Project и выбираем выделенный ниже элемент списка.
Image description

Будет предложено ввести имя проекта.

Image description

После подтверждения проект будет создан и его можно будет увидеть в разделе с проектами.

Image description

При клике на проект 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.

Image description

Расширения для 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 и прочими документами с тэгами:

Встроенный 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.

Image description

При нажатии правой кнопкой мыши в открывшемся меню появится новый блок для форматирования после установки расширения.

Image description

Альтернатива расширениею выше для работы c XML.

Форматирование JSON JSON Tools
Для форматирования нужно использовать комбинации славишь ниже:

  • Ctrl(Cmd)+Alt+M для преобразования JSON в читаемый вид
  • Alt+M для минимизализации JSON

Форматирование SQL SQL Formatter
При нажатии правой кнопки мыши по выделенному SQL в меню появится новый блок после установки расширения.

Image description

Для работы с 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.
В выпадающем списке выбрать выделенный на скрине вариант.

Image description

Откроется глобальный 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"
    ]
}


Enter fullscreen mode Exit fullscreen mode

Настройка SFTP / FTP подключения в проекте

Для настройки SFTP / FTP подключения в проекте нужно создать файл-конфигурацию sftp.json в проекте. Для этого нужно набрать ctrl + shift + P, в строке ввести SFTP: Config и выбрать выделенный ниже элемент списка.

Image description

Оптимальный файл-конфигурации приведен ниже.



{
    "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"
        ]
    }
}


Enter fullscreen mode Exit fullscreen mode

Для скачивания проекта файлов с сервера нужно ввести SFTP Download и выбрать выделенный ниже элемент списка.

Image description

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

Image description

Настройка SQLTool

Для добавления подключения к СУБД нужно нажать ctrl+shift+P, в строке ввести SQLTool и выбрать выделенный ниже элемент списка.

Image description

Откроется ассистент настройки подключения

Image description

В итоге будет получен 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" // Пароль пользователя БД
        }
    ]
}


Enter fullscreen mode Exit fullscreen mode

Настройка расширения XDebug

Для отладки PHP кода средствами Xdebug нужно составить файл-конфигурацию.
Для этого в меню Run нужно выбрать Add Configuration...

Image description

Откроется редактор 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
        }
    ]
}


Enter fullscreen mode Exit fullscreen mode

По итогу работа отладчика будет выглядеть, как на скрине ниже

Image description

Настройка расширения Redmine

Для работы с задачами в таск-трекере Redmine в конфигурационном файле settings.json в каталоге .vscode проекта нужно добавить настройки ниже. После сохранения для работы нужно перезапустить VSCode.



    "redmine.url": "https://redmine.example.ru", // Адрес Redmine
    "redmine.apiKey": "ApiKey", // API Ключ Redmine
    "redmine.rejectUnauthorized": true, // Если самоподписанные SSL сертификат 


Enter fullscreen mode Exit fullscreen mode

Настройка расширения Intelephense

Чтобы указать версию PHP у проекта для корректной работы линтера нужно в файле settings.json в проекте указать ее, как показано ниже.



    "intelephense.environment.phpVersion": "7.4.0"


Enter fullscreen mode Exit fullscreen mode

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up