😇

僕が考えたCursorの設定管理方法

に公開

Cursor 設定・管理ガイド

このドキュメントは、AIコードエディタ「Cursor」の設定と管理方法について、公式にサポートされているベストプラクティスに基づきつつ、具体的な設定例を豊富に盛り込んで詳細に解説します。

概要: 正しい設定管理の考え方

Cursorの設定は、そのベースであるVS Codeの仕組みを継承しています。

正しい設定管理は、以下の公式なファイル構成で行います。

  1. ユーザー設定 (PC全体で共通)

    • settings.json: エディタの見た目や動作に関する個人の基本設定。
    • keybindings.json: 個人のキーボードショートカット。
    • 場所:
      • macOS: ~/Library/Application Support/Cursor/User/
      • Windows: %APPDATA%\Cursor\User\
      • Linux: ~/.config/Cursor/User/
  2. プロジェクト設定 (チームで共有)

    • .vscode/settings.json: プロジェクト固有の設定(フォーマッタ、リンターなど)。
    • .vscode/extensions.json: プロジェクト推奨拡張機能リスト。
    • .cursor/rules/*.mdc: プロジェクト固有のAIへの指示書(ルール)。これがAIの振る舞いを制御する核心です。

設定の優先順位: プロジェクト設定 (.vscode/ or .cursor/) > ユーザー設定 > デフォルト設定


1. エディタ基本設定 (settings.json)

エディタの基本的な挙動や見た目を定義します。ユーザー設定、プロジェクト設定のどちらにも配置できますが、チームで統一したい項目はプロジェクトの.vscode/settings.jsonに記述します。

実践的な設定例 (settings.json)

// settings.json (ユーザー設定 or .vscode/settings.json)
{
  // -------------------------------------
  // エディタ表示設定 (Editor Appearance)
  // -------------------------------------
  "editor.fontFamily": "JetBrains Mono, Menlo, Monaco, 'Courier New', monospace",
  "editor.fontSize": 14,
  "editor.wordWrap": "on", // 行の折り返しを有効化
  "editor.minimap.enabled": true, // ミニマップの表示
  "editor.rulers": [80, 100, 120], // 80, 100, 120文字目に縦線を表示
  "editor.renderWhitespace": "all", // すべての空白文字を可視化
  "editor.renderControlCharacters": true,
  "editor.guides.bracketPairs": true, // 対応する括弧のガイド線を表示
  "editor.bracketPairColorization.enabled": true, // 括弧を色分け
  "editor.semanticHighlighting.enabled": true, // セマンティックハイライトを有効化

  // -------------------------------------
  // コーディング・保存時の動作 (Coding & Saving Behavior)
  // -------------------------------------
  "editor.tabSize": 2, // タブのサイズをスペース2つ分に
  "editor.formatOnSave": true, // 保存時に自動フォーマット
  "editor.formatOnPaste": true, // ペースト時に自動フォーマット
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit" // ESLintのルールで自動修正
  },
  "editor.suggestSelection": "first", // 常に最初の候補を選択
  "editor.acceptSuggestionOnEnter": "on", // Enterキーで補完を確定

  // -------------------------------------
  // ファイル管理と検索 (File Management & Search)
  // -------------------------------------
  "files.autoSave": "afterDelay", // 一定時間後に自動保存
  "files.autoSaveDelay": 1000, // 自動保存までの時間 (ms)
  "search.exclude": { // 検索対象から除外するフォルダ
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true,
    "**/*.code-search": true
  },
  "search.useIgnoreFiles": true, // .gitignoreファイルの設定を検索にも適用

  // -------------------------------------
  // パフォーマンス最適化 (Performance Optimization)
  // -------------------------------------
  "files.watcherExclude": { // ファイル変更監視から除外するフォルダ
    "**/.git/objects/**": true,
    "**/node_modules/**": true,
    "**/dist/**": true
  },
  "editor.largeFileOptimizations": true, // 大きなファイルを開く際の最適化

  // -------------------------------------
  // 言語固有の設定 (Language Specific Settings)
  // -------------------------------------
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter"
  },

  // -------------------------------------
  // セキュリティ設定 (Security Settings)
  // -------------------------------------
  "security.workspace.trust.enabled": true,
  "security.workspace.trust.untrustedFiles": "prompt",

  // -------------------------------------
  // 更新設定 (Update Settings)
  // -------------------------------------
  "update.mode": "default", // デフォルトの更新チャネルを使用
  "update.showReleaseNotes": true
}

2. AI機能の設定 (settings.jsonRules)

AIの基本的な設定は settings.json で行い、AIの具体的な振る舞いや知識は「Rules」で定義します。

2.1. AIの基本動作設定 (settings.json)

AIモデルの選択、応答の多様性、プライバシーモードなどを設定します。

// settings.json の中に記述
{
  // (上記のエディタ設定に続けて記述)

  // -------------------------------------
  // Cursor AI 基本設定 (AI Basic Configuration)
  // -------------------------------------
  "cursor.ai": {
    "model": {
      // "auto-select"(推奨), "claude-3-5-sonnet-20240620", "gpt-4o" など
      "default": "auto-select",
      // 複雑なタスクや深い思考が必要な場合、より強力なモデルを自動選択させる
      "complex": "claude-3-opus-20240229"
    },
    // 応答の多様性を設定 (0.0: 決定的, 1.0: 創造的)。安定性を求めるなら低め (0.1 ~ 0.3) が推奨
    "temperature": 0.2,
    "autoEnable": true, // 自動でAI機能を有効化
    "autoComplete": "enabled", // AIによる自動補完を有効化
    "autoCompleteDelay": 300 // 自動補完が表示されるまでの遅延 (ms)
  },

  // -------------------------------------
  // プライバシーとログ (Privacy & Logging)
  // -------------------------------------
  "cursor.privacyMode": true, // ★重要: 有効にするとコードがAIの学習に使われなくなる
  "cursor.log.level": "info" // ログレベル (デバッグ時は "debug" にする)
}

2.2. AIへの指示書 (Rules)

これがCursorの真価を発揮する部分です。AIにプロジェクトの「お作法」を教え込みます。

Global Rules (個人用のAIへの指示)

すべてのプロジェクトで共通して適用したい、あなた個人のAIへの指示です。

  • 設定場所: Cmd + , > General > Rules for AI
  • 設定例:
    # 私のコーディングスタイル
    - 常に日本語で、丁寧かつ技術的に正確な説明をしてください。
    - 複雑なコードには、その意図を説明するコメントを必ず追加してください。
    - 新しい関数やクラスを生成する際は、JSDocやDocstring形式でドキュメントも同時に生成してください。
    - クリーンアーキテクチャの原則を意識してコードを提案してください。
    

Project Rules (チームで共有するAIへの指示)

プロジェクト固有のルールを .cursor/rules/ ディレクトリ内の .mdc ファイルに記述します。これらはGitで管理し、チーム全員で共有します。

例1: フロントエンド規約 (.cursor/rules/frontend.mdc)
---
description: "React/Next.jsプロジェクトのフロントエンド開発規約"
globs:
  - "src/app/**/*.tsx"
  - "src/components/**/*.tsx"
---
# フロントエンド開発ルール

## 1. スタイリング
- スタイリングにはTailwind CSSを必ず使用します。
- CSS Modulesやstyled-componentsは使用しません。
- `clsx`ライブラリを使って条件付きクラスを管理してください。

## 2. コンポーネント設計
- コンポーネントはアトミックデザインの考え方に基づき、`src/components/ui` (再利用可能なUI部品) と `src/components/features` (機能単位の部品) に分けてください。
- すべてのコンポーネントは `React.FC` を使用し、Propsには型定義を必ず付けてください。

## 3. 状態管理
- シンプルな状態は `useState` を使用します。
- 複雑な状態管理やグローバルな状態にはZustandを使用します。状態管理ストアは `src/stores/` 以下に配置してください。

## 4. コードスタイル
- `import`文は以下の順序で並べてください: React -> Next.js -> 外部ライブラリ -> 絶対パスの内部モジュール -> 相対パスの内部モジュール。
- このルールに関連するファイルとして、既存のユーティリティ関数を参照してください: @src/lib/utils.ts
例2: バックエンド規約 (.cursor/rules/backend.mdc)
---
description: "Node.js/Expressを使ったAPIサーバーの開発規約"
globs:
  - "src/server/**/*.ts"
  - "src/pages/api/**/*.ts"
---
# バックエンド開発ルール

## 1. API設計
- RESTful APIの原則に従ってください。
- エンドポイントのパスは複数形を使用します (例: `/api/users`)。
- エラーレスポンスは、`{ "error": { "message": "..." } }` という形式のJSONで返してください。

## 2. バリデーション
- リクエストのバリデーションには `zod` を使用します。
- スキーマ定義は `src/lib/schemas.ts` にまとめてください。

## 3. データベース
- データベース操作にはPrisma ORMを使用します。
- Prismaスキーマは `prisma/schema.prisma` にあります。

## 4. セキュリティ
- パスワードは `bcrypt` を使ってハッシュ化してください。
- APIキーのような機密情報は、コードに直接書き込まず、環境変数 (`process.env`) から読み込むようにしてください。

3. 拡張機能の管理 (.vscode/extensions.json)

チームで使うべき拡張機能を定義し、新規参画者がすぐに環境を整えられるようにします。

// .vscode/extensions.json
{
  "recommendations": [
    // 必須級
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "eamodio.gitlens",

    // 推奨
    "streetsidesoftware.code-spell-checker",
    "wayou.vscode-todo-highlight",
    "gruntfuggly.todo-tree",
    "oderwat.indent-rainbow",
    "pkief.material-icon-theme",

    // フロントエンド開発向け
    "bradlc.vscode-tailwindcss",
    "styled-components.vscode-styled-components",

    // Python開発向け
    "ms-python.python",
    "ms-python.black-formatter",
    "ms-python.isort"
  ]
}

このファイルをプロジェクトルートの .vscode ディレクトリに配置しておくと、プロジェクトを開いた際に未インストールの拡張機能があれば、右下にインストールを推奨する通知が表示されます。

Discussion