Разберем, как настроить в 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, которым пользуюсь на протяжении многих лет:
А также Cursor (VS Code) сразу после установки с темной темой, чтобы было понимание, что мы имеем из коробки:
Заголовок окна
Это прямо бросается в глаза в 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" } }
Полное описание всех ключей можно найти в документации, можете настроить по-своему.
Файловая структура
По умолчанию горизонтальные отступы достаточно небольшие. Иконки папок отсутствуют, иконки на всех php файлах одинаковые и не читаемые — в виде маленького фиолетового слона.
Исправляем отступы и включаем иконки, если вы их не включили при установке плагина (settings.json
):
{ "workbench.tree.indent": 20, "workbench.iconTheme": "vscode-jetbrains-icon-theme-2023-dark" }
Различия
-
Все файлы php будут с одинаковой иконкой, разделения на классы / интерфейсы / трейты и прочие типы, как в PHPStorm здесь нет. Можете присоединиться к issue в гитхабе плагина, если хотите их появления.
-
Изменить размер шрифта для файловой структуры отдельно тоже нельзя. Можете присоединиться к этому issue в VS Code.
Расположение панелей
В целом здесь все похоже, единственное — по умолчанию панель терминала «зажата» между левой и правой панелью, тогда как в PHPStorm она выровнена по ширине экрана.
Не нашел как это править через конфиг, но изменить выравнивание можно следующим образом:
Ctrl + Shift + P > View: Set Panel Alignment to Justify
.
Также можно выбрать ... Left
/ ... Right
, тогда панель терминала будет занимать центральную и левую / правую часть экрана соответственно.
Открытие нескольких проектов
В PHPStorm, когда вы открываете новый проект — IDE интересуется, хотите вы его открыть в новом окне или в текущем. В VS Code такого нет, проект при его открытии через меню File
открывается по умолчанию всегда в текущем окне. Это может быть неудобно, если вы, как и я, хотите работать одновременно с несколькими проектами.
Поэтому конфиг снова приходит на помощь:
{ "window.openFoldersInNewWindow": "on" }
Можно настроить либо всегда в новом окне, либо всегда в старом, спрашивать VS Code не умеет.
Вертикальное меню
Насколько понял, в VS Code оно из коробки, но для Cursor нужно добавить еще одну опцию в конфиг:
{ "workbench.activityBar.orientation": "vertical" }
Общие моменты
Автосохранение
По умолчанию VS Code не сохраняет изменения из файла автоматически — это включается отдельно в конфиге (settings.json
):
{ "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, только отдельные виды поиска по содержимому и по названиям файлов:
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
Из коробки в VS Code есть таб Source Control с минимальным функционалом (просмотр изменений, краткий граф коммитов). Расширить этот функционал до привычного можно плагином GitLens. В общих чертах — все очень близко к тому, что мы имеем в PHPStorm. Список веток, просмотр изменений по коммитам, граф коммитов.
Merge
Решение конфликтов происходит в так называемом Merge editor — на мой взгляд вариант из PHPStorm более удобен и понятен интуитивно.
В VS Code нужно открыть таб Source Control в панели — там будет список всех измененных файлов, конфликтные выводятся вверху списка — после их открытия можно запустить Merge editor.
Состояние конфликта более наглядно видно в PHPStorm:
Но разрешить конфликт сразу из редактирования получится только руками, подсветки нет. Интерфейс разрешения конфликтов в PHPStorm такой:
В VS Code конфликт можно увидеть лишь переключившить в таб Source Control, из открытого на редактирование файла можно сразу разрешить конфликт:
Merge editor выглядит похоже на PHPStorm, но с точки зрения UX есть заметные различия:
Отличия
-
В PHPStorm состояние конфликта явно отображается в заголовке окна в виде отдельной кнопки, по которой сразу открывается окно со всеми конфликтующими файлами и возможностью разрешения конфликтов.
-
Сам процесс слияния для меня более понятен в PHPStorm с точки зрения UX из-за интуитивно понятных стрелок и терминов Left/Right вместо Current/Incoming в VS Code, а также из-за того, что подсвечиваются только конфликты. VS Code подсвечивает также и не конфликтующие изменения в общем коде — поначалу было вообще не понятно, что на скрине ниже первый подсвеченный блок уже разрешен:
-
Нельзя просмотреть изменения сразу из нескольких коммитов (PHPStorm позволяет выделить несколько коммитов и аггрегировать все правки, а также проводить массовые действия — последовательные cherry-pick / revert / etc., в VS Code можно выделить только 1 коммит):
-
При создании нового файла — он не помечается по умолчанию как добавленный в гит и нет такого запроса (скорее всего можно настроить в GitLens).
-
Нет возможности сгенерировать описание коммита (AI Assistant в PHPStorm это умеет).
Docker
Плагин Docker показывает список контейнеров, образов, сетей, хранилищ и в целом предоставляет полноценный интерфейс для управления. Также можно быстро подключиться к логам контейнера, запустить shell, просмотреть файлы внутри контейнера или удалить образ. Я больше привык к работе с докером в консоли, поэтому пользуюсь GUI редко.
Если поверхностно сравнивать с 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}" } } ] }
В остальном процесс дебага аналогичен PHPStorm (логично, движок один). Стоит, наверное, отметить, что плагин для VS Code из коробки предоставляет built-in сервер для запуска скриптов со встроенным отладчиком, если вам актуально — тут порог старта должен быть ниже, не требуется настраивать сам xDebug, лично этот режим не тестил.
Подключение к удаленному серверу
Автодеплой кода на свою удаленную площадку — довольно распространенный способ ведения разработки.
И подход у 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
— выгрузить на сервер текущий файл / папку / весь проект.
Подключение к базе данных
IDE не только про код, можно просматривать данные, структуру таблиц БД, выполнять прямые запросы и в целом в PHPStorm это практически полноценный менеджер БД.
В VS Code за работу с БД отвечает плагин SQLTools. После его установки появляется одноименная вкладка в левом сайдбаре — там есть возможность создать подключение для всех типов БД, драйвера которых вы установили отдельными плагинами.
Различия
-
Нет сквозной фильтрации / сортировки данных по столбцам — быстрый фильтр и сортировка работают только для текущей загруженной страницы. Можно убедиться в этом по скринам — в обоих IDE установлена сортировка по убыванию ID.
-
На уровне подключения к серверу нельзя ограничить список выводимых баз данных (по крайней мере через интерфейс) — выводятся все, к чему с указанными доступами есть права (в PHPStorm такая возможность есть в интерфейсе настроек подключения).
-
AI Assistant в JetBrains в рамках работы с SQL запросами умеет посылать схему базы данных в виде контекста, так что SQL-запрос, построенный по текстовому запросу, с большой долей вероятности будет структурно корректным. В рамках Cursor работает только автодополнение, структуру базы данных он додумывает сам.
-
В VS Code есть история SQL запросов.
Ценообразование
Сравним еще цены для индивидуального использования.
PHPStorm
-
PHPStorm — 99$ / 79$ / 59$ (или евро в зависимости от страны) за 1/2/3+ год пользования или 9.9$ в месяц;
-
полноценная поддержка php — бесплатно из коробки, на лучшем уровне чем в VS Code с платным плагином;
-
GitHub Copilot — 100$ за год или 10$ в месяц;
-
(альтернатива) JetBrains AI Assistant — 100$ за год или 10$ в месяц.
В сумме выходит 13-20$ в зависимости от плана.
Cursor
-
Cursor — 192$ в год или 20$ в месяц;
-
PHP Tools for Visual Studio Code — 79$ / 49$ за 1/2+ год пользования, месячного тарифа нет.
В сумме выходит 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, которые считаете удобными, но которые я не осветил в статье — милости прошу в комментарии.
ссылка на оригинал статьи https://habr.com/ru/articles/866644/
Добавить комментарий