Visual Studio Code как альтернатива PHPStorm для Backend-разработчика
Tags: vscode, phpstorm, php, webdev
Published: 2022-05-19 22:13:00


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3ba2fueob8atcsi0k7t.jpeg)

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

Начинаем с установки Visual Studio Code. Для этого нужно скачать установщик с [официального сайта](https://code.visualstudio.com/Download). После установки мы получим голый VSCode.

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

## Установка расширений
### Менеджер проектов
По умолчанию в VSCode нет привычной работы с проектами,  но эту проблему легко решить используя расширение [Project Manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager). Чтобы создать проект открываем папку с файлами, которую хотим использовать как проект, нажимаем ctrl+shift+P, в появившейся строке вводит Project и выбираем выделенный ниже элемент списка.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0mzda1ekdo4m2vqjdwa0.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b55qt9pspcssbdtxspqh.png)
 
После подтверждения проект будет создан и его можно будет увидеть в разделе с проектами.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oy53i0fbvt3akk62jrmb.png) 

При клике на проект VSCode сразу откроет папку, к которой был привязан проект.

### Расширения для PHP
Для комфортной работы с PHP необходимо установить эти расширения:
* Для отладки через [XDebug](https://marketplace.visualstudio.com/items?itemName=xdebug.php-debug) 
* Для удобной работы с кодом [PHP Intelephense](https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client) (Очень советую приобрести Premium версию)
* Альтернатива предыдущего расширения для работы с кодом [PHP IntelliSense](https://marketplace.visualstudio.com/items?itemName=zobo.php-intellisense) (На мой взгляд хуже предыдущего)
* Для работы с DocBlock [PHP DocBlocker](https://marketplace.visualstudio.com/items?itemName=neilbrayfield.php-docblocker)
* Для автовставки Namespace [PHP Namespace Resolver](https://marketplace.visualstudio.com/items?itemName=MehediDracula.php-namespace-resolver)
* Для генерации [getters и setters](https://marketplace.visualstudio.com/items?itemName=cvergne.vscode-php-getters-setters-cv) 
* Генератор конструктора [PHP Constructor](https://marketplace.visualstudio.com/items?itemName=MehediDracula.php-constructor)
* Добавляет генерацию классов, интерфейсов, трейтов, enum при создании нового файла [PHP Create Class](https://marketplace.visualstudio.com/items?itemName=jaguadoromero.vscode-php-create-class)
* Вставка подсказок type hints и входных параметров [PHP Parameter Hint](https://marketplace.visualstudio.com/items?itemName=MrChetan.phpstorm-parameter-hints-in-vscode)
* Для работы с [Composer](https://marketplace.visualstudio.com/items?itemName=ikappas.composer)
* Для подсказок пакетов и версий в composer.json [Composer IntelliSense](https://marketplace.visualstudio.com/items?itemName=kainiklas.composer-intellisense)
* [CSFixer](https://marketplace.visualstudio.com/items?itemName=junstyle.php-cs-fixer) по желанию, требуется установленный на машине PHP

Если включить одновременно IntelliSense и Intelephense, то будут задвоены подсказки методов и аннотации с описанием функций.

После установки расширений нужно отключить базовые подсказки PHP VSCode. Для этого нужно в расширениях в поисковой строке ввести @builtin php и отключить расширение PHP Language Features.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/moyqc8vc0uzaz9n3hw5y.png)

### Расширения для Symfony
[Symfony for VSCode](https://marketplace.visualstudio.com/items?itemName=TheNouillet.symfony-vscode)
[Symfony Console Run All Symfony Commands](https://marketplace.visualstudio.com/items?itemName=nadim-vscode.symfony-super-console)
[Symfony code snippets And Twig Support & Yaml ](https://marketplace.visualstudio.com/items?itemName=nadim-vscode.symfony-code-snippets)

### Расширения для Laravel
[Laravel Artisan](https://marketplace.visualstudio.com/items?itemName=ryannaddy.laravel-artisan)
[Laravel Blade Snippets](https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade)
[Laravel Blade Spacer](https://marketplace.visualstudio.com/items?itemName=austenc.laravel-blade-spacer)
[Laravel Extra Intellisense](https://marketplace.visualstudio.com/items?itemName=amiralizadeh9480.laravel-extra-intellisense)
[Laravel Goto Controller](https://marketplace.visualstudio.com/items?itemName=ctf0.laravel-goto-controller)
[Laravel goto view](https://marketplace.visualstudio.com/items?itemName=codingyu.laravel-goto-view)
[Laravel Snippets](https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel5-snippets)
 
### Работа с тэгами
Для удобства работы с HTML, XML и прочими документами с тэгами: 
* [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
* [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)
* [Auto Complete Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-complete-tag) Ставит сам два расширения выше

### Встроенный Rest Client
Rest client по аналогии с тем, что был добавлен в PHPStorm
[REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client).
[Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client) - встроенный клиент, похожий на Postman.

### Работа с проектом по FTP/SFTP
Для работы с проектами на удаленных машинах нужно установить расширение [SFTP](https://marketplace.visualstudio.com/items?itemName=liximomo.sftp). Оно добавляет возможность в проектах добавлять SFTP конфиг, в котором можно указать опции синхронизации. 

### Системы контроля версий VCS
Для работы с Git, пожалуй, лучшее расширение [GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens).

Для отображения веток в виде графа [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph).

Для удобного просмотра истории [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory).

Для работы с GitLab и проведения CodeReview есть хорошее официальное расширение [GitLab Workflow](https://marketplace.visualstudio.com/items?itemName=GitLab.gitlab-workflow).

Есть еще интересный проект [New Relic CodeStream](https://marketplace.visualstudio.com/items?itemName=CodeStream.codestream), но мне не нравится, что там нужна регистрация и части кода, который комментируется, сохраняются на их серверах. 

### Верстка и шаблонизаторы
Для быстрого составления HTML [Emmet](https://code.visualstudio.com/docs/editor/emmet)

Для поддержки синтаксиса TWIG [Twig Language 2](https://marketplace.visualstudio.com/items?itemName=mblode.twig-language-2)

Для удобной работы с CSS [CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)

JavaScript (ES6) code snippets [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)

### Работа с СУБД
Для работы с СУБД из VSCode [SQLTools](https://marketplace.visualstudio.com/items?itemName=mtxr.sqltools) Есть драйвера для всех популярных СУБД (ставятся отдельными расширениями).

### Работа с Docker
Для удобной работы с контейнерами, сетями, образами, voluems и т.д. есть отличное расширение от Microsoft [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker).

### Документация
Для работы с Markdown [markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)
Для предпросмотра Swagger прямо в IDE [Swagger Viewer](https://marketplace.visualstudio.com/items?itemName=Arjun.swagger-viewer)
Автоподсказки для написания Swagger [Swagger Snippets](https://marketplace.visualstudio.com/items?itemName=adisreyaj.swagger-snippets)

### Форматирование и читаемый вид
Крутое расширение для форматирования и работы с [XML](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-xml) от RedHat.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5tyus7y4cjja5sqw702h.png)
 
При нажатии правой кнопкой мыши в открывшемся меню появится новый блок для форматирования после установки расширения.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bcbn8qnw9fhucw40nj7t.png)

Альтернатива расширениею выше для работы c [XML](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-xml).

Форматирование JSON [JSON Tools](https://marketplace.visualstudio.com/items?itemName=eriklynd.json-tools)
Для форматирования нужно использовать комбинации славишь ниже:
* Ctrl(Cmd)+Alt+M для преобразования JSON в читаемый вид
* Alt+M для минимизализации JSON 

Форматирование SQL [SQL Formatter](https://marketplace.visualstudio.com/items?itemName=adpyke.vscode-sql-formatter)
При нажатии правой кнопки мыши по выделенному SQL в меню появится новый блок после установки расширения.  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y8d2xjm607eomd1uyhb2.png)

Для работы с [GraphQL](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql).

### TODO и FIXME
Работая с PHPStorm многие из вас привыкли к удобному просмотру TODO и FIXME в виде списка по всему проекту. В VSCode для этой задачи есть два расширения.

[Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) - очень удобное расширение, позволяет видеть все TODO в виде списка, огромные возможности кастомизации отображения, возможность добавлять свои тэги.

[TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) - расширение попроще предыдущего, но также позволяет кастомизировать отображение и добавлять свои тэги. На мой взгляд менее удобно реализован листинг TODO по проекту.

### Работа с таск-трекерами
Для быстрой работы с задачами прямо из VSCode для себя использую эти расширения:

- [Redmine](https://marketplace.visualstudio.com/items?itemName=rozpuszczalny.vscode-redmine) - позволяет быстро просматривать список задач, менять статусы и трекать затраченное время;
- [YouTrack](https://marketplace.visualstudio.com/items?itemName=bulut4.youtrack) - позволяет смотреть задачи, создавать ветки при открытии задачи, MR и прочее;
- [YouTrack Issues](https://marketplace.visualstudio.com/items?itemName=HuddleBoards.youtrack-issues) - попроще предыдущего, но мне он нравится больше, так как сосредоточен только на работе с задачами и более удобный листинг задач;
- [Jira and Bitbucket](https://marketplace.visualstudio.com/items?itemName=Atlassian.atlascode) - официальное расширение, которое отлично реализует работу с задачами в Jira и Bitbucket. 

### Темы
В магазине VSCode есть большой выбор тем. Мне больше всего нравится во всех IDE Twilight [Twilight Theme](https://marketplace.visualstudio.com/items?itemName=gerane.Theme-Twilight) Многим нравится [GitHub Theme](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme).  В целом в магазине каждый найдет что-то на свой вкус.

Если вы обычно работаете с несколькими окнами VSCode одновременно, то вас может заинтересовать расширение [Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock), которое позволяет задать окнам IDE разную палитру и проще ориентироваться в открытых проектах.

### Прочее
[Total Lines](https://marketplace.visualstudio.com/items?itemName=praveencrony.total-lines) - добавляет в тулбар информацию, о количестве строк в файле.
[Regex Previewer](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex) - быстрая отладка регулярных выражений прямо в VSCode.
[Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks) - для удобных флажков на строчки кода.
[Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) - кастомизация комментариев в коде.
[Edit CSV](https://marketplace.visualstudio.com/items?itemName=janisdd.vscode-edit-csv) - просмотр и редактирвоание CSV.
[Hungry Delete](https://marketplace.visualstudio.com/items?itemName=jasonlhy.hungry-delete) - быстрое удаление пустых строк и пробелов одним нажатием.
[Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) - автоподставление путей к файлам.

## Настройки
Посе установки всех необходимых расширений необходимо произвести некоторые настройки в самом settings.json VSCode и в проектах настроить файлы-конфигурации расширений для их использования.

### Базовые настройки VSCode
Для комфортной работы расширений нужно произвести настройки в главном settongs.json.
Для открытия его редактирования нужно набрать ctrl + shift + P и в строке ввести settings.json.
В выпадающем списке выбрать выделенный на скрине вариант.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/611eczzzpykf7b5cw8xj.png) 

Откроется глобальный settings.json для всего VSCode, в котором нужно добавить / обновить значение узлов, как показано ниже.

```json
{
        / Если нужен прокси для выкачивания плагинов
        "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 и выбрать выделенный ниже элемент списка.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cz5qow3cqjtwvgkvtbon.png)

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

```json
{
    "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 и выбрать выделенный ниже элемент списка.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xrfveafl5u7h1t7cb5n.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vj5wdo0gdwfcih3fwgrk.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mm0ylq39ihepdlf8xu5m.png)
 
Откроется ассистент настройки подключения 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjxv4l0b33cevm02ar06.png)

В итоге будет получен settings.json файл с параметрами подключения.  
В одном проекте может быть несколько подключений к разным БД.
Для MySQL файл-конфиграции выглядит как приведено ниже. 

```json
{
    "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...

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65ny9um61z7on82bgsu9.png)

Откроется редактор launch.json.
Пример заполненного файла конфигурации для xdebug приведен ниже.

```json
{
    // Используйте 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
        }
    ]
}
```

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rfcxu5l3hkmlkkqnbkk0.png) 

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

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

### Настройка расширения Intelephense
Чтобы указать версию PHP у проекта для корректной работы линтера нужно в файле settings.json **в проекте** указать ее, как показано ниже.
```json
    "intelephense.environment.phpVersion": "7.4.0"
```

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