😇
僕が考えたCursorの設定管理方法
Cursor 設定・管理ガイド
このドキュメントは、AIコードエディタ「Cursor」の設定と管理方法について、公式にサポートされているベストプラクティスに基づきつつ、具体的な設定例を豊富に盛り込んで詳細に解説します。
概要: 正しい設定管理の考え方
Cursorの設定は、そのベースであるVS Codeの仕組みを継承しています。
正しい設定管理は、以下の公式なファイル構成で行います。
-
ユーザー設定 (PC全体で共通)
-
settings.json
: エディタの見た目や動作に関する個人の基本設定。 -
keybindings.json
: 個人のキーボードショートカット。 -
場所:
-
macOS:
~/Library/Application Support/Cursor/User/
-
Windows:
%APPDATA%\Cursor\User\
-
Linux:
~/.config/Cursor/User/
-
macOS:
-
-
プロジェクト設定 (チームで共有)
-
.vscode/settings.json
: プロジェクト固有の設定(フォーマッタ、リンターなど)。 -
.vscode/extensions.json
: プロジェクト推奨拡張機能リスト。 -
.cursor/rules/*.mdc
: プロジェクト固有のAIへの指示書(ルール)。これがAIの振る舞いを制御する核心です。
-
設定の優先順位: プロジェクト設定 (.vscode/
or .cursor/
) > ユーザー設定 > デフォルト設定
settings.json
)
1. エディタ基本設定 (エディタの基本的な挙動や見た目を定義します。ユーザー設定、プロジェクト設定のどちらにも配置できますが、チームで統一したい項目はプロジェクトの.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
}
settings.json
と Rules
)
2. AI機能の設定 (AIの基本的な設定は settings.json
で行い、AIの具体的な振る舞いや知識は「Rules」で定義します。
settings.json
)
2.1. AIの基本動作設定 (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`) から読み込むようにしてください。
.vscode/extensions.json
)
3. 拡張機能の管理 (チームで使うべき拡張機能を定義し、新規参画者がすぐに環境を整えられるようにします。
// .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