12 Cursor-лайфхаков, которые делают тебя быстрее на 10×
430 segments
Первый лайфхак относится к такой
концепции, как тд. Это когда нам нужно,
например, написать сложную функцию, и мы
заставляем курсор сразу же написать под
него тесты. То есть он вначале пишет
тесты и после этого пытается реализовать
функционал до тех пор, пока тесты это не
пройдут. Вот пример того, как выглядит
этот промт. Напиши мне функцию, я указал
контекст, где писать, для преобразования
Markдаdown в HTML. И сначала напиши
тесты, а затем дорабатывай код, пока все
тесты не начнут проходить. И, значит,
если мы всё это дело запускаем, то вы
увидите, что сейчас будет делать курсор.
Значит, он создаёт для нас сразу же
package, поскольку был проект совсем
пустой. Дальше он решает, какие
библиотеки использовать для того, чтобы
реализовать именно тестфункционал. После
этого он будет реализовывать саму
функцию, и дальше он будет запускать
тесты и параллельно исправлять ошибки.
И, как видите, он использовал
довольно-таки большое количество
тест-кейсов, потому что Markдау
переводить в HTML, там есть
довольно-таки много нюансов. И дальше
после этого он уже реализовывает сам
индекс JS, где происходит реализация
этой функции Markdown to HTML. После
чего мы видим важное сообщение, что все
21 тест прошли успешно, ноль ошибок, и
это означает, что функция с большей
вероятностью готова к использованию.
Соответственно, этот лайфхак вы можете
использовать, когда действительно нужно
написать какое-то сложное решение. И вы
даёте таким образом возможность для
курсора, чтобы он изначально продумал
сам тест-план, после чего реализовал
функцию. Второй лайфхак, который мне
очень нравится. Если вы хотите работать
на русском языке или на любом другом
языке в курсоре, то вы можете перейти в
настройки, дальше перейти в rules and
commands, и я пишу такое правило: always
answer in Russian language. Это означает
для него теперь, что он будет мне
отвечать на русском. Ну, мне в данном
случае это будет понятно.
Соответственно, вместо русского здесь
можете использовать любой другой язык и
тем самым сделать настройку под себя. На
всякий случай. Для того, чтобы добавить
новое правило, вы просто нажимаете add и
здесь описываете текстом, что вы хотите
здесь сделать. Следующий полезный
инструмент доступен в поле
взаимодействия с искусственным
интеллектом. Раньше мы могли выбирать
между агентом или спросить что-либо по
коду, но, кажется, со второй версии
появилась такая вещь, как план. И здесь
мы можем запланировать фишку, то есть
вначале её грамотно описать для курсора,
прямо внутри курсора, а только после
этого имплементировать. Допустим, я
забиваю такой промт, что я хочу, чтобы
на главной странице у меня была карточка
с текущей ценой биткоина и графиком его
цены за последнюю неделю. То есть в
плане я закидываю свою идею. И прежде,
чем мы будем его реализовывать в коде,
мы будем взаимодействовать с EI для
того, чтобы лучше оцифровать, как это
работает. И вот примерно как это
выглядит. Вначале клод начинает думать.
Сейчас у меня версия 4,5et.
И он говорит, что я помогу вам создать
карточку. Давайте посмотрим, что мы
можем с этим сделать. Он видит, что у
нас next проект Typecript. И после
этого, смотрите, то есть он формирует
набор вопросов, на которые нам
необходимо ответить для того, чтобы
лучше со своей стороны сформировать
задачу, чтобы не просто агент гадал, что
же там вы хотите сделать, а нет, мы
конкретно будем ему указывать. Давайте
посмотрим, что он нам здесь выдал. Какой
IP вы хотите использовать для получения
данных о биткоине? Бесплатный не требует
ключа. Давайте выберем Coin GEK IP.
Значит, второй вопрос. Какую библиотеку
для графиков вы предпосчитаете?
Recharts. Также он поясняет, что она
популярна для React, хорошо работает с
NextJS, Chart JS, Apex Chart. Ну,
очевидно, что Recharge выглядит неплохо.
Видите, как здорово. Он, то есть, он сам
даже подсказывает в случае, если я не
знаю, как это работает.
Как должны загружаться данные? На
стороне клиента, на стороне сервера с
серверкомпонентами и периодическим
обновлением и комбинировано. Давайте
сделаем на стороне клиента в данном
случае. Нажимаю continue. Теперь он
начинает думать с учётом наших вводных
уже. И после этого, видите, он берёт и
описывает план реализации этой карточки
в формате MD. Значит, нам необходимо с
этим ознакомиться. То есть мы хотим
создать красивую карточку с текущей
ценой биткоина в USD линейный график
изменения цены за последние 7 дней. Он
уже здесь обозначил то, что мы будем
делать коинге и на стороне клиента, да,
то есть то, что мы ответили здесь
основные компоненты, это речар
интеграция, он описывает пути. И видите,
всё довольно-таки круто здесь работает.
Есть также тудушка. То есть дальше, если
вы знакомы с такой концепцией, как SDD,
Spec Driven Development, мы по факту её
здесь и реализовываем. То есть курсор
только нам помогает в данном случае это
концепция, когда ты вначале описываешь
какую-то спецификацию и после этого
даёшь уже лэмке её реализовать. Прелесть
данного подхода заключается в том, что
здесь мы можем всё это ещё исправлять
или дописывать. То есть для нас по сути
это некоторый шаблон. То есть,
предположим, что я не хочу там в USDT, я
хочу, чтобы это было в рублях. Я беру
спокойно меняю, могу менять название
компонентов, их декомпозицию. То есть
это абсолютно уже на ваше усмотрение, но
я думаю, вы понимаете, насколько сильно
это всё ускоряет разработку. Ну, и
делает её более качественной. Остальное
меня, в принципе, всё устраивает. Дальше
я нажимаю build.
Ну и после этого уже, когда мы всё
утвердили,
LM начинает строить наш функционал. Всё,
он говорит: "Отлично, начинаю реализацию
плана, буду последовательно выполнять
все задачи". Ну и вот он пошёл
устанавливать уже библиотеки. Давайте
посмотрим, что же получилось в итоге.
Теперь смотрите, он говорит, что он всё
завершил, то есть он написал отчёт по
поводу того, какие были компоненты
сделаны, что было интегрировано на
главную. Допустим, я нажимаю Kep. Ну
давайте посмотрим, как это работает. И
смотрите, какая красота получилась у нас
в данном проекте. У нас есть цена
биткоина в рублях, есть изменение
графика, есть изменение цены и,
собственно говоря, есть график, который
достаточно круто показывает. И мы тем
самым уже больше приближаемся с таким
функционалом в роль проектировщика,
когда нам нужно продуктовое видение,
когда нам нужно понимать всё-таки, что
мы хотим построить и из чего это
состоит, декомпозировать задачу и уже
меньше вникать непосредственно в сам
код. Я про это рассказывал на
конференции, выкладывал на YouTube
канале. Давайте, раз мы здесь, покажу
следующую прикольную фишку, которая
появилась во второй версии курсора. И
когда вы работаете с внутренним
браузером, во-первых, это приятно, что
не нужно больше никуда ходить, но
во-вторых, здесь есть очень классная
фишка, когда мы можем брать и выбирать
конкретные элементы с интерфейсом
курсора. Например, я выберу э данный
элемент. Видите, он сразу же у нас уже
летит в контекстное окно взаимодействия
с агентом. И я могу точечно сказать, что
я хочу изменить, например, в этом
компоненте, например, такой промт. То
есть первое, я хочу поменять здесь
шрифт, и он уже точно понимает, про
какой элемент мы говорим. Ну и второе,
давай сделаем красивое форматирование
для отображения цены. Я надеюсь, что он
сможет что-нибудь здесь предпринять. И
вуаля, смотрите, он действительно всё
нам сделал. Теперь у нас здесь применён
шрифт работа. Ну и, соответственно,
форматирование данного элемента, оно
тоже стало лучше. То есть теперь с
помощью этой кнопочки вы можете не
гадать, можете прямо указывать курсору,
что ему необходимо делать, и он будет
работать с этим элементом. Следующий
полезный инструмент, который есть - это
работа с изображениями прямо внутри
агента. Смотрите, для этого я создам
новый чат для того, чтобы был очищен
контекст. И, предположим, я хочу сделать
это приложение в стиле другого
интерфейса. Для этого я взял тот же
самый Конгека. Ну и, предположим,
давайте я сделаю скриншот
данного интерфейса, после чего я захожу
в курсор и просто беру и вставляю сюда
его. То есть, видите, тут изображение
появляется. И дальше я говорю: "Сделай
дизайн нашего приложения, как на
скрине". Всё. Нажимаю Enter. И теперь
просто на самом деле происходит магия,
потому что агенты, они прекрасно умеют
интерпретировать и работать с
изображениями. Мы просто дали некоторый
референс и просим, чтобы он повторил
его. Давайте посмотрим, как вообще
получится у него это сделать или нет. Но
он уже начал планировать следующие шаги
и читать наши документы. Причём, видите,
он сейчас пишет: "Отлично, я вижу
текущее состояние приложения. Сейчас
переделаю дизайн в соответствии со
скриншотом". Тёмная тема. Двухколоночный
макет с детальной статистикой. слева и
большим графиком справа. И вуаля,
смотрите, какую красоту мы получили. То
есть я просто закину сюда скриншот, и он
сделал очень похожий дизайн. Тут есть
небольшая проблема с графиком, то, что
он так отображается, но я сейчас не буду
уже его исправлять. Я думаю, вы
понимаете механику. А факт в том, что он
сделал это очень и очень круто. Ну и
дальше остаётся уже дорабатывать
какие-то точечные элементы. Кстати,
говоря про ещё одну прикольную фишку. В
случае, если вам всё это не нравится, вы
сделали что-то с агентом, то вы всегда
можете нажать эту кнопочку для того,
чтобы вернуть на прошлое состояние
приложения.
То есть он сохраняет
предыдущее состояние, примерно как
система Git. И в случае, если произошла
какая-то ошибка или какие-то неточности,
вы всегда можете сказать, что продолжай,
верни, и он вернёт всё, как и было. То
есть можно будет новой итерацией или
новым промтом попробовать сделать этот
функционал. Хочу показать следующие
полезные фишки. Когда мы работаем с
агентом, то вы понимаете, что это вот
контекстное окно, и оно забивается, то
есть и нашими импутами, и то, что выдаёт
непосредственно сама lm и так далее. И
бывают ситуации, когда нам нужно взять и
сохранить текущий контекст. Вот для
этого мы можем здесь нажать три точки и
сказать duplicate chatт. Тем самым мы
получаем новый чат с тем контекстом,
который был, на каком состоянии мы его
забрали. И также мы можем с ним здесь
работать, то есть сделать разные задачи,
уже сохраняя тот или иной контекст.
Следующая фишка, которая работает с
контекстом- это когда, опять же, у нас
много контекста, и мы можем его
адаптировать для того, чтобы он не вышел
за лимиты. То есть, когда у нас уже
здесь много сообщений достаточно и мы
при этом хотим сохранить этот чат, мы
можем написать команду summarize. И тем
самым, что сделает LLM внутри курсора?
он возьмёт весь а диалог, который есть в
данном чате, и скомпилирует его в одно
короткое сообщение для того, чтобы
очистить контекст. Это очень классно
работает, и для каких-то сложных
длительных задач вы можете это
использовать. И как видите, он выдаёт
нам здесь информацию про то, что чат
контекст он был summarized. Можем
изучить подробнее про это. И дальше он
говорит, что здесь было кратко. Вот,
соответственно, дальше можем уже с этим
работать. И тоже довольно-таки полезная
функция, но единственное, что, конечно,
лучше каждый раз создавать новый чат,
чтобы оставлять контекст как можно более
чистым, потому что это принцип работы с
лM, когда он у них забивается. Кстати,
очень полезная фишка есть для того,
чтобы отслеживать вообще контекст. Она
доступна здесь, да, нужно было немного
растянуть. И мы видим, что на текущий
момент у нас использовано 15% контекста.
То есть Sonet 4,5 он нам предоставляет
200.000 токенов. И прямо сейчас у нас
использовано 30.000 из них токенов. То
есть, соответственно, у нас есть ещё
порядка там
70.000 токенов, которые мы можем забить
в этом чатике. Но опять же лучше, если
вы будете создавать новый чатик каждый
раз. Теперь я вам хочу показать одну
прекрасную просто фишку, которая есть в
курсоре, которая позволяет
внутри вашего проекта работать с гитом
и, например, делать из агента внутри
курсора полноценного ревюера вашего
кода. Как это работает? Значит, мы можем
через символ собаки обращаться к
контексту. В контексте нам доступны
различные файлы, папки. То есть мы можем
напрямую взаимодействовать и с какими-то
файлами, то есть указывать, какой
функционал там реализовывать. Но также,
если мы посмотрим, то доступны и
функционал, связанный с терминалом, с
браузером или, например, с гитом, где мы
обращаемся к текущей ветке, то есть это
разница между мейнбранчем. И здесь мы
можем сказать
курсору что-нибудь в таком духе: "Изучи
все изменения и дай мне знать, что можно
улучшить. и есть ли какие потенциальные
проблемы. То есть по факту мы этот
проект сгенерировали с помощью
искусственного интеллекта. И сейчас мы
просим искусственный интеллект для того,
чтобы он взял и сделал ревью на
изменение искусственного интеллекта. Но
в любом случае у вас появляется
возможность сделать авторевьюера внутри
курсора. И я считаю, это очень классная
фишка, потому что вы тем самым можете до
того, как закомитить что-то уже в
продакш там или в соответствующую ветку,
во всяком случае посмотреть какие-то
потенциально слабые места, которые вот
можно на таком этапе изучить. И, как
видите, мы получаем довольно-таки
интересный ответ про то, что есть
критические проблемы, неиспользуемая
зависимость.
График без осеи легенды, отсутствие
обработки Rimit, нефункциональные кнопки
какие-то есть. Представляете, сколько
всего интересного можно обнаружить? То
есть тем самым мы можем даже
оптимизировать проект. Ну, помимо того,
что он ругает, он также ещё и хвалит. То
есть я считаю, что это одна из крутейших
фишек. Ну и, как вы понимаете, то есть
можно через этот контекст
взаимодействовать с другими фичами и
делать что-то подобное, а не просто
генерировать код. Ещё один полезный
инструмент, который я хочу показать -
это хитрое правило для работы в курсоре.
Для того, чтобы делать правила, мы
переходим в настройки. Дальше переходим
в Rules and Commands. И, собственно
говоря, здесь мы можем добавлять как
правила, которые действуют на весь, в
принципе, курсор, так и некоторые
правила, которые работают только для
проекта. В моём случае я добавил здесь
одно правило с Smart. И здесь есть
заранее готовое описание, которое делает
курсор намного-намного более
производительным и эффективным с точки
зрения взаимодействия с пользователем.
То есть он здесь убирает какие-то
различные лишние строчки информации,
которые он выдаёт, дубликации кода и
самопроверки. Вы можете получить данный
промт у меня в Telegram-канале. Я его
выложил и использовать его для того,
чтобы ваша работа с курсором была чуть
лучше.
И ещё одна фишка, которая крайне важна
для оптимизации работы курсора. У нас
есть папка курсор Rules. И здесь можем
создать в точке курсор новую папку,
которая называется Commands.
И в папке commands я создаю новый файл,
который назову, например, commit.m.
Дальше здесь я описываю то, что я хочу,
чтобы данная команда делала. Например, я
хочу, чтобы он проанализировал все
изменения в текущей ветке и сделал комит
с точным описанием того, что я сделал.
То есть, по сути, я заставляю сейчас
курсор взять, проанализировать все
текущие изменения в ветке и за меня
реализовать вот это вот GIT работу.
Далее я перехожу в поле работы с агентом
и вызываю команду комит. И, как видите,
он сделал для нас прекраснейший комит,
где он и говорит про то, что вот его а
айдишник, есть основные изменения. Можем
посмотреть на gitстатус,
то, что всё отлично, действительно, мы
всё закомитили. То есть таким вот
образом, создавая команды, вы можете
брать и автоматизировать часть работы в
курсоре под ваш проект. Вы можете
создавать команды, которые будут
создавать по реквесты, соединяясь сразу
же с вашим гитхабом или другой системой,
где вы хостите ваш код, и быстрее
работать с кодом. Надеюсь, вам эти
понравились инструменты, которые были в
этом видео. Ставьте
лайки, реакции, если хотите ещё
что-нибудь полезного. Подписывайтесь на
Телегу, там куча дополнительного
материала. Плюс для вас бонус - это
полезный, абсолютно бесплатный GPT,
который оптимизирует ваши промты.
Ask follow-up questions or revisit key timestamps.
В данном видео представлен подробный обзор продвинутых возможностей AI-редактора Cursor. Автор демонстрирует практические лайфхаки: использование концепции TDD для написания тестов перед кодом, настройку языка ответов, работу в режиме планирования для сложных фич и применение спецификаций (SDD). Также рассматриваются инструменты взаимодействия с UI через внутренний браузер, создание дизайна по скриншоту, методы управления контекстом (summarize, duplicate) и автоматизация рабочих процессов, включая авто-ревью кода через Git и создание кастомных команд для коммитов.
Videos recently processed by our community