Мигрируем с JetBrains PHPStorm на Cursor (VS Code)17.12.2024 14:15

Cursor (VS Code) мимикрирует под PHPStorm

Разберем, как настроить в Cursor (VS Code) привычные функции JetBrains PHPStorm. Множество описанных в статье функций носит общий характер и не привязано конкретно к PHP, так что будет актуально и для миграции из других продуктов JetBrains.

Тем не менее, настроим полноценную поддержку php, xdebug, .env, yaml, symfony, git, перенесем хоткеи и тему оформления, поймем, как подключаться к БД и удаленному серверу. Будет небольшое личное сравнение IDE между собой. Функции Cursor затрагивать почти не будем.

Введение

Очень коротко про Cursor — это «AI редактор кода», как гласит официальный сайт. По факту — это форк VS Code, который предоставляет одну из самых глубоких и продуманных интеграций AI-инструментов в IDE на текущий момент (по моему скромному мнению).

Cursor имеет более широкие возможности AI-помощника:

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

Собственно, перехожу я как раз ради AI-фич. AI Assistant от JetBrains по моему опыту сильно отстает по качеству и возможностям от Cursor, а альтернативные плагины (Github Copilot, Codeium, etc.) почти поголовно ограничены только чатом и подсказками из сплошного текста.

И еще небольшой дисклеймер: я использую Ubuntu и английский язык интерфейса, поэтому все хоткеи и команды (их будет немного) будут указаны для них.

TL; DR; — ставите плагины из списка ниже и копируете конфиг из конца статьи в свой settings.json.

Статья получилась достаточно объемная, поэтому вот вам оглавление:

Плагины

Для полноценной работы понадобятся плагины. Установить можно как через GUI, найдя их в меню File > Preferences > Extensions, так и через команду для установки в панели быстрых команд (Ctrl + Shift + P):

PHP Tools for VS Code — полноценная поддержка языка, форматирование, дебаг, PHPDoc, без этого плагина (или связки аналогичных) VS Code с php работает на уровне блокнота с подсветкой синтаксиса. При установке добавляются также плагины Composer, PHP Profiler и IntelliPHP — AI Autocomplete for PHP в превью режиме, от последнего можно сразу избавиться, раз мы используем Cursor (удалить или отключить). Увы, часть фич плагина платная — не только собственные AI-фичи, но и, например, добавление геттеров/сеттеров или автоимпорт неймспейса — то, что идет в PHPStorm из коробки.
Symfony for VSCode — базовая поддержка контейнера symfony и отслеживание изменений в конфигах для его обновления, подсказки по названиям сервисам. На самом деле очень сильно далек по функционалу от плагина под PHPStorm (Symfony Support). У меня не работает даже банальный переход из services.yaml к классу, а также нет очень удобной фичи импорта сервиса в текущий класс — при упоминании в коде класса сервиса, который в текущем классе отсутствует — плагин для JetBrains умеет искать по названию переменной и добавлять в конструктор в 1 клик. Также нет, например, поиска по роутам (работает в PHPStorm через быстрый поиск).
YAML — поддержка yaml.
DotENV — поддержка .env.
GitLens — Git supercharged — расширенная поддержка git — blame, граф коммитов и много всего еще.
SQLTools, (и драйверы — MySQL / MariaDB / TiDB, MS SQL, PostgreSQL) — менеджер БД, драйверы реализованы в виде дочерних плагинов.
IntelliJ IDEA Keybindings — привычные хоткеи, которые не всегда выполняют ровно ту же функцию. Shift + Shift, например — это поиск по файлам, в PHStorm функциональность окна быстрого поиска куда шире (поиск сразу по названиям файлов, в самих файлах, поиск названий классов/функций/переменных, настроек IDE и много чему еще).
JetBrains Icon Theme — привычные иконки папок/файлов.
Docker — плагин для управления докер-контейнерами в GUI.
Markdown Preview Enhanced — подсветка синтаксиса markdown и readonly превью.
SFTP — синхронизация файлов с удаленным сервером.
Darcula Contrast — темная тема из PHPStorm.

Есть также и сборники плагинов, например PHP Language Essential Extension Pack, Symfony extensions pack или Laravel Extension Pack. Ставить все скопом все же не рекомендую.

Конфиг VS Code

Здесь и далее под конфигом подразумевается файл settings.json, который лежит в ~/.config/Cursor/User/settings.json для настроек на уровне пользователя и в .vscode/settings.json на уровне проекта.

Пути к конфигам помнить не нужно, достаточно в командной панели (Ctrl + Shift + P) найти Preferences: Open User|Project settings в зависимости от того, глобальные вам нужны настройки или под конкретный проект.

В VS Code расширенный json, который допускает комментарии и запятые в конце перечислений.

часть конфига и командная панель

Также настройки редактора (editor.*) можно привязывать к конкретному окружению, помещая их в определенный ключ, например, в секции [php]: {} можно указать настройки, которые будут работать только для php.

Внешний вид

Приведу в качестве целевого оформления PHPStorm, которым пользуюсь на протяжении многих лет:

тема Darcula contrast PHPStorm

А также Cursor (VS Code) сразу после установки с темной темой, чтобы было понимание, что мы имеем из коробки:

vs code без изменений

Заголовок окна

заголовок окна Cursor из коробки

Это прямо бросается в глаза в Ubuntu — заголовок окна дублируется, выводится стандартный системный и под ним уже функциональный заголовок от VS Code, который в том числе дублирует кнопки сворачивания, разворачивания и закрытия окна.

Благо, отключается через конфиг:

{
	"window.titleBarStyle": "custom"
}

После изменения значения этой переменной нужно перезапустить IDE полностью.

заголовок после изменений

Тема оформления

Тему оформления можно сменить в меню File > Preferences > Theme > Color Theme или по хоткею Ctrl + `. По умолчанию предустановлены самые популярные, например, Monokai уже есть в списке.

Я же использую тему darcula contrast в PHPStorm — по умолчанию в VS Code такой нет, но вы можете найти ее в маркетплейсе — darcula contrast. Ставим согласно инструкции по ссылке:

Ctrl + Shift + P > ext install nashpatty.darculacontrast.

Если вам приглянулась другая тема — можете также её поискать в маркетплейсе, с большой вероятностью она там будет. В крайнем случае можно настроить все руками через конфиг.

Также можно и подтюнить цвета на свой вкус, меня немного не устроили цвета в готовой схеме, поэтому скорректировал на те, что действительно выводятся в PHPStorm у меня:

{
    "workbench.colorTheme": "Darcula Contrast",
    "editor.fontSize": 13,
    "terminal.integrated.fontSize": 14,
    "debug.console.fontSize": 14,
    "workbench.tree.indent": 20,
    "workbench.iconTheme": "vscode-jetbrains-icon-theme-2023-dark",
    "workbench.colorCustomizations": {
        "sideBar.background": "#2b2d30",
        "sideBarSectionHeader.background": "#2b2d30",
        "sideBarSectionHeader.border":"#1e1f22",
        "editor.background": "#1e1f22",
        "titleBar.activeBackground": "#2b2d30",
        "statusBar.background": "#2b2d30",
        "activityBar.background": "#2b2d30",
        "activityBar.border":"#1e1f22",
        "panel.background":"#2b2d30",
        "panel.border": "#1e1f22"
    }
}

Полное описание всех ключей можно найти в документации, можете настроить по-своему.

было > стало» /></p>

<p>было > стало</p>

<h4>Файловая структура</h4>

<p>По умолчанию горизонтальные отступы достаточно небольшие. Иконки папок отсутствуют, иконки на всех php файлах одинаковые и не читаемые — в виде маленького фиолетового слона.</p>

<p>Исправляем отступы и включаем иконки, если вы их не включили при установке плагина (<code>settings.json</code>): </p>

<pre><code class= { "workbench.tree.indent": 20, "workbench.iconTheme": "vscode-jetbrains-icon-theme-2023-dark" }

Различия

Все файлы php будут с одинаковой иконкой, разделения на классы / интерфейсы / трейты и прочие типы, как в PHPStorm здесь нет. Можете присоединиться к issue в гитхабе плагина, если хотите их появления.
Изменить размер шрифта для файловой структуры отдельно тоже нельзя. Можете присоединиться к этому issue в VS Code.

{ "window.openFoldersInNewWindow": "on" }

Можно настроить либо всегда в новом окне, либо всегда в старом, спрашивать VS Code не умеет.

этой панельки PHPStorm при переключении между проектами не хватает

Вертикальное меню

Насколько понял, в VS Code оно из коробки, но для Cursor нужно добавить еще одну опцию в конфиг:

{
    "workbench.activityBar.orientation": "vertical"
}

было > стало» /></p>

<p>было > стало</p>

<h3>Общие моменты</h3>

<h4>Автосохранение</h4>

<p>По умолчанию VS Code не сохраняет изменения из файла автоматически — это включается отдельно в конфиге (<code>settings.json</code>): </p>

<pre><code class= { "files.autoSave": "onFocusChange" }

onFocusChange — включает автосохранение файлов при потере фокуса вкладкой редактора — позволяет сохранить изменения текущего файла при переходе в терминал, чтобы запустить какие-то консольные проверки (этим он для меня удобнее afterDelay, который сохраняет изменения раз в определенный период и рекомендуется по умолчанию).

Детальную информацию по автосохранению можно найти в документации.

Тюнинг слежения за файлами

Если помимо интерфейса вы работаете в консоли или файлы в вашем проекте могут измениться из другого источника — полезно внести корректировки в механизм отслеживания изменений в файлах (тот же settings.json):

{
    "files.autoGuessEncoding": true,
    "files.watcherExclude": {
        "**/.git/objects/**": true,
        "**/.git/subtree-cache/**": true,
        "**/node_modules/**": true,
        "**/var/**": true,
        "**/cache/**": true
    }
}

autoGuessEncoding — позволяет VS Code самому угадывать кодировку файла при открытии;
watcherExclude — отключает указанные папки и файлы из отслеживания.

Автозакрытие файлов

По умолчанию VS Code закрывает файл, если вы его открыли для превью (одиночный клик по файлу). Т.е. вы идете в структуру файлов, открываете файл с классом, чтобы посмотреть там какой-то код, затем открываете другой файл, чтобы там что-то почитать — VS Code закрывает предыдущий открытый файл. При этом он в названии вкладки честно курсивом подсказывает, что эта вкладка открыта временно и будет закрыта при первой возможности. При этом временная вкладка всегда открывается справа от текущего окна, поэтому еще и порядок вкладок постоянно меняется.

При этом если открывать файл дабл кликом — все ок, он открывается на редактирование и остается рабочим.

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

{
    "workbench.editor.enablePreview": true,
    "workbench.list.openMode": "doubleClick"
}

Различия

Нет полного аналога панели быстрого поиска (по классам / названиям файлов / роутам / функциям и тп), которое открывается по Shift + Shift в PHPStorm, только отдельные виды поиска по содержимому и по названиям файлов:

панель быстрого поиска в PHPStorm

PHP

Выделение переменных

VS Code по умолчанию считает $ символом-разделителем, поэтому меняем в конфиге набор таких разделителей, чтобы при выделении переменной при двойном клике доллар также выделялся:

{
	"editor.wordSeparators": "`~!@#%^&*()-=+[{]}\\|;:'\",.<>/?"
}

Линтер — проверка синтаксиса

Линтер php по умолчанию — системный, можно проверить версию и настройки через вызов php -v в консоли.

Если бинарник по какой-то причине лежит в другом месте — можно в настройках (settings.json) указать путь:

{
    "php.validate.executablePath": "/usr/bin/php8.3"
}

Подробную инструкцию можно найти в официальной доке.

Если не хотите, чтобы синтаксический анализ подсвечивал вам ошибки из игнорируемых файлов (указанных в .gitignore), нужно также включить эту опцию в конфиге (settings.json):

{
	"php.problems.excludeGitIgnore": true
}

Git

панель Git в PHPStorm

панель GitLens в VS Code

Из коробки в VS Code есть таб Source Control с минимальным функционалом (просмотр изменений, краткий граф коммитов). Расширить этот функционал до привычного можно плагином GitLens. В общих чертах — все очень близко к тому, что мы имеем в PHPStorm. Список веток, просмотр изменений по коммитам, граф коммитов.

Merge

Решение конфликтов происходит в так называемом Merge editor — на мой взгляд вариант из PHPStorm более удобен и понятен интуитивно.

В VS Code нужно открыть таб Source Control в панели — там будет список всех измененных файлов, конфликтные выводятся вверху списка — после их открытия можно запустить Merge editor.

Состояние конфликта более наглядно видно в PHPStorm:

состояние конфликта в шапке PHPStorm

Но разрешить конфликт сразу из редактирования получится только руками, подсветки нет. Интерфейс разрешения конфликтов в PHPStorm такой:

интерфейс разрешения конфликта в PHPStorm

В VS Code конфликт можно увидеть лишь переключившить в таб Source Control, из открытого на редактирование файла можно сразу разрешить конфликт:

состояние конфликта конфликта в VS Code

Merge editor выглядит похоже на PHPStorm, но с точки зрения UX есть заметные различия:

интерфейс разрешения конфликта в VS Code

Отличия

В PHPStorm состояние конфликта явно отображается в заголовке окна в виде отдельной кнопки, по которой сразу открывается окно со всеми конфликтующими файлами и возможностью разрешения конфликтов.
Сам процесс слияния для меня более понятен в PHPStorm с точки зрения UX из-за интуитивно понятных стрелок и терминов Left/Right вместо Current/Incoming в VS Code, а также из-за того, что подсвечиваются только конфликты. VS Code подсвечивает также и не конфликтующие изменения в общем коде — поначалу было вообще не понятно, что на скрине ниже первый подсвеченный блок уже разрешен:

Merge editor VS Code

Нельзя просмотреть изменения сразу из нескольких коммитов (PHPStorm позволяет выделить несколько коммитов и аггрегировать все правки, а также проводить массовые действия — последовательные cherry-pick / revert / etc., в VS Code можно выделить только 1 коммит):

мультивыбор коммитов в PHPStorm

При создании нового файла — он не помечается по умолчанию как добавленный в гит и нет такого запроса (скорее всего можно настроить в GitLens).
Нет возможности сгенерировать описание коммита (AI Assistant в PHPStorm это умеет).

Docker

Docker панель VS Code

Плагин Docker показывает список контейнеров, образов, сетей, хранилищ и в целом предоставляет полноценный интерфейс для управления. Также можно быстро подключиться к логам контейнера, запустить shell, просмотреть файлы внутри контейнера или удалить образ. Я больше привык к работе с докером в консоли, поэтому пользуюсь GUI редко.

Если поверхностно сравнивать с PHPStorm — примерно то же самое.

Docker панель PHPStorm

Дебаг

А именно xdebug. Нужный плагин уже поставился вместе с основным плагином для PHP, осталось его только настроить.

В меню действий есть отдельный раздел Run and Debug — остается там настроить только вашу конфигурацию. Делается это также через json конфиг, который предзаполнен по умолчанию. У меня проект развернут локально в докере, дополнительно нужно было прописать только маппинг директорий (launch.json):

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug with Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
            "pathMappings": {
                "/var/www/site": "${workspaceRoot}"
            }
        }
    ]
}

Debug панель VS Code

В остальном процесс дебага аналогичен PHPStorm (логично, движок один). Стоит, наверное, отметить, что плагин для VS Code из коробки предоставляет built-in сервер для запуска скриптов со встроенным отладчиком, если вам актуально — тут порог старта должен быть ниже, не требуется настраивать сам xDebug, лично этот режим не тестил.

Debug панель PHPStorm

Подключение к удаленному серверу

Автодеплой кода на свою удаленную площадку — довольно распространенный способ ведения разработки.

И подход у VS Code здесь особенный. В большинстве гайдов про удаленную разработку через VS Code описывается использование плагина Remote — SSH, который устанавливает на стороне сервера VS Code Server, а локально фактически остается только UI. Сервер при этом требует ~2 Gb ОЗУ и 2-ядерный процессор, а если у вас в компании один сервер поднят для нескольких площадок и нескольких разработчиков — то этот VS Code Server очень быстро съест его ресурсы (у нас так неоднократно случалось на практике).

Мы же пойдем по простому пути, через плагин SFTP.

Устанавливаем плагин, добавляем конфиг командой SFTP: config (вызов командного меню — Ctrl + Shift + P).

{
    "name": "dev server",
    "host": "192.168.0.2",
    "protocol": "sftp",
    "port": 22,
    "username": "user",
    "remotePath": "/var/www/mysite.ru/src",
    "uploadOnSave": true,
    "useTempFile": false,
    "openSsh": false,
    "privateKeyPath": "/home/ubuntu/.ssh/id_rsa",
    "ignore": [".vscode", ".git", ".DS_Store", ".env", "vendor"]
}

Далее при вводе в командном меню «SFTP» можно увидеть весь перечень возможностей, из наиболее актуального и часто используемого:

View: Show SFTP — открывает файловую структуру удаленного сервера;
SFTP: Sync Local > Remote (и наоборот) — синхронизировать файлы с сервером в том или ином направлении;
Upload Active File | Folder | Project — выгрузить на сервер текущий файл / папку / весь проект.

Команды SFTP VS Code

Подключение к базе данных

IDE не только про код, можно просматривать данные, структуру таблиц БД, выполнять прямые запросы и в целом в PHPStorm это практически полноценный менеджер БД.

Database панель PHPStorm

В VS Code за работу с БД отвечает плагин SQLTools. После его установки появляется одноименная вкладка в левом сайдбаре — там есть возможность создать подключение для всех типов БД, драйвера которых вы установили отдельными плагинами.

SQLTools панель VS Code

Различия

Нет сквозной фильтрации / сортировки данных по столбцам — быстрый фильтр и сортировка работают только для текущей загруженной страницы. Можно убедиться в этом по скринам — в обоих IDE установлена сортировка по убыванию ID.
На уровне подключения к серверу нельзя ограничить список выводимых баз данных (по крайней мере через интерфейс) — выводятся все, к чему с указанными доступами есть права (в PHPStorm такая возможность есть в интерфейсе настроек подключения).
AI Assistant в JetBrains в рамках работы с SQL запросами умеет посылать схему базы данных в виде контекста, так что SQL-запрос, построенный по текстовому запросу, с большой долей вероятности будет структурно корректным. В рамках Cursor работает только автодополнение, структуру базы данных он додумывает сам.

История запросов VS Code

Ценообразование

Сравним еще цены для индивидуального использования.

PHPStorm

PHPStorm — 99$ / 79$ / 59$ (или евро в зависимости от страны) за ½/3+ год пользования или 9.9$ в месяц;
полноценная поддержка php — бесплатно из коробки, на лучшем уровне чем в VS Code с платным плагином;
GitHub Copilot — 100$ за год или 10$ в месяц;
(альтернатива) JetBrains AI Assistant — 100$ за год или 10$ в месяц.

В сумме выходит 13–20$ в зависимости от плана.

Cursor

В сумме выходит 20–27$ в месяц в зависимости от плана.

Итоги

По итогу лично для меня AI-фичи Cursor перевесили разницу в стоимости и функциональности VS Code в связке с PHP. Все остальные различия оказались либо несущественными либо были устранены в рамках текущей статьи.

Привожу также весь конфиг, который мы тут собрали:

settings.json

{
    "[php]": {
    },
    "php.validate.executablePath": "/usr/bin/php8.3",

    /** >>> files **/
    "files.autoSave": "onFocusChange",
    "files.autoGuessEncoding": true,
    "files.watcherExclude": {
        "**/.git/**": true,
        "**/node_modules/**": true,
        "**/var/**": true,
        "**/cache/**": true,
    },
    "php.problems.excludeGitIgnore": true,
    /** <<< files **/

    /** >>> theme settings **/
    "workbench.colorTheme": "Darcula Contrast",
    "editor.fontSize": 13,
    "terminal.integrated.fontSize": 14,
    "debug.console.fontSize": 14,
    "workbench.tree.indent": 20,
    "workbench.iconTheme": "vscode-jetbrains-icon-theme-2023-dark",
    "workbench.colorCustomizations": {
        "sideBar.background": "#2b2d30",
        "sideBarSectionHeader.background": "#2b2d30",
        "sideBarSectionHeader.border":"#1e1f22",
        "editor.background": "#1e1f22",
        "titleBar.activeBackground": "#2b2d30",
        "statusBar.background": "#2b2d30",
        "activityBar.background": "#2b2d30",
        "activityBar.border":"#1e1f22",
        "panel.background":"#2b2d30",
        "panel.border": "#1e1f22"
    },
    /** <<< theme settings **/

    /** >>> window **/
    "window.commandCenter": true,
    "window.customTitleBarVisibility": "auto",
    "window.titleBarStyle": "custom",
    "window.openFoldersInNewWindow": "on",
    "workbench.activityBar.orientation": "vertical",
    /** <<< window **/

    /** >>> behavior **/
    "workbench.editor.enablePreview": false,
    "editor.wordSeparators": "`~!@#%^&*()-=+[{]}\\|;:'\",.<>/?",
    "workbench.list.openMode": "doubleClick",
    "redhat.telemetry.enabled": false,
    "gitlens.currentLine.enabled": false,
    "symfony-vscode.consolePath": "bin/console",
    "explorer.confirmDelete": false,
    /** <<< behavior **/
}

Если знаете какие-то фичи/плагины VS Code, которые считаете удобными, но которые я не осветил в статье — милости прошу в комментарии.