VS Code Extension · CLI · Model-Agnostic · OSS
VS Code マーケットプレイスから「Cline」を検索してインストール(500万インストール超)。
# コマンドラインからインストール code --install-extension saoudrizwan.claude-dev # または VS Code 内で # Ctrl+Shift+X → "Cline" 検索 → インストール
インストール後、サイドバーの Cline アイコンからAPIキーを設定する。
# Node.js 22+ 必要 npm install -g cline # インタラクティブモード cline "テストを追加してください" # 自動承認(--yolo) cline -y "依存パッケージを最新に更新" # ヘッドレスモード(CI/CD向け) cline --headless --json "lintエラーを修正して" # バージョン確認 cline --version # v3.86.2(2026-06-01時点)
Cline CLI は2026-02に正式化したばかり。安定性・機能ともに VS Code 拡張の方が成熟している。日常作業は VS Code 拡張を推奨。
{
// API プロバイダーとモデル
"cline.apiProvider": "anthropic",
"cline.apiModelId": "claude-sonnet-4-6",
"cline.anthropicApiKey": "sk-ant-...",
// 読み取り専用ツールを自動承認(安全な操作のみ)
"cline.alwaysAllowReadOnly": true,
// 書き込みは必ず確認(デフォルト: false のまま推奨)
"cline.alwaysAllowWrite": false,
// 自動承認(本番環境では false 必須)
"cline.autoApprovalEnabled": false,
// カスタム指示(全タスク共通)
"cline.customInstructions": "コメントは日本語で書いてください。変数名・関数名は英語。",
// ターミナル操作の自動承認(注意)
"cline.alwaysAllowExecute": false,
// ブラウザ操作の許可
"cline.alwaysAllowBrowser": false
}
プロジェクトルートに置く Cline 向けのルールファイル。Claude Code の CLAUDE.md・Codex の AGENTS.md に相当。全タスクで自動的に参照される。
# .clinerules ## プロジェクト概要 TypeScript + React + Vite のWebアプリ。 バックエンドは Hono + Cloudflare Workers + D1。 ## 技術スタック - フロント: React 19, TypeScript strict, Tailwind CSS - バックエンド: Hono, Zod, Drizzle ORM - テスト: Vitest, Playwright - パッケージマネージャー: pnpm ## コーディング規約 - TypeScript の any 型禁止(as unknown as T も避ける) - コンポーネントはArrow function + named export - CSS はすべてTailwindで書く(inline style禁止) - エラーハンドリングは Result 型パターン(throw禁止) - テストはコードと同じディレクトリに置く(*.test.ts) ## コミットルール - Conventional Commits 形式(feat/fix/chore 等) - コミット前に pnpm lint && pnpm test を実行 - 1コミット = 1つの変更(atomic commits) ## 禁止事項(NEVER DO) - .env ファイルをコミットしない - console.log を本番コードに残さない - 本番DBに直接接続しない(staging を使うこと) - npm ci なしに node_modules を手動変更しない ## ディレクトリ構造 src/ components/ # UIコンポーネント hooks/ # カスタムフック lib/ # ユーティリティ api/ # APIクライアント types/ # 型定義
各サブディレクトリにも .clinerules を置けば、そのディレクトリを操作するときだけ追加ルールが適用される。
# src/api/.clinerules ## API ディレクトリ専用ルール - すべてのAPIレスポンスをzodスキーマでバリデーション - fetch は apiClient() ラッパーのみ使用(直接呼び出し禁止) - エラーレスポンスは { error: string, code: string } 形式 - タイムアウトは 10秒 固定(変更する場合は必ずレビュー依頼)
# src/components/.clinerules ## コンポーネント専用ルール - Props は interface で定義(type alias不可) - children が必要な場合は React.PropsWithChildren を使う - forwardRef は使わない - useEffect の cleanup は必ず実装する
Cline はセッション間で記憶を保持しない。コンテキストを維持する一般的なパターンとして、プロジェクト情報をMarkdownファイルに外出しして .clinerules で参照させる。
# .clinerules に追記 ## Memory Bank 以下のファイルを最初に読んでプロジェクトの状態を把握してください: - docs/project-brief.md # プロジェクト概要・目標 - docs/active-context.md # 現在作業中のタスク - docs/decisions.md # 重要な設計決定の記録 - docs/known-issues.md # 既知の問題・技術的負債 # docs/active-context.md(例) 現在のフォーカス: 認証フローのリファクタリング 進行中: src/auth/ 配下を JWT から Session Cookie に移行中 次のステップ: ミドルウェアのテスト追加 ブロッカー: なし
Anthropic / OpenAI / Google / Bedrock / Vertex / ローカルLLM(Ollama)など、ほぼすべてのLLM APIに接続できる。タスクに応じてモデルを切り替えるのがコスト最適化の鍵。
| モデル | 入力/出力(per 1M) | 推奨用途 |
|---|---|---|
| Claude Sonnet 4.6 | $3 / $15 | 日常的なコーディング・リファクタリング(バランス最良) |
| Claude Opus 4.8 | $5 / $25 | 複雑な設計・大規模タスク |
| Claude Haiku 4.5 | $0.8 / $4 | 単純な補完・ドキュメント生成(コスト重視) |
| GPT-4o | $2.5 / $10 | コードレビュー・説明(Claude代替) |
| Gemini 2.5 Pro | $1.25 / $10 | 長いコンテキスト・大規模ファイル解析 |
| Ollama(ローカル) | 無料 | 機密コード・オフライン環境・コスト0 |
# VS Code settings.json — AWS Bedrock 経由 { "cline.apiProvider": "bedrock", "cline.awsRegion": "us-east-1", "cline.awsProfile": "default", "cline.apiModelId": "anthropic.claude-sonnet-4-5-v1:0" } # Google Vertex AI 経由 { "cline.apiProvider": "vertex", "cline.vertexProjectId": "my-project", "cline.vertexRegion": "us-central1", "cline.apiModelId": "claude-sonnet-4-5@20251022" }
企業の AWS/GCP 契約を活用してAPIコストを既存インフラのコストに統合できる。
Cline 最大の特徴。タスクを「Plan(計画)」と「Act(実行)」に分けることで、人間のチェックポイントを確保しながらエージェントを動かす。
大きなタスク・影響範囲が不明なタスクは必ず Plan モードから始める。計画フェーズでのやり取りに時間をかけるほど実行フェーズのミスが減る。
Cline はタスク実行中に自動でスナップショットを保存する。エージェントが想定外の変更をした場合、チェックポイントまでロールバックできる。
複数の VS Code ウィンドウで同時に Cline を動かすことで擬似的な並列実行が可能。各ウィンドウが独立したコンテキストを持つ。
# ウィンドウ 1: バックエンド修正 cline "認証ミドルウェアのリファクタリング" # ウィンドウ 2: フロントエンド修正(別ターミナルで) cline "ログインフォームのバリデーション追加"
Cline はMCPをネイティブサポート。VS Code の Cline 拡張設定 → MCP Servers から GUI で追加するか、設定ファイルを直接編集する。
# ~/.config/cline/mcp_settings.json { "mcpServers": { "filesystem": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-filesystem", "."] }, "github": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-github"], "env": { "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_..." } }, "postgres": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-postgres"], "env": { "POSTGRES_URL": "postgresql://localhost/mydb" } } } }
Cline は Slack・Telegram・Discord からタスクをトリガーできる。チームメンバーがメッセージを送るとClineが動き出す。
# Slack App Manifest(一部) slash_commands: - command: /cline description: "Clineにタスクを送信" usage_hint: "[タスク説明]" # /cline "ログインページのバグを修正して PR を作成" # → Cline が起動してタスクを実行、完了したら Slack に通知
| シナリオ | 推奨 |
|---|---|
| 日常的なコーディング・リファクタリング | VS Code 拡張(IDEコンテキスト豊富) |
| CI/CD パイプライン内での自動修正 | CLI --headless(人間不在で実行可) |
| 機密コードの処理(外部送信なし) | VS Code + Ollama(ローカルLLM) |
| 複数ファイル横断の大きな変更 | VS Code + Plan/Act モード |
| Slack からのリモートトリガー | CLI + MCP Slack サーバー |