VSCodeでエラーの波線を有効にする完全ガイド！見逃しゼロのコーディング環境を作る

プログラミング・IT

「コードのエラーに赤い波線が出ない…」 「構文エラーがあるのに、VSCodeが教えてくれない」 「他の人のVSCodeでは波線が出てるのに、自分のは出ない」

そんな悩み、実は簡単な設定で解決できるんです！

VSCodeの**エラー波線（squiggles）**は、コードの問題を即座に視覚的に教えてくれる超重要機能。赤い波線でエラー、黄色い波線で警告、青い波線で情報…これらが表示されないと、バグの原因を見逃してしまいます。

この記事では、VSCodeでエラーの波線を確実に有効にする方法から、言語別の設定、カスタマイズまで、開発効率を劇的に向上させる設定を完全解説します。15分後には、すべてのエラーが一目で分かる最強の開発環境が手に入りますよ！

スポンサーリンク

エラー波線の基本：なぜ表示されないのか

エラー波線の種類と意味

VSCodeには4種類の波線があります：

波線の色意味例重要度
赤い波線エラー構文エラー、未定義変数最高（修正必須）
黄色い波線警告未使用変数、非推奨メソッド高（推奨修正）
青い波線情報スペルミス、改善提案中
緑の波線ヒントリファクタリング提案低

波線が表示されない主な原因

よくある原因：

  1. 言語拡張機能がインストールされていない
  2. リンター/言語サーバーが無効
  3. 設定で波線表示が無効化されている
  4. ファイル除外設定に引っかかっている
  5. VSCode自体のバグや不具合

それぞれ解決していきましょう！

【即効】全言語共通の波線有効化設定

ステップ1：基本設定を確認

  1. 設定を開く Ctrl + ,（Windows/Linux） Cmd + ,（Mac） または：ファイル → 基本設定 → 設定
  2. 「error squiggles」で検索
  3. 以下の設定を確認 Editor: Show Deprecated: ☑ チェック Editor: Show Unused: ☑ チェック

ステップ2：エラー表示レベルの設定

settings.jsonで直接編集：

  1. コマンドパレットを開く Ctrl + Shift + P（Windows/Linux） Cmd + Shift + P（Mac）
  2. 「settings json」と入力
    • 「基本設定: 設定 (JSON) を開く」を選択
  3. 以下を追加 { "problems.decorations.enabled": true, "problems.showCurrentInStatus": true, "editor.showUnused": true, "editor.showDeprecated": true, "workbench.colorCustomizations": { "editorError.foreground": "#ff0000", "editorWarning.foreground": "#ffa500", "editorInfo.foreground": "#0000ff" } }

ステップ3：問題パネルを確認

  1. 問題パネルを開く 表示 → 問題 または Ctrl + Shift + M
  2. フィルターを確認
    • エラー、警告、情報すべて表示されているか
    • 現在のファイルのみか、ワークスペース全体か

【言語別】エラー波線を有効にする設定

JavaScript/TypeScript

必須拡張機能： なし（VSCode標準搭載）

設定方法：

{
  // JavaScript
  "javascript.validate.enable": true,
  "javascript.suggestionActions.enabled": true,
  
  // TypeScript
  "typescript.validate.enable": true,
  "typescript.suggest.enabled": true,
  "typescript.tsserver.experimental.enableProjectDiagnostics": true,
  
  // ESLint（追加でインストール推奨）
  "eslint.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

ESLintのインストール：

  1. 拡張機能タブで「ESLint」を検索
  2. Microsoft製のESLintをインストール
  3. プロジェクトに.eslintrcを配置

Python

必須拡張機能： Python (Microsoft)

設定方法：

{
  "python.linting.enabled": true,
  "python.linting.pylintEnabled": true,
  "python.linting.flake8Enabled": false,
  "python.linting.mypyEnabled": true,
  "python.linting.lintOnSave": true,
  "python.analysis.typeCheckingMode": "strict",
  "python.analysis.autoImportCompletions": true
}

Pylintのインストール：

pip install pylint mypy

Java

必須拡張機能： Extension Pack for Java

設定方法：

{
  "java.errors.incompleteClasspath.severity": "error",
  "java.configuration.checkProjectSettingsExclusions": true,
  "java.showBuildStatusOnStart.enabled": true,
  "java.semanticHighlighting.enabled": true,
  "java.validation.enabled": true
}

C/C++

必須拡張機能： C/C++ (Microsoft)

設定方法：

{
  "C_Cpp.errorSquiggles": "enabled",
  "C_Cpp.intelliSenseEngine": "default",
  "C_Cpp.intelliSenseEngineFallback": "enabled",
  "C_Cpp.autocompleteAddParentheses": true,
  "C_Cpp.diagnostics.enable": true
}

HTML/CSS

必須拡張機能： なし（標準搭載）

設定方法：

{
  // HTML
  "html.validate.scripts": true,
  "html.validate.styles": true,
  
  // CSS
  "css.validate": true,
  "css.lint.enable": true,
  "css.lint.important": "warning",
  "css.lint.duplicateProperties": "error",
  
  // SCSS
  "scss.validate": true,
  "scss.lint.enable": true
}

リンター/フォーマッター拡張機能の設定

人気のリンター拡張機能

ESLint（JavaScript/TypeScript）

# プロジェクトにインストール
npm install --save-dev eslint

# 初期設定
npx eslint --init

Pylint（Python）

# インストール
pip install pylint

# 使用
pylint yourfile.py

StyleLint（CSS/SCSS）

# インストール
npm install --save-dev stylelint stylelint-config-standard

# .stylelintrc.json
{
  "extends": "stylelint-config-standard"
}

Prettierとの併用設定

Prettierは波線を出さないフォーマッター：

{
  // フォーマットエラーは表示しない
  "prettier.requireConfig": true,
  
  // ESLintと併用
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

トラブルシューティング：それでも波線が出ない時

Q1. 特定のファイルだけ波線が出ない

確認事項：

  1. ファイルの除外設定 // settings.json確認 "files.exclude": { "**/node_modules": true }, "files.watcherExclude": { "**/target": true }
  2. .gitignoreの影響 "search.useIgnoreFiles": false
  3. 言語モードの確認
    • 右下のステータスバーで言語を確認
    • 正しい言語に変更

Q2. 保存時にしか波線が出ない

リアルタイム検証を有効に：

{
  "editor.quickSuggestions": {
    "strings": true
  },
  "editor.quickSuggestionsDelay": 10,
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000
}

Q3. 拡張機能をインストールしても波線が出ない

対処法：

  1. 拡張機能の再読み込み Ctrl + Shift + P → 「Developer: Reload Window」
  2. 拡張機能の有効化確認
    • 拡張機能タブ → インストール済み
    • 無効になっていないか確認
  3. 言語サーバーの再起動 Ctrl + Shift + P → 「TypeScript: Restart TS Server」 （言語に応じて変更）

Q4. VSCode再起動後に波線が消える

永続化設定：

// ワークスペース設定（.vscode/settings.json）
{
  "editor.semanticHighlighting.enabled": true,
  "editor.occurrencesHighlight": true,
  "problems.autoReveal": true
}

波線の見た目をカスタマイズ

色の変更

settings.jsonに追加：

{
  "workbench.colorCustomizations": {
    // エラー（赤）
    "editorError.foreground": "#ff0000",
    "editorError.background": "#ff000020",
    "editorError.border": "#ff0000",
    
    // 警告（黄色）
    "editorWarning.foreground": "#ffa500",
    "editorWarning.background": "#ffa50020",
    
    // 情報（青）
    "editorInfo.foreground": "#0080ff",
    
    // ヒント（緑）
    "editorHint.foreground": "#00ff00"
  }
}

波線のスタイル変更

{
  // 波線を太くする
  "editor.renderLineHighlight": "all",
  
  // 波線の表示遅延
  "editor.hover.delay": 300,
  
  // ホバー時の詳細表示
  "editor.hover.enabled": true,
  "editor.hover.sticky": true
}

パフォーマンス最適化

大規模プロジェクトでの設定

{
  // 除外パターンで高速化
  "files.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true
  },
  
  // 検証対象を制限
  "typescript.tsserver.maxTsServerMemory": 4096,
  "files.maxMemoryForLargeFilesMB": 4096,
  
  // 特定フォルダのみ検証
  "eslint.workingDirectories": [
    "./src"
  ]
}

リソース使用量の調整

{
  // バックグラウンド検証を制限
  "typescript.tsserver.experimental.enableProjectDiagnostics": false,
  
  // 保存時のみ検証
  "python.linting.lintOnSave": true,
  "eslint.run": "onSave"
}

チーム開発での共有設定

.vscode/settings.json

プロジェクトルートに配置：

{
  // チーム全体で統一
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  
  // 必須拡張機能
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "ms-python.python"
  ]
}

.vscode/extensions.json

推奨拡張機能リスト：

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "ms-python.python",
    "ms-vscode.cpptools",
    "ms-azuretools.vscode-docker"
  ],
  "unwantedRecommendations": []
}

まとめ：完璧なエラー検出環境の完成！

VSCodeのエラー波線設定、もう完璧ですね！

この記事の重要ポイント：

  1. 基本設定の確認
    • problems.decorations.enabled: true
    • 各言語のvalidate.enable: true
    • エラーレベルの表示設定
  2. 言語別の対応
    • 必要な拡張機能をインストール
    • リンターの設定
    • 言語サーバーの有効化
  3. トラブル解決
    • ファイル除外設定の確認
    • 拡張機能の再読み込み
    • 言語モードの確認
  4. カスタマイズ
    • 色やスタイルの変更
    • パフォーマンス最適化
    • チーム設定の共有

これで、どんな小さなエラーも見逃さない最強の開発環境が完成です！

バグゼロのコーディングライフを楽しんでください！🎯🐛

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました