Open10

Cursor の使い方

Cursor
ikeponikepon
  • Cursor Tab
    • コード挿入箇所だけでなく、その周辺の編集も提案する
    • 最近の変更と linter のエラーに基づいて提案する
    • 変更を accept する場合は Tab, reject は Esc
    • 部分的に accept する場合は Ctrl/Command ->
    • GitHub Copilot は 1 行、Cursor は複数行
  • auto-import
    • エディタのカーソルを合わせて command + . でインポートの suggest を提示できる
  • カーソル予測
    • コード編集した時、次にどこにカーソルを移動するか、自動で判定して Tab で移動できる
ikeponikepon

  • Agent

    • command + l で起動

  • Agent の mode

    • Agent
      • コードベースを学習し、変更を加える
    • Ask
      • コードベースに関する説明と質問に対する答え
      • コードベースへの変更は行わない読み取り専用のモード
    • Manual
      • こちらが提供したコンテキストのみで編集を行う
    • Custom Modes
      • 特定のワークフローに沿ったカスタムモードを作る

  • Agent のコンテキスト理解

    • 今開いているファイルを分析する
    • 特定のコードを参照する場合は @-symbols を使う
    • プロジェクト構成
ikeponikepon

Agent Mode

コードの探索や変更の計画と実行を自動で行う AI agent

  • コードの探索やドキュメントを読んだり、Webブラウズしたりターミナルでコマンド実行したりなど、いろんなツールを持っていて、すべて有効化されている
    • tools: https://docs.cursor.com/chat/tools
      • chat mode の時に使えるツール一覧
        • Read File: プランによって読み込めるコード行数が変わるかも
        • List Directory: ディレクトリ構造を読み込む
        • Codebase: インデックスされたコードベースから検索を行う
        • Grep: 特定のキーワードやパターンから検索する
        • SearchFiles: 曖昧な単語でもファイルを検索できる
        • Web: 検索クエリを生成し、Web検索を行う
        • Fetch Rules: スールの種類と説明に基づいて特定のルールを取得する
        • Edit & Reapply: ファイル変更の提案と自動適用
        • Delete File: 自動ファイル削除
        • Terminal: ターミナルのコマンドを自動実行、結果をモニタリング
        • Toggle MCP Servers: 利用できる MCP server の ON/OFF ができる
        • Auto-Apply Edits: 確認なしで編集を適用
        • Auto-run: ターミナルコマンドと編集の適用を自動で行う
        • Auto-fix Errors: 自動的に linter errors や warnings を修正する
        • Guardrails: 特定のツールの自動実行を制御する
  • Agent がタスクを完了するためのフロー
    • 要求理解
      • エージェントモードは、タスクの要件と目標を完全に理解するために、あなたのリクエストとコードベースのコンテキストを分析します。
    • コード探索
      • エージェントは、お客様のコードベース、ドキュメント、ウェブを検索して、関連ファイルを特定し、現在の実装を理解することができます。
    • 変更を計画
      • 分析に基づいて、エージェントはタスクをより小さなステップに分解し、利用可能なコンテキストから学習しながら変更を計画します。
    • 変更の実行
      • 計画に従って必要な変更を行う
      • 同様に潜在的に必要なライブラリーやコマンドの実行を行う
    • 結果の確認
      • 変更を適用したらその変更が正しいものか確認する
      • lint error や問題に気づいたら修正を試みる
    • タスク完了
      • 変更をサマライズする
ikeponikepon

Ask Mode

AI 検索 & クエリーによってコードベースを探索し学習する

  • 質問やコードベースに関する探索と学習をするためなので、read-only となる
    • そのため、コードの学習や変更前の解決手段の計画に使える

Manual Mode

ターゲットとなるファイルを指定して、詳細なコード変更をユーザー制御のツールに基づいて行う

  • どのような変更がどこで必要なのかが正確にわかっている場合、ターゲットを絞ってコード修正するために設計されたモード
  • コードベースを探索したり、コマンドの実行はない
  • ユーザーの特定の指示とコンテキストに依存して実行する
ikeponikepon

Custom modes

https://docs.cursor.com/chat/custom-modes

特定のワークフローに合わせてツールやプロンプトをカスタマイズしたモードを作成できる
作成した mode は built-in のagent, ask, manual mode に追加される

Custom modes are currently in beta.
You can enable custom modes from Settings → Features → Chat → Custom modes

ikeponikepon

Apply

  • チャット内で Apply を押せば丸っと反映される
  • コードブロックに対して Accept と Reject があるので、その単位での選択も可
    • command Enter: accept
    • command Backspace: reject

Inline Edit: Cmd + K

Prompt bar を使用してコードを生成、編集、質問する方法

Cursorはデフォルトでインクルードした @symbols に加えて、コード生成を改善するために、さまざまな種類の有用な情報を見つけようとします。

追加のコンテキストには、関連ファイル、最近閲覧したファイルなどが含まれる
収集後、Cursorは編集/生成との関連性によってコンテキスト項目をランク付けし、大規模な言語モデルのコンテキストで上位の項目を保持する

Terminal Cmd K

Cursorのターミナルで Cmd K をすると自然言語で必要なコマンドを書いてくれる

ショートカット

https://docs.cursor.com/kbd

Codebase Indexing

でかいリポジトリの場合はインデックスするファイルを制御できる
https://docs.cursor.com/context/codebase-indexing#working-with-large-monorepos

ikeponikepon

Rules

3種類のルールがある

  • Project Rules

    • .cursor/rules に置く

  • User Rules

    • Cursor の設定をグローバルで管理

  • Memories

    • チャット内の会話から自動で rule を作成する

  • LLM は、記憶を保持しない。

    • ルールは、プロンプトレベルで永続的で再利用可能なコンテキストを提供する

  • ルールが適用されると、その内容は model context の先頭に含まれる

    • AIがコードを生成している場合でも、編集を解釈している場合でも、ワークフローを支援している場合でも、一貫したガイダンスが提供される

Project rules

  • file は .cursor/rules に置く
    • サブディレクトリは .cursor/rules のスコープを含むことができる
  • 以下のようなものを置く例
    • コードベースに関するドメイン固有の知識をエンコードする
    • プロジェクト固有のワークフローやテンプレートを自動化する
    • スタイルやアーキテクチャの決定を標準化する
  • ファイルは .mdc 拡張子
    • Rule Type
      • Always: コンテキストに常に含める
      • Auto Attached: glob パターンにマッチしたファイルに常に含める
      • Agent Requested: AIに利用されるもので、AIが利用を決める
        • description は必須
      • Manual: 明示的にユーザーが指定した場合に利用
  • コマンドパレットから New Cursor Rule で作成できる
    • これは ,cursor/rules ディレクトリ以下に作られる
---
description: RPC Service boilerplate
globs: 
alwaysApply: false
---

- Use our internal RPC pattern when defining services
- Always use snake_case for service names.

@service-template.ts # これで参照ファイルを指定してコンテキストを読み込んでいる
  • Chat 内で /Generate Cursor Rules コマンド実行でも作れる

Nested rules

指定ディレクトリは以下に .cursor/rules をおいて rules を管理できる

  • ディレクトリが参照されたときに自動でアタッチされる
  • context picker と agent が利用可能なルールリスト
  • ドメイン固有のルールを、関連するコードに近いところで整理するのに最適
  • モノレポや、固有のガイダンスが必要な異なるコンポーネントを持つプロジェクトで特に役立つ

ベストプラクティス

優れたルールは、対象が絞られ、実行可能で、スコープが設定されている。

  • ルールは簡潔に。500行以下が良い目標

  • 大きな概念を複数の、構成可能なルールに分割する

  • 必要に合わせて、具体例や参照ファイルを提供する

  • あいまいなガイダンスは避ける。

  • チャットでプロンプトを繰り返していることに気づいたら、ルールを再利用する。

  • ex: Domain-specific guidance
    Standards for frontend components and API validation

This rule provides standards for frontend components, ensuring consistent styling and animations:

When working in the components directory:

- Always use Tailwind for styling
- Use Framer Motion for animations
- Follow our component naming conventions

This rule enforces validation standards for API endpoints:

In the API directory:

- Use zod for all validation
- Define return types with zod schemas
- Export types generated from schemas
  • ex: Boilerplate and templates
    Templates for Express services and React components
This rule provides a template for creating new Express services:

Use this template when creating a new Express service:

- Follow RESTful principles
- Include error handling middleware
- Set up proper logging

@express-service-template.ts

This rule defines the structure for React components:

React components should follow this layout:

- Props interface at the top
- Component as named export
- Styles at the bottom

@component-template.tsx
  • ex: Workflow automation
Automating development workflows and documentation generation

This rule automates the app analysis workflow:

When I ask to analyze the app:

- Run the dev server with npm run dev
- Fetch logs from the console
- Suggest performance improvements

This rule helps generate documentation from code:

Help me draft documentation by:

- Extracting code comments
- Analyzing README.md
- Generating markdown documentation

User rules

Cursor Setting > Rules で定義される

  • すべての project に適用される
  • mdc はサポートされておらず、plain text のみ

Memories

  • Chat の会話から自動でルールを作成する
  • スコープは git repository
  • 内容は Cursor Settings > Rules から確認・削除できる
ikeponikepon

Managing Context

  • LLMのコンテキストは有限
  • Chat でのやり取りにおいて LLM は入力と出力の上限があるので、内容をサマライズして圧縮する
    • そのため、意図しない要約が発生することがある
  • それを防ぐために
    • 新しいタスクのときは、新しいチャットで行う
    • 大きなコンテキストを渡したい時は、適切なモデルを選択する
      • モデルによって受け取れるコンテキスト量が違う

その他

  • @Web で Web 検索ができる
  • @https://example.com/sample.pdf などで URL 先の内容を context として取り込める
    • PDF ファイルも読み取れる
  • @Past chats で過去のチャットのコンテキストを参照できる
  • # でファイルを選択できる
ikeponikepon

応用的な使い方はいろいろありそうなのでメモっておく

  • Cursor擦り倒すシリーズ
    • 「プロジェクトの前提」ってのは .cursor/rules に置くんだと思う
      • Rule: Always
    • 「対応すべきか？」、「詳細設計」「レビュー＆ブラッシュアップ」「最終的なドキュメントを生成」
      • この辺はそれぞれに対応したプロンプト
    • 個人のまとめ
      • 開発だけじゃなくて、仕様の検討とか影響範囲とか、いろいろなところに使えそう
      • プロンプトはスニペットとかに置いとけば良さそう
  • 「Cursor」で「難解コード」のリーディングがめちゃ楽になった話
    • これはいろいろ使えそう
    • 個人のまとめ
      • コードを読む機会はたくさんある
      • この方法で理解が短縮される、またはよくわからないものを理解できるなら良さそう
      • このような設計になっている理由は？とか聞くのは確かに良さそう
      • 改善点を聞くのも良い
  • 「Cursorで要件定義をめっちゃ簡単に」を「rules」にしてさらに簡単にした
    • trigger ってのがあるのか、これは良さそう
    • -> 公式ではなさそう