VSCode

リポジトリに設定ファイルを配置することで、ClaudeCodeは統一されたVSCode環境設定を自動生成できます。弊社では.vscode/settings.jsonにチーム共通の設定を配置し、開発環境の一貫性を保っています。

弊社の推奨ルール

プロジェクトごとに.vscode/settings.jsonを配置する
言語別の設定は括弧記法で明確に分離する
不要なファイルは検索とExplorerから除外する
自動生成ファイルは読み取り専用にする
TypeScriptの自動インポートを最適化する

ClaudeCodeでの利用

VSCode設定の生成

プロジェクトに適した設定ファイルを生成する場合

「このプロジェクト用の.vscode/settings.jsonを作成して」

Formatter設定の追加

言語別のフォーマッター設定を追加する場合

「BiomeをTypeScriptのフォーマッターとして設定して」

除外設定の最適化

不要なファイルを適切に除外する設定を追加する場合

「node_modulesとビルドファイルをExplorerから除外する設定を追加」

言語ごとに設定を適用する

括弧記法を使用して、特定の言語にのみ設定を適用できます。TypeScriptとTypeScript Reactに対してBiomeを設定する例です。

{
  "[typescript][typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.biome": "explicit"
    }
  }
}

tsxファイルにはtypescriptreactを使用します。これにより、JavaScript系のファイルのみにリンターを適用できます。

ファイルの表示制御

Explorerから除外する

ビルド成果物やログファイルなど、編集不要なファイルをExplorerから非表示にします。

{
  "files.exclude": {
    "**/node_modules": true,
    "*.lock": true,
    "*.log": true,
    "*.tsbuildinfo": true,
    ".firebase": true,
    "bun.lock": true
  }
}

gitignoreに追加してもディレクトリは灰色表示されるだけなので、完全に非表示にしたい場合はこの設定を使用します。

検索から除外する

大きなファイルや自動生成ファイルを検索対象から除外します。

{
  "search.exclude": {
    "yarn.lock": true,
    "package-lock.json": true,
    "**/dist": true,
    "**/build": true
  }
}

特にlockファイルは巨大で検索結果を汚染するため、必ず除外します。

自動生成ファイルの保護

読み取り専用にする

自動生成されるファイルを誤って編集しないよう、読み取り専用に設定します。

{
  "files.readonlyInclude": {
    "**/route-tree.gen.ts": true,
    "**/graphql-env.d.ts": true,
    "**/*.generated.ts": true
  }
}

TanStack RouterやGraphQL Code Generatorなどのツールが生成するファイルを保護できます。

ファイル監視から除外する

頻繁に更新される自動生成ファイルを監視対象から除外し、パフォーマンスを改善します。

{
  "files.watcherExclude": {
    "**/route-tree.gen.ts": true,
    "**/generated/**": true,
    "**/.git/objects/**": true,
    "**/node_modules/**": true
  }
}

TypeScript設定

自動インポートの除外

不要なライブラリからの自動インポートを防ぎます。

{
  "typescript.preferences.autoImportFileExcludePatterns": [
    "radix-ui",
    "react-day-picker",
    "@radix-ui/react-icons"
  ]
}

例えばButtonと入力した時に、使用したくないライブラリからのインポートを提案されないようにします。

インポートパスの設定

相対パスではなく絶対パスでインポートするよう設定します。

{
  "typescript.preferences.importModuleSpecifier": "non-relative"
}

この設定にはtsconfig.jsonでのパス設定が必要です。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

TypeScriptバージョンの指定

プロジェクトローカルのTypeScriptを使用するよう設定します。

{
  "typescript.tsdk": "node_modules/typescript/lib"
}

グローバルのTypeScriptバージョンと異なる場合でも、プロジェクトの設定に従った型チェックが行われます。

ファイル関連付けの設定

特定の拡張子に対して適切な言語モードを設定します。

{
  "files.associations": {
    "*.json": "json",
    "*.css": "tailwindcss",
    "*.svg": "html"
  }
}

.jsonファイルが"JSON with Comments"として認識されるのを防いだり、CSSファイルでTailwind IntelliSenseを有効にできます。

よくある問題

設定が反映されない

VSCodeを再起動するか、Command Paletteから"Developer: Reload Window"を実行します。

言語別設定が効かない

言語識別子が正しいか確認します。ファイルを開いて右下のステータスバーで言語モードを確認できます。

パフォーマンスが悪い

files.watcherExcludeで大量のファイルを含むディレクトリを除外します。特にnode_modulesやビルド出力ディレクトリは必ず除外します。

Interactive, inc.Developer Guidelines

Interactive