В этом видео я показываю 12 профессиональных лайфхаков для Cursor IDE, которые реально ускоряют работу и делают взаимодействие с ИИ более точным и предсказуемым. Если вы используете Cursor для разработки, эти техники помогут вам писать код быстрее, чище и увереннее.
*https://www.youtube.com/watch?v=NyZQ31Q_L_Y
**https://300.ya.ru/v_m7gZxUPo
таймкоды
00:00:00 Концепция TDD
- Курсор сначала пишет тесты для сложной функции, затем реализует функционал.
- Пример: преобразование Markdown в HTML.
- Курсор создаёт пакет, выбирает библиотеки и реализует функцию, параллельно запуская тесты.
00:00:51 Настройка языка
- В настройках можно выбрать язык для ответов курсора.
- Пример настройки: использование русского языка.
00:01:42 Взаимодействие с ИИ
- Возможность планирования задач с помощью ИИ.
- Пример задачи: создание карточки с ценой биткоина и графиком.
- ИИ задаёт вопросы для уточнения задачи.
00:03:52 Реализация плана
- ИИ описывает план реализации в формате MD.
- Возможность исправления и доработки плана.
- Реализация плана ИИ ускоряет и улучшает разработку.
00:06:20 Работа с элементами интерфейса
- Выбор элементов интерфейса для работы с агентом.
- Пример изменения шрифта и форматирования.
00:07:22 Работа с изображениями
- Вставка скриншота в агент для создания нового дизайна.
- ИИ интерпретирует изображение и создаёт похожий дизайн.
00:08:55 Сохранение и адаптация контекста
- Сохранение предыдущего состояния приложения.
- Дублирование чата для сохранения контекста.
- Компиляция диалога для очистки контекста.
00:10:35 Отслеживание контекста
- Отслеживание использования контекста.
- Рекомендация создавать новый чат для чистого контекста.
00:11:13 Работа с токенами и курсором
- Курсор предоставляет 200 тысяч токенов, из которых использовано 30 тысяч.
- Рекомендуется создавать новые чатики для работы с токенами.
- В курсоре можно работать с Git и делать агентов полноценными ревьюерами кода.
00:12:04 Взаимодействие с контекстом
- Через символ собаки можно обращаться к контексту, где доступны файлы и папки.
- Доступны функции работы с терминалом, браузером и Git.
- Можно запросить у курсора анализ изменений и выявление потенциальных проблем.
00:12:28 Ревью кода с помощью ИИ
- Проект сгенерирован с помощью ИИ, который теперь может делать ревью кода.
- ИИ выявляет критические проблемы, неиспользуемые зависимости и другие ошибки.
- Возможность оптимизации проекта до коммита в продакшн.
00:13:38 Правила для курсора
- В настройках курсора можно добавлять правила для всего приложения или для конкретного проекта.
- Правило «Смарт» улучшает производительность курсора, убирая лишние строки информации и дубликаты кода.
- Промт для правила доступен в телеграм-канале автора.
00:14:30 Создание команд в курсоре
- В папке «cursor/commons» можно создать файл с командой, например, «commit.md».
- Команда анализирует изменения в текущей ветке и делает коммит с точным описанием изменений.
- Автоматизация работы с кодом через создание команд.
00:15:32 Заключение
- Создание команд позволяет автоматизировать часть работы в курсоре под конкретный проект.
- Возможность создания pull-запросов и ускорения работы с кодом.
- Призыв подписаться на телеграм-канал для получения дополнительных материалов и бесплатного промта для оптимизации проектов.
Transcript
0:00
Первый лайфхак относится к такой
0:01
концепции, как тд. Это когда нам нужно,
0:04
например, написать сложную функцию, и мы
0:07
заставляем курсор сразу же написать под
0:09
него тесты. То есть он вначале пишет
0:11
тесты и после этого пытается реализовать
0:13
функционал до тех пор, пока тесты это не
0:16
пройдут. Вот пример того, как выглядит
0:18
этот промт. Напиши мне функцию, я указал
0:21
контекст, где писать, для преобразования
0:23
Markдаdown в HTML. И сначала напиши
0:27
тесты, а затем дорабатывай код, пока все
0:29
тесты не начнут проходить. И, значит,
0:31
если мы всё это дело запускаем, то вы
0:34
увидите, что сейчас будет делать курсор.
0:36
Значит, он создаёт для нас сразу же
0:37
package, поскольку был проект совсем
0:39
пустой. Дальше он решает, какие
0:41
библиотеки использовать для того, чтобы
0:43
реализовать именно тестфункционал. После
0:45
этого он будет реализовывать саму
0:47
функцию, и дальше он будет запускать
0:49
тесты и параллельно исправлять ошибки.
0:51
И, как видите, он использовал
0:52
довольно-таки большое количество
0:53
тест-кейсов, потому что Markдау
0:55
переводить в HTML, там есть
0:57
довольно-таки много нюансов. И дальше
0:59
после этого он уже реализовывает сам
1:01
индекс JS, где происходит реализация
1:03
этой функции Markdown to HTML. После
1:05
чего мы видим важное сообщение, что все
1:07
21 тест прошли успешно, ноль ошибок, и
1:11
это означает, что функция с большей
1:13
вероятностью готова к использованию.
1:15
Соответственно, этот лайфхак вы можете
1:17
использовать, когда действительно нужно
1:19
написать какое-то сложное решение. И вы
1:21
даёте таким образом возможность для
1:22
курсора, чтобы он изначально продумал
1:24
сам тест-план, после чего реализовал
1:27
функцию. Второй лайфхак, который мне
1:29
очень нравится. Если вы хотите работать
1:31
на русском языке или на любом другом
1:33
языке в курсоре, то вы можете перейти в
1:35
настройки, дальше перейти в rules and
1:38
commands, и я пишу такое правило: always
1:40
answer in Russian language. Это означает
1:43
для него теперь, что он будет мне
1:45
отвечать на русском. Ну, мне в данном
1:46
случае это будет понятно.
1:47
Соответственно, вместо русского здесь
1:49
можете использовать любой другой язык и
1:51
тем самым сделать настройку под себя. На
1:53
всякий случай. Для того, чтобы добавить
1:54
новое правило, вы просто нажимаете add и
1:56
здесь описываете текстом, что вы хотите
1:58
здесь сделать. Следующий полезный
2:00
инструмент доступен в поле
2:02
взаимодействия с искусственным
2:03
интеллектом. Раньше мы могли выбирать
2:06
между агентом или спросить что-либо по
2:09
коду, но, кажется, со второй версии
2:10
появилась такая вещь, как план. И здесь
2:13
мы можем запланировать фишку, то есть
2:15
вначале её грамотно описать для курсора,
2:18
прямо внутри курсора, а только после
2:20
этого имплементировать. Допустим, я
2:21
забиваю такой промт, что я хочу, чтобы
2:23
на главной странице у меня была карточка
2:25
с текущей ценой биткоина и графиком его
2:28
цены за последнюю неделю. То есть в
2:31
плане я закидываю свою идею. И прежде,
2:34
чем мы будем его реализовывать в коде,
2:36
мы будем взаимодействовать с EI для
2:38
того, чтобы лучше оцифровать, как это
2:40
работает. И вот примерно как это
2:41
выглядит. Вначале клод начинает думать.
2:45
Сейчас у меня версия 4,5et.
2:48
И он говорит, что я помогу вам создать
2:49
карточку. Давайте посмотрим, что мы
2:51
можем с этим сделать. Он видит, что у
2:53
нас next проект Typecript. И после
2:56
этого, смотрите, то есть он формирует
2:58
набор вопросов, на которые нам
2:59
необходимо ответить для того, чтобы
3:02
лучше со своей стороны сформировать
3:04
задачу, чтобы не просто агент гадал, что
3:06
же там вы хотите сделать, а нет, мы
3:09
конкретно будем ему указывать. Давайте
3:10
посмотрим, что он нам здесь выдал. Какой
3:12
IP вы хотите использовать для получения
3:14
данных о биткоине? Бесплатный не требует
3:17
ключа. Давайте выберем Coin GEK IP.
3:20
Значит, второй вопрос. Какую библиотеку
3:22
для графиков вы предпосчитаете?
3:25
Recharts. Также он поясняет, что она
3:27
популярна для React, хорошо работает с
3:29
NextJS, Chart JS, Apex Chart. Ну,
3:32
очевидно, что Recharge выглядит неплохо.
3:34
Видите, как здорово. Он, то есть, он сам
3:36
даже подсказывает в случае, если я не
3:38
знаю, как это работает.
3:40
Как должны загружаться данные? На
3:42
стороне клиента, на стороне сервера с
3:45
серверкомпонентами и периодическим
3:47
обновлением и комбинировано. Давайте
3:49
сделаем на стороне клиента в данном
3:50
случае. Нажимаю continue. Теперь он
3:52
начинает думать с учётом наших вводных
3:54
уже. И после этого, видите, он берёт и
3:57
описывает план реализации этой карточки
4:00
в формате MD. Значит, нам необходимо с
4:02
этим ознакомиться. То есть мы хотим
4:04
создать красивую карточку с текущей
4:06
ценой биткоина в USD линейный график
4:09
изменения цены за последние 7 дней. Он
4:11
уже здесь обозначил то, что мы будем
4:12
делать коинге и на стороне клиента, да,
4:15
то есть то, что мы ответили здесь
4:17
основные компоненты, это речар
4:20
интеграция, он описывает пути. И видите,
4:23
всё довольно-таки круто здесь работает.
4:25
Есть также тудушка. То есть дальше, если
4:28
вы знакомы с такой концепцией, как SDD,
4:30
Spec Driven Development, мы по факту её
4:32
здесь и реализовываем. То есть курсор
4:34
только нам помогает в данном случае это
4:37
концепция, когда ты вначале описываешь
4:39
какую-то спецификацию и после этого
4:41
даёшь уже лэмке её реализовать. Прелесть
4:46
данного подхода заключается в том, что
4:47
здесь мы можем всё это ещё исправлять
4:49
или дописывать. То есть для нас по сути
4:51
это некоторый шаблон. То есть,
4:52
предположим, что я не хочу там в USDT, я
4:55
хочу, чтобы это было в рублях. Я беру
4:57
спокойно меняю, могу менять название
4:59
компонентов, их декомпозицию. То есть
5:01
это абсолютно уже на ваше усмотрение, но
5:03
я думаю, вы понимаете, насколько сильно
5:05
это всё ускоряет разработку. Ну, и
5:08
делает её более качественной. Остальное
5:10
меня, в принципе, всё устраивает. Дальше
5:11
я нажимаю build.
5:14
Ну и после этого уже, когда мы всё
5:16
утвердили,
5:17
LM начинает строить наш функционал. Всё,
5:20
он говорит: «Отлично, начинаю реализацию
5:22
плана, буду последовательно выполнять
5:24
все задачи». Ну и вот он пошёл
5:26
устанавливать уже библиотеки. Давайте
5:28
посмотрим, что же получилось в итоге.
5:29
Теперь смотрите, он говорит, что он всё
5:31
завершил, то есть он написал отчёт по
5:33
поводу того, какие были компоненты
5:34
сделаны, что было интегрировано на
5:37
главную. Допустим, я нажимаю Kep. Ну
5:39
давайте посмотрим, как это работает. И
5:41
смотрите, какая красота получилась у нас
5:44
в данном проекте. У нас есть цена
5:47
биткоина в рублях, есть изменение
5:50
графика, есть изменение цены и,
5:53
собственно говоря, есть график, который
5:55
достаточно круто показывает. И мы тем
5:57
самым уже больше приближаемся с таким
5:59
функционалом в роль проектировщика,
6:01
когда нам нужно продуктовое видение,
6:03
когда нам нужно понимать всё-таки, что
6:05
мы хотим построить и из чего это
6:07
состоит, декомпозировать задачу и уже
6:09
меньше вникать непосредственно в сам
6:11
код. Я про это рассказывал на
6:13
конференции, выкладывал на YouTube
6:15
канале. Давайте, раз мы здесь, покажу
6:17
следующую прикольную фишку, которая
6:19
появилась во второй версии курсора. И
6:21
когда вы работаете с внутренним
6:23
браузером, во-первых, это приятно, что
6:25
не нужно больше никуда ходить, но
6:27
во-вторых, здесь есть очень классная
6:30
фишка, когда мы можем брать и выбирать
6:32
конкретные элементы с интерфейсом
6:34
курсора. Например, я выберу э данный
6:38
элемент. Видите, он сразу же у нас уже
6:40
летит в контекстное окно взаимодействия
6:43
с агентом. И я могу точечно сказать, что
6:47
я хочу изменить, например, в этом
6:49
компоненте, например, такой промт. То
6:52
есть первое, я хочу поменять здесь
6:53
шрифт, и он уже точно понимает, про
6:55
какой элемент мы говорим. Ну и второе,
6:57
давай сделаем красивое форматирование
7:00
для отображения цены. Я надеюсь, что он
7:03
сможет что-нибудь здесь предпринять. И
7:05
вуаля, смотрите, он действительно всё
7:06
нам сделал. Теперь у нас здесь применён
7:09
шрифт работа. Ну и, соответственно,
7:12
форматирование данного элемента, оно
7:13
тоже стало лучше. То есть теперь с
7:15
помощью этой кнопочки вы можете не
7:16
гадать, можете прямо указывать курсору,
7:19
что ему необходимо делать, и он будет
7:21
работать с этим элементом. Следующий
7:22
полезный инструмент, который есть — это
7:24
работа с изображениями прямо внутри
7:27
агента. Смотрите, для этого я создам
7:29
новый чат для того, чтобы был очищен
7:31
контекст. И, предположим, я хочу сделать
7:34
это приложение в стиле другого
7:37
интерфейса. Для этого я взял тот же
7:39
самый Конгека. Ну и, предположим,
7:42
давайте я сделаю скриншот
7:50
данного интерфейса, после чего я захожу
7:52
в курсор и просто беру и вставляю сюда
7:55
его. То есть, видите, тут изображение
7:56
появляется. И дальше я говорю: «Сделай
7:59
дизайн нашего приложения, как на
8:00
скрине». Всё. Нажимаю Enter. И теперь
8:04
просто на самом деле происходит магия,
8:06
потому что агенты, они прекрасно умеют
8:09
интерпретировать и работать с
8:11
изображениями. Мы просто дали некоторый
8:13
референс и просим, чтобы он повторил
8:16
его. Давайте посмотрим, как вообще
8:17
получится у него это сделать или нет. Но
8:19
он уже начал планировать следующие шаги
8:21
и читать наши документы. Причём, видите,
8:23
он сейчас пишет: «Отлично, я вижу
8:24
текущее состояние приложения. Сейчас
8:25
переделаю дизайн в соответствии со
8:27
скриншотом». Тёмная тема. Двухколоночный
8:31
макет с детальной статистикой. слева и
8:33
большим графиком справа. И вуаля,
8:35
смотрите, какую красоту мы получили. То
8:37
есть я просто закину сюда скриншот, и он
8:40
сделал очень похожий дизайн. Тут есть
8:42
небольшая проблема с графиком, то, что
8:44
он так отображается, но я сейчас не буду
8:46
уже его исправлять. Я думаю, вы
8:47
понимаете механику. А факт в том, что он
8:50
сделал это очень и очень круто. Ну и
8:52
дальше остаётся уже дорабатывать
8:53
какие-то точечные элементы. Кстати,
8:55
говоря про ещё одну прикольную фишку. В
8:58
случае, если вам всё это не нравится, вы
8:59
сделали что-то с агентом, то вы всегда
9:02
можете нажать эту кнопочку для того,
9:04
чтобы вернуть на прошлое состояние
9:07
приложения.
9:08
То есть он сохраняет
9:10
предыдущее состояние, примерно как
9:12
система Git. И в случае, если произошла
9:14
какая-то ошибка или какие-то неточности,
9:16
вы всегда можете сказать, что продолжай,
9:19
верни, и он вернёт всё, как и было. То
9:22
есть можно будет новой итерацией или
9:24
новым промтом попробовать сделать этот
9:26
функционал. Хочу показать следующие
9:28
полезные фишки. Когда мы работаем с
9:30
агентом, то вы понимаете, что это вот
9:32
контекстное окно, и оно забивается, то
9:34
есть и нашими импутами, и то, что выдаёт
9:37
непосредственно сама lm и так далее. И
9:39
бывают ситуации, когда нам нужно взять и
9:42
сохранить текущий контекст. Вот для
9:44
этого мы можем здесь нажать три точки и
9:45
сказать duplicate chatт. Тем самым мы
9:48
получаем новый чат с тем контекстом,
9:51
который был, на каком состоянии мы его
9:53
забрали. И также мы можем с ним здесь
9:55
работать, то есть сделать разные задачи,
9:57
уже сохраняя тот или иной контекст.
9:59
Следующая фишка, которая работает с
10:01
контекстом- это когда, опять же, у нас
10:03
много контекста, и мы можем его
10:05
адаптировать для того, чтобы он не вышел
10:08
за лимиты. То есть, когда у нас уже
10:09
здесь много сообщений достаточно и мы
10:11
при этом хотим сохранить этот чат, мы
10:13
можем написать команду summarize. И тем
10:17
самым, что сделает LLM внутри курсора?
10:20
он возьмёт весь а диалог, который есть в
10:24
данном чате, и скомпилирует его в одно
10:27
короткое сообщение для того, чтобы
10:28
очистить контекст. Это очень классно
10:31
работает, и для каких-то сложных
10:33
длительных задач вы можете это
10:35
использовать. И как видите, он выдаёт
10:36
нам здесь информацию про то, что чат
10:38
контекст он был summarized. Можем
10:40
изучить подробнее про это. И дальше он
10:43
говорит, что здесь было кратко. Вот,
10:46
соответственно, дальше можем уже с этим
10:47
работать. И тоже довольно-таки полезная
10:50
функция, но единственное, что, конечно,
10:52
лучше каждый раз создавать новый чат,
10:54
чтобы оставлять контекст как можно более
10:56
чистым, потому что это принцип работы с
10:59
лM, когда он у них забивается. Кстати,
11:02
очень полезная фишка есть для того,
11:04
чтобы отслеживать вообще контекст. Она
11:06
доступна здесь, да, нужно было немного
11:08
растянуть. И мы видим, что на текущий
11:10
момент у нас использовано 15% контекста.
11:14
То есть Sonet 4,5 он нам предоставляет
11:16
200.000 токенов. И прямо сейчас у нас
11:19
использовано 30.000 из них токенов. То
11:22
есть, соответственно, у нас есть ещё
11:23
порядка там
11:25
70.000 токенов, которые мы можем забить
11:27
в этом чатике. Но опять же лучше, если
11:30
вы будете создавать новый чатик каждый
11:32
раз. Теперь я вам хочу показать одну
11:34
прекрасную просто фишку, которая есть в
11:36
курсоре, которая позволяет
11:38
внутри вашего проекта работать с гитом
11:42
и, например, делать из агента внутри
11:44
курсора полноценного ревюера вашего
11:47
кода. Как это работает? Значит, мы можем
11:50
через символ собаки обращаться к
11:52
контексту. В контексте нам доступны
11:54
различные файлы, папки. То есть мы можем
11:57
напрямую взаимодействовать и с какими-то
12:01
файлами, то есть указывать, какой
12:02
функционал там реализовывать. Но также,
12:05
если мы посмотрим, то доступны и
12:08
функционал, связанный с терминалом, с
12:10
браузером или, например, с гитом, где мы
12:14
обращаемся к текущей ветке, то есть это
12:17
разница между мейнбранчем. И здесь мы
12:20
можем сказать
12:21
курсору что-нибудь в таком духе: «Изучи
12:23
все изменения и дай мне знать, что можно
12:25
улучшить. и есть ли какие потенциальные
12:28
проблемы. То есть по факту мы этот
12:30
проект сгенерировали с помощью
12:31
искусственного интеллекта. И сейчас мы
12:33
просим искусственный интеллект для того,
12:35
чтобы он взял и сделал ревью на
12:36
изменение искусственного интеллекта. Но
12:38
в любом случае у вас появляется
12:40
возможность сделать авторевьюера внутри
12:42
курсора. И я считаю, это очень классная
12:44
фишка, потому что вы тем самым можете до
12:48
того, как закомитить что-то уже в
12:50
продакш там или в соответствующую ветку,
12:53
во всяком случае посмотреть какие-то
12:55
потенциально слабые места, которые вот
12:58
можно на таком этапе изучить. И, как
13:00
видите, мы получаем довольно-таки
13:04
интересный ответ про то, что есть
13:07
критические проблемы, неиспользуемая
13:10
зависимость.
13:12
График без осеи легенды, отсутствие
13:14
обработки Rimit, нефункциональные кнопки
13:18
какие-то есть. Представляете, сколько
13:19
всего интересного можно обнаружить? То
13:21
есть тем самым мы можем даже
13:23
оптимизировать проект. Ну, помимо того,
13:25
что он ругает, он также ещё и хвалит. То
13:28
есть я считаю, что это одна из крутейших
13:30
фишек. Ну и, как вы понимаете, то есть
13:31
можно через этот контекст
13:33
взаимодействовать с другими фичами и
13:36
делать что-то подобное, а не просто
13:37
генерировать код. Ещё один полезный
13:39
инструмент, который я хочу показать —
13:41
это хитрое правило для работы в курсоре.
13:43
Для того, чтобы делать правила, мы
13:45
переходим в настройки. Дальше переходим
13:47
в Rules and Commands. И, собственно
13:50
говоря, здесь мы можем добавлять как
13:53
правила, которые действуют на весь, в
13:55
принципе, курсор, так и некоторые
13:57
правила, которые работают только для
13:59
проекта. В моём случае я добавил здесь
14:02
одно правило с Smart. И здесь есть
14:05
заранее готовое описание, которое делает
14:07
курсор намного-намного более
14:09
производительным и эффективным с точки
14:11
зрения взаимодействия с пользователем.
14:13
То есть он здесь убирает какие-то
14:14
различные лишние строчки информации,
14:17
которые он выдаёт, дубликации кода и
14:20
самопроверки. Вы можете получить данный
14:23
промт у меня в Telegram-канале. Я его
14:25
выложил и использовать его для того,
14:27
чтобы ваша работа с курсором была чуть
14:29
лучше.
14:30
И ещё одна фишка, которая крайне важна
14:33
для оптимизации работы курсора. У нас
14:37
есть папка курсор Rules. И здесь можем
14:39
создать в точке курсор новую папку,
14:41
которая называется Commands.
14:44
И в папке commands я создаю новый файл,
14:46
который назову, например, commit.m.
14:51
Дальше здесь я описываю то, что я хочу,
14:54
чтобы данная команда делала. Например, я
14:57
хочу, чтобы он проанализировал все
14:59
изменения в текущей ветке и сделал комит
15:02
с точным описанием того, что я сделал.
15:04
То есть, по сути, я заставляю сейчас
15:05
курсор взять, проанализировать все
15:07
текущие изменения в ветке и за меня
15:10
реализовать вот это вот GIT работу.
15:13
Далее я перехожу в поле работы с агентом
15:16
и вызываю команду комит. И, как видите,
15:19
он сделал для нас прекраснейший комит,
15:23
где он и говорит про то, что вот его а
15:25
айдишник, есть основные изменения. Можем
15:28
посмотреть на gitстатус,
15:32
то, что всё отлично, действительно, мы
15:33
всё закомитили. То есть таким вот
15:35
образом, создавая команды, вы можете
15:37
брать и автоматизировать часть работы в
15:40
курсоре под ваш проект. Вы можете
15:42
создавать команды, которые будут
15:43
создавать по реквесты, соединяясь сразу
15:46
же с вашим гитхабом или другой системой,
15:49
где вы хостите ваш код, и быстрее
15:52
работать с кодом. Надеюсь, вам эти
15:53
понравились инструменты, которые были в
15:55
этом видео. Ставьте
15:58
лайки, реакции, если хотите ещё
16:00
что-нибудь полезного. Подписывайтесь на
16:02
Телегу, там куча дополнительного
16:04
материала. Плюс для вас бонус — это
16:05
полезный, абсолютно бесплатный GPT,
16:07
который оптимизирует ваши промты.