【2026年版】Cursorおすすめ設定・拡張機能ガイド｜AIコーディングを最大限活用する方法

移行対象ファイル：
・settings.json（ユーザー設定）
・keybindings.json（キーバインド）
・~/.vscode/extensions/（拡張機能フォルダ）

おすすめのモデル設定：
・チャット：Claude Sonnet 4.6（バランスが良い）
・Composer：Claude Sonnet 4.6（複数ファイル編集に強い）
・Tab補完：cursor-small（高速レスポンス重視）

📋 .cursorrules のテンプレート例

あなたはシニアエンジニアです。以下のルールに従ってコードを書いてください。

■ 言語・フレームワーク：
・TypeScript + React + Next.js（App Router）
・スタイリングはTailwind CSS

■ コーディング規約：
・関数コンポーネントとhooksを使う（クラスコンポーネント禁止）
・変数名・関数名はcamelCase、コンポーネント名はPascalCase
・anyの使用は禁止。型を明示的に定義する
・コメントは日本語で書く

■ 回答スタイル：
・変更箇所のみ回答し、変更のない部分は省略する
・修正理由を簡潔に説明する

📋 settings.json

"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000

📋 おすすめ設定

Cursor Settings > Features > Copilot++

・Enable Copilot++：ON（Tab補完の有効化）
・Auto-Import：ON（補完時に自動でimport文を追加）
・Suggestion Count：3（複数候補を表示）

コンテキストの指定方法：
・@ファイル名：特定のファイルを参照させる
・@フォルダ名：フォルダ全体を参照させる
・@Web：Web検索結果を参照させる
・@Docs：公式ドキュメントを参照させる
・@Codebase：プロジェクト全体をセマンティック検索

📋 Composerの活用例

例1：新機能の追加
「ユーザープロフィール編集ページを作成してください。@components @api を参考にして、既存のデザインパターンに合わせてください」

例2：リファクタリング
「@utils/api.ts のfetch処理を共通化して、エラーハンドリングを統一してください。使用箇所もすべて更新してください」

例3：テスト追加
「@components/Button.tsx のユニットテストを作成してください。Jest + React Testing Libraryを使って、全てのpropsパターンをカバーしてください」

📋 Inline Editの便利な使い方

・コード選択 → Ctrl+K →「TypeScriptの型を追加して」
・コード選択 → Ctrl+K →「エラーハンドリングを追加して」
・コード選択 → Ctrl+K →「パフォーマンスを改善して」
・コード選択 → Ctrl+K →「テストしやすいようにリファクタリングして」
・コード選択なし → Ctrl+K →「ここにバリデーション関数を書いて」

📋 設定方法

Cursor Settings > Features > Docs

1. 「+ Add new doc」をクリック
2. ドキュメントのURLを入力（例：https://nextjs.org/docs）
3. 名前をつけて保存

■ 登録しておくと便利なドキュメント：
・Next.js（https://nextjs.org/docs）
・Tailwind CSS（https://tailwindcss.com/docs）
・Prisma（https://www.prisma.io/docs）
・Supabase（https://supabase.com/docs）

📋 拡張機能情報

ESLint（dbaeumer.vscode-eslint）
Prettier（esbenp.prettier-vscode）

■ 役割：コードの品質チェック（ESLint）と自動フォーマット（Prettier）
■ なぜ必要：CursorのAIが生成したコードにもLintエラーが含まれることがある。保存時に自動修正されるように設定しておくと安心

■ おすすめ設定（settings.json）：
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }

📋 拡張機能情報

GitLens（eamodio.gitlens）

■ 役割：各行の変更履歴・コミット情報をインラインで表示
■ なぜ必要：AIが書いたコードと自分が書いたコードの区別、変更履歴の追跡に必須。「誰がいつ変更したか」が一目でわかる

📋 拡張機能情報

Error Lens（usernamehw.errorlens）

■ 役割：エラー・警告をコードの横にインライン表示
■ なぜ必要：問題パネルを開かなくてもエラーが一目でわかる。AIにコードを修正させるときに「この行のエラーを修正して」と伝えやすい

📋 拡張機能情報

Auto Rename Tag（formulahendry.auto-rename-tag）

■ 役割：開きタグを変更すると閉じタグも自動で変更
■ なぜ必要：React/JSXのコンポーネント開発で地味に便利。タグの不一致エラーを防ぐ

📋 拡張機能情報

Tailwind CSS IntelliSense（bradlc.vscode-tailwindcss）

■ 役割：Tailwindのクラス名を自動補完＋プレビュー表示
■ なぜ必要：Tailwindのクラス名は覚えきれない。ホバーで実際のCSSが確認でき、CursorのAIが生成したTailwindクラスの意味もすぐわかる

📋 拡張機能情報

Thunder Client（rangav.vscode-thunder-client）

■ 役割：エディタ内でAPIリクエストを送信・テストできる
■ なぜ必要：CursorのAIにAPIエンドポイントを作らせた後、エディタから出ずにすぐ動作確認できる。Postmanの代替として軽量

📋 拡張機能情報

Pretty TypeScript Errors（yoavbls.pretty-ts-errors）

■ 役割：TypeScriptのエラーメッセージを読みやすくフォーマット
■ なぜ必要：TypeScriptの複雑な型エラーが人間に読みやすい形式で表示される。AIに修正を依頼する前に、エラー内容を理解しやすくなる

📋 拡張機能情報

Import Cost（wix.vscode-import-cost）

■ 役割：import文の横にバンドルサイズをインライン表示
■ なぜ必要：AIが提案するライブラリが重すぎないかチェックできる。パフォーマンスを意識した開発に必須

📋 拡張機能情報

TODO Highlight（wayou.vscode-todo-highlight）

■ 役割：TODO・FIXME・HACKなどのコメントをハイライト表示
■ なぜ必要：AIが「// TODO: 後で実装」と残したコメントを見逃さない。未完了タスクを一覧で確認できる

📋 拡張機能情報

Japanese Language Pack for Visual Studio Code（ms-ceintl.vscode-language-pack-ja）

■ 役割：Cursorのメニュー・設定画面を日本語化
■ なぜ必要：CursorはVS Codeベースなのでこの拡張機能がそのまま使える。英語が苦手な方にはまず入れてほしい

■ プログラミングを本格的に学びたい方へ

AIツールを最大限活用するにはプログラミングの基礎があると効果が何倍にもなります。Winスクールなら、Python・JavaScript・AIプログラミングなど300以上の講座から選べて、プロ講師の個人レッスンで指導。給付金対象講座なら最大70%還元。

無料カウンセリングに申し込む →

※ オンラインでも参加OK。無理な勧誘はありません

■ プログラミングを本格的に学びたい方へ

AIツールを最大限活用するにはプログラミングの基礎があると効果が何倍にもなります。Winスクールなら、Python・JavaScript・AIプログラミングなど300以上の講座から選べて、プロ講師の個人レッスンで指導。給付金対象講座なら最大70%還元。

無料カウンセリングに申し込む →

※ オンラインでも参加OK。無理な勧誘はありません

■ おすすめ書籍

あわせて読みたい

• Cursor Rulesテンプレート集｜コピペで使える実践ルール15選
• Cursor使い方ガイド｜初心者でも10分で使いこなせる
• Cursor vs GitHub Copilot vs Windsurf｜AIエディタ3社比較
• Cursorの日本語化・設定方法
• CursorでClaude Codeを使う方法
• Cursor無料版と有料版の違いを比較