Claude Code × VSCode 初期設定チェックリスト——インストールから実運用まで見落としやすい15項目
Claude CodeをVSCodeで使い始めるときの初期設定を15項目のチェックリスト形式で解説。拡張機能、キーバインド、CLAUDE.md、.claudeignore、MCP設定まで網羅。
エンジニアのゆとです。
Claude Codeを使い始めるとき、たぶん最初の30分はこんな感じになる。
「インストールしてみた。あ、起動した。で……何から設定すればいいの？」
公式ドキュメントはある。でも「まず何が必要で、何は後回しでいいか」の優先順位が書いてない。気づいたら1時間経ってて、まだ設定が終わってない、みたいな。
この記事では、Claude Codeを使い始めるときに設定しておくべき項目を15個のチェックリストにまとめた。「なぜこれが必要か」を添えながら解説するので、設定の意味を理解しながら進められる。
インストールだけして止まっている人、一通り触ったけど「設定ちゃんとできてるのかな」と不安な人に向けて書いた。
チェック1: Node.js 18以上を確認する
node --version
# v18.0.0 以上であればOKClaude CodeはNode.jsが必要だ。古いバージョンだとインストール自体は通っても起動時にエラーが出る。v18以上、できればv20以上を推奨する。
バージョンが古ければnvmかvoltaでアップデートするのが楽。
# nvmを使っている場合
nvm install 20
nvm use 20チェック2: Claude Code CLIをインストールする
npm install -g @anthropic-ai/claude-codeグローバルインストールが前提。claude --versionで確認できれば完了。
claude --version
# Claude Code 1.x.x (例)インストール後にcommand not foundが出る場合は、npmのグローバルディレクトリにPATHが通っていない。npm root -gでパスを確認して、.zshrcか.bashrcに追加する。
チェック3: Anthropicアカウントで認証する
claude初回起動時に認証フローが走る。ブラウザが開いて、Anthropicアカウントでログインして、ターミナルに戻るだけ。
重要なのがプランの選択だ。Claude Codeの無料枠はかなり制限されていて、本格的に使うなら早めに有料プランへの移行を検討したほうがいい。
プラン別の料金と制限は以下の記事で詳しくまとめている。
チェック4: VSCode拡張「Claude Code」をインストールする
VSCodeのExtensions（Cmd+Shift+X）で「Claude Code」を検索してインストール。Anthropic公式の拡張機能が出てくるはずだ。
この拡張で何ができるかというと、主に2つ。
- VSCodeのサイドパネルからClaudeとチャットできる
- エディタで開いているファイルをコンテキストとして渡せる
ターミナル操作に慣れていない人には特に便利。でも個人的にはターミナルのClaudeとVSCode拡張を両方使い分けるのがベストで、「コード修正・ファイル生成はターミナル」「現在のファイルについて質問するのはVSCode拡張」という使い分けをしている。
チェック5: VSCodeのターミナルパネルを設定する
Claude Codeをどこで動かすかという話。一番ストレスが少ないのは、VSCodeの統合ターミナルをメインにする構成だ。
VSCodeの統合ターミナルは`Ctrl+“（バッククォート）で開く。ここでClaude Codeを起動すると、VSCodeとターミナルの行き来が最小化される。
設定しておくと便利なのが、ターミナルのシェルをzshに固定する設定だ。VSCodeのsettings.json（Cmd+, → JSONアイコン）に追加する：
{
"terminal.integrated.defaultProfile.osx": "zsh",
"terminal.integrated.fontSize": 13
}フォントサイズはお好みで。Claude Codeの出力はそこそこ長くなるので、少し小さめにしておくと一覧性が上がる。
チェック6: CLAUDE.mdをプロジェクトルートに作成する
ここが一番重要かもしれない。
CLAUDE.mdはClaude Codeがセッション開始時に自動で読み込む設定ファイルで、「このプロジェクトではこう動いてほしい」という指示を書いておく場所だ。
最初は3行から始めるだけでいい：
# CLAUDE.md
## プロジェクト概要
TypeScript + Node.jsで構築したWebアプリ。src/配下がソースコード。
## コーディング規約
- TypeScriptのstrictモード前提
- console.logを本番コードに残さない
## 禁止事項
- .envの内容をログに出力しない
- node_modulesを直接編集しない「禁止事項」を書いておくのが特に効果が高い。AIは「やること」より「やらないこと」のほうが守りやすい仕様になっている（理由は謎だが、これは経験則として確かだ）。
CLAUDE.mdに自律権限レベルを定義しておくと、毎回の確認がさらに減る：
## 自律権限レベル
- 緑: ファイル読み書き・コード生成 → 確認不要で実行
- 黄: 外部APIコール・設定変更 → 実行前に報告
- 赤: 課金・本番環境変更 → 必ず承認を取るチェック7: .claudeignoreで不要ファイルを除外する
Claude Codeはプロジェクトのファイルを読んでコンテキストを把握しようとする。これは便利なのだが、node_modulesやdistも読もうとすると無駄なトークンを消費するし、処理が遅くなる。
プロジェクトルートに.claudeignoreを置けば、指定したファイル・ディレクトリをClaude Codeが無視するようになる。.gitignoreと同じ書式だ。
# .claudeignore
node_modules/
dist/
build/
.next/
.turbo/
coverage/
*.log
.DS_Store
# 大きなデータファイル
*.csv
*.json.gz
# 秘密情報
.env
.env.local
.env.production.env系は特に重要。Claude Codeがシークレットキーを読んで、ログやコメントに出力してしまうリスクを防ぐ。.gitignoreに書いているものは基本的に.claudeignoreにも書いておくのが安全だ。
チェック8: グローバルCLAUDE.mdを設定する
プロジェクト単位のCLAUDE.mdとは別に、全プロジェクト共通のCLAUDE.mdを~/.claude/CLAUDE.mdに置ける。
# グローバル CLAUDE.md
## 自己紹介
ゆと（26歳、フリーランスエンジニア）のマシンです。
## 共通の禁止事項
- 英語での返答禁止（常に日本語で）
- 推測で実行しない。不明な点は確認する
- コミットメッセージは日本語
## コードスタイル共通
- インデントはスペース2つ
- シングルクォート優先「常に日本語で返答してほしい」という設定は、ここに書くのが正解。プロジェクトごとに書くと管理が面倒になる。
チェック9: MCPを最初の1つだけ追加する
MCP（Model Context Protocol）はClaude Codeに外部ツールとの接続口を追加する仕組みだ。「最初から全部入れよう」としない方がいい。設定がごちゃごちゃになって、何が何のせいで動かないか分からなくなる。
最初の1つとして、filesystemサーバーがおすすめだ：
claude mcp add filesystem npx -y @modelcontextprotocol/server-filesystem ~/projectsこれを入れると、Claude Codeが指定ディレクトリ以下のファイルを名前で参照できるようになる。「~/projects/api-service/src/auth.tsを見て」という指示が通りやすくなる。
設定を確認するコマンド：
claude mcp listMCPの詳細な設定方法はこちらで解説している。
チェック10: Hooksの初期設定（Lint自動実行）
Hooksは「Claude Codeがファイルを編集したとき、自動でスクリプトを実行する」仕組み。最初の1つとして、ファイル保存後に自動でLintをかける設定がシンプルで効果的だ。
~/.claude/settings.jsonに追記する：
{
"hooks": {
"PostToolUse": [
{
"matcher": "Write|Edit|MultiEdit",
"hooks": [
{
"type": "command",
"command": "cd $CLAUDE_PROJECT_DIR && npx eslint --fix \"$CLAUDE_FILE_PATHS\" 2>/dev/null || true"
}
]
}
]
}
}これで、Claude Codeがファイルを書き換えるたびにESLintが自動で走る。LintエラーをClaudeに指摘→修正→またLintエラー→修正…という無限ループが減る。
|| trueを末尾に付けているのは、Lintエラーでhookが止まらないようにするため。最初はこれくらいゆるい設定でいい。
チェック11: 許可コマンドを事前に設定する
Claude Codeは初期状態では「危険なコマンド」を実行しようとすると毎回確認を求めてくる。頻繁に使うコマンドは事前に許可設定しておくと、作業のテンポが上がる。
~/.claude/settings.jsonに追記：
{
"permissions": {
"allow": [
"Bash(git add:*)",
"Bash(git commit:*)",
"Bash(git status)",
"Bash(git diff:*)",
"Bash(npm run *)",
"Bash(npx *)",
"Bash(ls:*)",
"Bash(cat:*)"
],
"deny": [
"Bash(rm -rf *)",
"Bash(curl * | bash)",
"Bash(sudo *)"
]
}
}denyに書いた操作は問答無用でブロックされる。rm -rfとcurl | bash（パイプ実行）は絶対に入れておくべきだ。
チェック12: チーム開発向け — .claude/settings.jsonを共有する
個人設定は~/.claude/settings.json（グローバル）に書くが、チームで使うプロジェクト固有の設定は.claude/settings.json（プロジェクトルート）に書いてGitで共有できる。
{
"permissions": {
"allow": [
"Bash(npm run test:*)",
"Bash(npm run lint:*)",
"Bash(npm run build)"
]
},
"hooks": {
"PostToolUse": [
{
"matcher": "Write|Edit",
"hooks": [
{
"type": "command",
"command": "npm run lint --silent 2>/dev/null || true"
}
]
}
]
}
}これをリポジトリにコミットしておけば、チームメンバー全員が同じClaude Code設定で動くようになる。CLAUDE.mdと.claude/settings.jsonの2ファイルがチーム共有の基本セットだ。
セキュリティ的に注意が必要なのは、.claude/settings.jsonのallowに書いたコマンドは誰でも実行できる状態になること。不必要に広い権限を与えないよう、最小権限の原則で書くこと。
チェック13: VSCodeのキーバインド設定
Claude Code拡張を使う場合、よく使う操作にキーバインドを当てておくと快適になる。
VSCodeのkeybindings.json（Cmd+Shift+P → “Open Keyboard Shortcuts (JSON)“）に追加する：
[
{
"key": "cmd+shift+a",
"command": "claude-code.sendToChat",
"when": "editorTextFocus"
},
{
"key": "cmd+shift+e",
"command": "claude-code.explainCode",
"when": "editorHasSelection"
}
]sendToChatは選択テキストをClaudeチャットに送るコマンド。コードを選択してCmd+Shift+Aで「これ何してるか教えて」「バグ直して」とすぐ聞ける。
ただ正直に言うと、僕はターミナルのclaudeコマンドを直接使う方が好みだ。VSCode拡張は「コードを見ながらざっくり質問する」ときに使って、本格的な作業はターミナル版というのが現在の使い方。
チェック14: セッション開始時の確認コマンドを覚える
Claude Codeを使う前に確認しておくと便利なコマンドがいくつかある。
# 現在の設定を確認
claude config list
# MCPサーバーの一覧と状態
claude mcp list
# コンテキスト使用量の確認（セッション中）
# セッション内で /status を実行claude config listは現在の設定値を一覧で表示する。設定をいじった後や「なんか挙動がおかしいな」と思ったときにまず確認するコマンドだ。
コンテキストの管理については別記事で詳しく書いているのでこちらも参考にしてほしい。
チェック15: モデルとAPIキーの設定を確認する
Claude CodeはデフォルトでAnthropicのAPIを使うが、設定を確認しておこう。
# 現在使用しているモデルを確認
claude config get model
# モデルを変更する（例：claude-3-5-sonnet-20241022）
claude config set model claude-3-5-sonnet-20241022Anthropicのプランによって使えるモデルが異なる。Max Planならclaude-opus-4が使えるが、Proプランだとclaude-sonnetが上限になることもある。料金と実用性のバランスはclaude-sonnet系が良い落とし所だ。
独自のAPIキーを使いたい場合は環境変数で設定できる：
export ANTHROPIC_API_KEY="sk-ant-...".zshrcか.bashrcに書いておけば毎回設定不要になる。ただし、この値をGitHubにプッシュしたり、CLAUDE.mdに書いたりしないこと。.claudeignoreに.envを入れたのはこのためでもある。
まとめ: 15項目チェックリスト
設定の全体を振り返ると：
基礎インフラ
□ チェック1: Node.js 18以上を確認する
□ チェック2: Claude Code CLIをインストールする
□ チェック3: Anthropicアカウントで認証する（プラン確認）
□ チェック4: VSCode拡張「Claude Code」をインストールする
□ チェック5: VSCode統合ターミナルを設定する
コンテキスト設計
□ チェック6: プロジェクト CLAUDE.md を作成する
□ チェック7: .claudeignore で不要ファイルを除外する
□ チェック8: グローバル ~/.claude/CLAUDE.md を設定する
機能拡張
□ チェック9: MCP を最初の1つ追加する（filesystem推奨）
□ チェック10: Hooks で Lint 自動実行を設定する
□ チェック11: 許可コマンドを事前設定する（deny必須）
チーム・運用
□ チェック12: .claude/settings.json をGitで共有する
□ チェック13: VSCode キーバインドを設定する
□ チェック14: セッション確認コマンドを覚える
□ チェック15: モデルとAPIキーの設定を確認する全部一度にやらなくていい。チェック1〜3が終われば動く。チェック6〜8が終われば「使える」になる。チェック9〜11が終われば「快適」になる。
よくある初期トラブルと対処法
設定中によく出るエラーをまとめておく。
「claude: command not found」npmのグローバルディレクトリへのPATHが通っていない。
npm root -g
# 出力例: /opt/homebrew/lib/node_modules
# PATHに追加（~/.zshrc に書く）
export PATH="/opt/homebrew/bin:$PATH"認証トークンが期限切れになっている場合がある。
claude auth logout
claude auth loginMCPサーバーに必要なnpmパッケージがインストールされていない可能性がある。npx経由で追加したサーバーは初回起動時にダウンロードが走るので、ネットワーク環境を確認する。
# 手動でサーバーをテスト起動してエラーを確認
npx -y @modelcontextprotocol/server-filesystem ~/projectsCLAUDE.mdの書式に問題がある場合や、ファイルの場所が間違っている場合に起こる。プロジェクトルート（package.jsonや.gitがあるディレクトリ）に置いてあるか確認する。Claude Codeを一度終了して再起動すると反映されることもある。
初期設定は地味だが、一度やってしまえば後が楽になる。特にCLAUDE.mdと.claudeignoreは「設定しないまま使い続ける」と、毎回同じ説明をClaudeにするはめになるので早めにやっておくのが正解だ。
