大規模なプロジェクトで開発していると、こんな経験はありませんか?
「プロジェクト全体で関数名を検索したら、何百もの結果が出てきて目的のファイルを見つけられない」
「node_modulesの中まで検索されて、本当に見たい結果が埋もれてしまう」
「特定のディレクトリだけを検索したいけど、方法がわからない」
VS Codeの検索機能は非常に強力ですが、対象を絞り込まずに使うと、膨大な結果に圧倒されてしまいます。
そこで活用したいのが、検索対象フォルダの指定機能です。
この記事では、VS Codeで検索対象のフォルダを効率的に指定する方法を基本から応用まで、初心者にもわかりやすく解説します。
VS Code検索機能の基本構造
検索パネルの概要
VS Codeの検索機能には、以下の主要な要素があります:
基本的な構成要素
- 検索クエリ: 探したい文字列やパターン
- 置換クエリ: 置き換えたい文字列(置換時)
- 検索オプション: 大文字小文字の区別、正規表現、完全一致
- ファイル包含設定: 検索対象とするファイル・フォルダ
- ファイル除外設定: 検索対象から除外するファイル・フォルダ
検索の種類
ファイル内検索 (Ctrl + F)
- 現在開いているファイル内のみ検索
- 素早い確認に適している
プロジェクト全体検索 (Ctrl + Shift + F)
- ワークスペース全体を対象
- 今回の記事で重点的に扱う機能
基本的なフォルダ指定検索
検索パネルの起動
ショートカットキーでの起動
Windows/Linux:
Ctrl + Shift + F
macOS:
Cmd + Shift + F
他の起動方法
左サイドバーから:
- 左サイドバーの虫眼鏡アイコンをクリック
- 検索パネルが表示される
メニューから:
- 「表示」→「検索」を選択
- 検索パネルが開く
files to include の基本的な使い方
単一フォルダの指定
# srcフォルダのみを検索対象にする
src/
# utilsフォルダのみを検索対象にする
utils/
# 深い階層のフォルダを指定
src/components/common/
実際の使用例
// プロジェクト構造
project/
├── src/
│ ├── components/
│ ├── utils/
│ └── services/
├── tests/
├── docs/
└── node_modules/
// src/フォルダのみを検索
files to include: src/
複数フォルダの同時指定
カンマ区切りでの指定
# 複数フォルダを同時に検索対象にする
src/, tests/
# 特定の複数フォルダのみ
src/components/, src/services/, utils/
# 異なる階層のフォルダを組み合わせ
src/, docs/api/, config/
実践的な活用例
// フロントエンドとバックエンドの両方を検索
files to include: frontend/src/, backend/src/
// コンポーネントとテストファイルのみ
files to include: src/components/, tests/components/
// 設定関連ファイルのみ
files to include: config/, .vscode/, src/config/
ワイルドカードとパターンマッチング
基本的なワイルドカード
アスタリスク(*)の使用
# 任意の文字列にマッチ
*.js # すべてのJSファイル
test* # testで始まるファイル・フォルダ
*component* # componentを含む名前
ダブルアスタリスク(**)の使用
# 任意の階層にマッチ
**/src/ # 任意の階層のsrcフォルダ
src/** # srcフォルダ以下のすべて
**/test/** # 任意の階層のtestフォルダ以下すべて
拡張子による絞り込み
単一拡張子の指定
# JavaScriptファイルのみ
**/*.js
# TypeScriptファイルのみ
**/*.ts
# CSSファイルのみ
**/*.css
# Pythonファイルのみ
**/*.py
複数拡張子の指定
# JavaScript関連ファイル
**/*.{js,jsx,ts,tsx}
# Web関連ファイル
**/*.{html,css,js}
# 設定ファイル
**/*.{json,yaml,yml,toml}
# ドキュメントファイル
**/*.{md,txt,rst}
高度なパターンマッチング
条件の組み合わせ
# srcフォルダ内のJavaScriptファイルのみ
src/**/*.{js,jsx}
# テスト以外のTypeScriptファイル
**/*.{ts,tsx}, !**/*.test.*, !**/*.spec.*
# 特定のフォルダ内の特定のファイル
src/components/**/*.vue, src/pages/**/*.vue
# 設定フォルダ内のJSON・YAMLファイル
config/**/*.{json,yaml,yml}
実用的なパターン例
# React プロジェクトでのコンポーネント検索
src/components/**/*.{jsx,tsx}
# Node.js プロジェクトでのサーバーコード
src/routes/**/*.js, src/controllers/**/*.js, src/models/**/*.js
# フロントエンドのスタイルファイル
src/**/*.{css,scss,sass,less}
# 設定・環境ファイル
.env*, config/**/*.*, *.config.{js,ts}
ファイル・フォルダの除外設定
files to exclude の基本使用法
一般的な除外対象
# よく除外されるフォルダ
node_modules/ # Node.jsの依存関係
dist/ # ビルド成果物
build/ # ビルド成果物
.git/ # Gitリポジトリ情報
.vscode/ # VS Code設定
カンマ区切りでの複数指定
# 複数フォルダを除外
node_modules/, dist/, build/
# ビルド成果物とログファイル
dist/, build/, logs/, *.log
# 一時ファイルとキャッシュ
tmp/, cache/, .cache/, *.tmp
詳細な除外パターン
ワイルドカードを使った除外
# すべての隠しフォルダを除外
.*
# すべてのlogフォルダを除外(任意の階層)
**/logs/**
# テストファイルを除外
**/*.test.*, **/*.spec.*
# minifyされたファイルを除外
**/*.min.{js,css}
言語・フレームワーク別の除外設定
Node.js プロジェクト:
node_modules/, dist/, build/, coverage/, .nyc_output/
Python プロジェクト:
__pycache__/, *.pyc, venv/, .venv/, dist/, build/, *.egg-info/
Java プロジェクト:
target/, .gradle/, build/, *.class, *.jar
フロントエンドプロジェクト:
node_modules/, dist/, build/, .next/, .nuxt/, public/
高度な除外テクニック
条件付き除外
# テストフォルダは除外するが、テスト設定ファイルは含める
**/test/**, !**/test/config.*
# ビルドフォルダは除外するが、ビルド設定は含める
build/, !build.config.js
# ドキュメントは除外するが、READMEは含める
docs/, !**/README.md
正規表現を使った除外
# 正規表現で複雑なパターンを除外
# (注意:VS Codeの検索除外では限定的な正規表現サポート)
# バックアップファイルを除外
*.bak, *.backup, *~
# 一時ファイルとSwapファイルを除外
*.tmp, *.swp, *.swo
実用的な検索シナリオ
開発フェーズ別の検索設定
新機能開発時
# 検索対象: 主要な開発フォルダのみ
files to include: src/, lib/
# 除外: テストやビルド成果物
files to exclude: **/*.test.*, **/*.spec.*, dist/, build/
バグ修正時
# 検索対象: ソースコードとテストの両方
files to include: src/, tests/
# 除外: 外部ライブラリとビルド成果物
files to exclude: node_modules/, vendor/, dist/
リファクタリング時
# 検索対象: 全体(ただし成果物は除外)
files to include: src/, tests/, docs/
# 除外: 自動生成ファイルと外部依存
files to exclude: node_modules/, dist/, **/*.generated.*, coverage/
プロジェクト種別別の設定
React/Next.js プロジェクト
# コンポーネント検索
files to include: src/components/**, pages/**
# スタイル検索
files to include: src/**/*.{css,scss,module.css}
# 設定ファイル検索
files to include: *.config.{js,ts}, .env*, public/
# 除外設定
files to exclude: node_modules/, .next/, dist/, coverage/
Express/Node.js API
# ルート・コントローラー検索
files to include: src/routes/**, src/controllers/**, src/middleware/**
# モデル・スキーマ検索
files to include: src/models/**, src/schemas/**
# 除外設定
files to exclude: node_modules/, dist/, logs/, uploads/
Python Django プロジェクト
# アプリケーションコード検索
files to include: */apps/**, */views.py, */models.py
# テンプレート検索
files to include: **/templates/**
# 除外設定
files to exclude: __pycache__/, *.pyc, venv/, media/, static/collected/
特定の課題解決のための検索
セキュリティ監査
# 認証・権限関連コード
files to include: **/auth/**, **/security/**, **/middleware/**
# 環境変数・設定ファイル
files to include: .env*, config/**, **/settings.*
# 除外: テストとドキュメント
files to exclude: **/*.test.*, docs/, examples/
パフォーマンス最適化
# メインの実行コード
files to include: src/**, lib/**
# 除外: テスト、ドキュメント、設定
files to exclude: tests/, docs/, config/, **/*.test.*
依存関係の調査
# パッケージ設定ファイル
files to include: package*.json, requirements.txt, Pipfile, pom.xml
# インポート・require文を含むファイル
files to include: **/*.{js,ts,py,java}
# 除外: ビルド成果物
files to exclude: node_modules/, dist/, target/
設定ファイルでのデフォルト設定
settings.json での永続化設定
基本的な除外設定
{
"search.exclude": {
"**/node_modules": true,
"**/dist": true,
"**/build": true,
"**/.git": true,
"**/coverage": true,
"**/*.log": true
}
}
詳細な除外設定
{
"search.exclude": {
// 依存関係フォルダ
"**/node_modules": true,
"**/bower_components": true,
"**/vendor": true,
// ビルド成果物
"**/dist": true,
"**/build": true,
"**/target": true,
"**/.next": true,
"**/.nuxt": true,
// バージョン管理
"**/.git": true,
"**/.svn": true,
// IDE・エディタ設定
"**/.vscode": false, // VS Code設定は検索したい場合
"**/.idea": true,
// ログ・一時ファイル
"**/logs": true,
"**/tmp": true,
"**/*.log": true,
"**/*.tmp": true
}
}
言語別の最適化設定
JavaScript/TypeScript プロジェクト
{
"search.exclude": {
"**/node_modules": true,
"**/dist": true,
"**/build": true,
"**/.next": true,
"**/coverage": true,
"**/*.min.js": true,
"**/*.min.css": true
},
"search.useParentIgnoreFiles": true,
"search.useGlobalIgnoreFiles": true
}
Python プロジェクト
{
"search.exclude": {
"**/__pycache__": true,
"**/*.pyc": true,
"**/venv": true,
"**/.venv": true,
"**/env": true,
"**/.env": true,
"**/site-packages": true,
"**/dist": true,
"**/*.egg-info": true
}
}
Java プロジェクト
{
"search.exclude": {
"**/target": true,
"**/.gradle": true,
"**/build": true,
"**/*.class": true,
"**/*.jar": true,
"**/.settings": true,
"**/.metadata": true
}
}
ワークスペース固有の設定
.vscode/settings.json での設定
{
// プロジェクト固有の除外設定
"search.exclude": {
"**/node_modules": true,
"generated/**": true,
"public/assets/**": true,
"docs/build/**": true
},
// 検索時のデフォルト設定
"search.useIgnoreFiles": true,
"search.followSymlinks": false,
// ファイル監視の除外(パフォーマンス向上)
"files.watcherExclude": {
"**/node_modules/**": true,
"**/dist/**": true,
"**/.git/objects/**": true
}
}
高度な検索テクニック
正規表現との組み合わせ
正規表現モードの有効化
- 検索パネルで「.*」アイコンをクリック
- 正規表現モードが有効になる
- 高度なパターンマッチングが可能
正規表現を使った検索例
# 関数定義の検索(JavaScriptの場合)
files to include: **/*.{js,ts}
search pattern: function\s+\w+\s*\(
# クラス定義の検索(Pythonの場合)
files to include: **/*.py
search pattern: class\s+\w+.*:
# インポート文の検索
files to include: **/*.{js,ts,jsx,tsx}
search pattern: import\s+.*\s+from\s+['"](\.\.?/|@/)
マルチライン検索
複数行にまたがるパターンの検索
# 複数行のコメントブロック
files to include: **/*.{js,ts}
search pattern: /\*[\s\S]*?\*/
# 関数の定義と実装(簡単なパターン)
files to include: **/*.py
search pattern: def\s+\w+\([^)]*\):\s*\n.*return
検索結果の効率的な活用
検索結果の操作
結果の絞り込み:
- 検索結果パネルで「フィルター」アイコンをクリック
- さらに詳細な条件で絞り込み可能
ファイル単位での除外:
- 検索結果で不要なファイルを右クリック
- 「結果から除外」を選択
結果のエクスポート:
- 検索結果を右クリック
- 「すべての結果をコピー」で外部に貼り付け可能
よくある問題と解決方法
検索が遅い・重い場合
問題の原因と対策
原因1: 対象ファイルが多すぎる
// 解決策: より具体的な包含設定
{
"search.exclude": {
"**/node_modules": true,
"**/dist": true,
"**/*.min.*": true,
"**/coverage": true
}
}
原因2: 大きなファイルが含まれている
// 解決策: ファイルサイズによる制限
{
"search.maxFileSize": 1000000, // 1MB以下のファイルのみ
"files.exclude": {
"**/*.{log,dump,sql}": true
}
}
原因3: バイナリファイルが含まれている
// 解決策: バイナリファイルの除外
{
"search.exclude": {
"**/*.{jpg,jpeg,png,gif,ico,pdf,zip,tar,gz}": true,
"**/*.{exe,dll,so,dylib}": true
}
}
期待した結果が得られない場合
問題1: 除外設定が効いていない
確認方法:
- VS Code設定で
search.exclude
を確認 - プロジェクトの
.gitignore
との競合確認 - グローバル設定とワークスペース設定の優先順位確認
解決方法:
{
"search.useIgnoreFiles": true, // .gitignoreを尊重
"search.useGlobalIgnoreFiles": true, // グローバル設定を尊重
"search.useParentIgnoreFiles": true // 親ディレクトリの設定を尊重
}
問題2: パターンマッチングが正しく動作しない
よくある間違い:
# 間違い: スラッシュの有無
src # srcという名前のファイルとフォルダ両方
src/ # srcフォルダのみ
# 間違い: ワイルドカードの誤用
*.js # カレントディレクトリのJSファイルのみ
**/*.js # 全階層のJSファイル
正しい使用方法:
# フォルダ指定は末尾にスラッシュ
src/, tests/, docs/
# 全階層検索には**を使用
**/src/**, **/tests/**
# 拡張子指定は適切なパスと組み合わせ
src/**/*.{js,jsx,ts,tsx}
パフォーマンス最適化
検索速度の向上
{
// 検索対象ファイル数の制限
"search.maxResults": 2000,
// ファイルサイズの制限
"search.maxFileSize": 500000,
// 並列処理の最適化
"search.maintainFileSearchCache": true,
// 不要な機能の無効化
"search.searchOnType": false,
"search.collapseResults": "auto"
}
メモリ使用量の最適化
{
// ファイル監視の制限
"files.watcherExclude": {
"**/node_modules/**": true,
"**/.git/objects/**": true,
"**/dist/**": true,
"**/build/**": true
},
// 大きなファイルの除外
"files.exclude": {
"**/*.{log,dump}": true,
"**/logs/**": true
}
}
まとめ
VS Codeの検索フォルダ指定機能は、大規模プロジェクトでの開発効率を大幅に向上させる重要な機能です。
重要なポイント
- 基本操作:
Ctrl + Shift + F
で検索パネルを開き、包含・除外設定を活用 - パターン活用: ワイルドカードと拡張子指定で柔軟な検索対象設定
- 除外設定: 不要なフォルダ・ファイルを適切に除外してパフォーマンス向上
- 永続化設定: settings.json でプロジェクト固有のデフォルト設定を構築
効果的な活用方法
- 段階的絞り込み: 広い範囲から開始して徐々に対象を絞り込む
- プロジェクト最適化: 開発フェーズや目的に応じた検索設定の調整
- チーム統一: プロジェクト設定ファイルでの検索設定共有
- パフォーマンス考慮: 適切な除外設定でレスポンス向上
コメント