HomeVideos

12 Cursor-лайфхаков, которые делают тебя быстрее на 10×

Now Playing

12 Cursor-лайфхаков, которые делают тебя быстрее на 10×

Transcript

430 segments

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

который оптимизирует ваши промты.

Interactive Summary

В данном видео представлен подробный обзор продвинутых возможностей AI-редактора Cursor. Автор демонстрирует практические лайфхаки: использование концепции TDD для написания тестов перед кодом, настройку языка ответов, работу в режиме планирования для сложных фич и применение спецификаций (SDD). Также рассматриваются инструменты взаимодействия с UI через внутренний браузер, создание дизайна по скриншоту, методы управления контекстом (summarize, duplicate) и автоматизация рабочих процессов, включая авто-ревью кода через Git и создание кастомных команд для коммитов.

Suggested questions

5 ready-made prompts