「コード書いてるだけなのに、波線だらけで画面が汚い！」 「エラーじゃないのに赤い波線が消えない」 「ESLintの警告がうるさすぎて集中できない」
VSCodeでコーディングしていると、画面中に表示される**波線（squiggly lines）**にイライラすることありますよね。
赤い波線、黄色い波線、青い波線…実はこれら、全部意味が違うんです。そして、消し方も違います。
今回は、波線を「根本的に解決する方法」と「とりあえず非表示にする方法」の両方を、状況別に詳しく解説していきます。5分後には、あなたのVSCodeもスッキリきれいになっているはずです！
🌈 波線の色と意味を理解しよう
波線の種類と原因
VSCodeの波線には4種類あります。それぞれ意味が違うので、まず理解しましょう。
🔴 赤い波線（エラー）
- 構文エラー
- 型エラー（TypeScript）
- 未定義の変数
- インポートエラー
🟡 黄色い波線（警告）
- 使われていない変数
- 非推奨のメソッド
- コーディング規約違反
- パフォーマンスの問題
🔵 青い波線（情報）
- スペルミスの可能性
- より良い書き方の提案
- リファクタリングのヒント
🟢 緑の波線（ヒント）
- 廃止予定のAPI
- 代替案の提案
- 最適化の余地
どの波線を消したいか、まず確認してください。全部消すこともできますが、エラーの波線は残しておくことをおすすめします。
⚡ 今すぐ波線を消す！クイック解決法
10秒で全ての波線を非表示にする
とりあえず今すぐ波線を消したい場合：
方法1：問題パネルを閉じる
Ctrl + Shift + M（問題パネルの表示/非表示）
View → Problems で閉じる
方法2：エディタの装飾を無効化
Ctrl + Shift + P → 「Developer: Toggle Developer Tools」
Console に以下を入力：
monaco.editor.getEditors()[0].updateOptions({renderValidationDecorations: 'off'})
方法3：設定で一括無効化
// settings.json
{
"editor.showUnused": false,
"editor.renderValidationDecorations": "off"
}
ただし、これは一時的な対処法です。根本的に解決したい場合は、次の詳細設定を見てください。
🛠️ 波線の種類別・詳細な消し方
赤い波線（エラー）を消す
TypeScriptのエラーを消す：
// settings.json
{
// TypeScriptの検証を無効化
"typescript.validate.enable": false,
"javascript.validate.enable": false,
// 特定のエラーだけ無視
"typescript.tsserver.experimental.enableProjectDiagnostics": false
}
インポートエラーを解決：
{
// パスエイリアスを設定
"typescript.preferences.importModuleSpecifier": "relative",
"javascript.preferences.importModuleSpecifier": "relative",
// node_modulesの型チェックをスキップ
"typescript.tsserver.experimental.enableProjectDiagnostics": false
}
Pythonのエラーを消す：
{
// Pylanceのエラーレベルを調整
"python.analysis.typeCheckingMode": "off",
"python.linting.enabled": false
}
黄色い波線（警告）を消す
未使用変数の警告を消す：
{
// 未使用のコードをハイライトしない
"editor.showUnused": false,
// TypeScript specific
"typescript.disableAutomaticTypeAcquisition": true,
// JavaScript specific
"javascript.validate.enable": false
}
ESLintの警告を調整：
// .eslintrc.js で特定のルールを無効化
module.exports = {
rules: {
'no-unused-vars': 'off', // 未使用変数の警告OFF
'no-console': 'off', // console.logの警告OFF
'prefer-const': 'off', // const推奨の警告OFF
'no-undef': 'off', // 未定義変数の警告OFF
'@typescript-eslint/no-unused-vars': 'off' // TypeScript用
}
}
VSCodeでESLintを完全に無効化：
{
"eslint.enable": false,
// または特定のファイルだけ無効化
"eslint.probe": [
"javascript",
"javascriptreact"
// "typescript", "typescriptreact" を除外
]
}
青い波線（情報・スペルチェック）を消す
スペルチェックを無効化：
{
// Code Spell Checker拡張機能の場合
"cSpell.enabled": false,
// 特定の言語だけ無効化
"cSpell.enabledLanguageIds": [
"markdown",
"plaintext"
// JavaScriptやTypeScriptを除外
],
// 無視する単語を追加
"cSpell.userWords": [
"kubectl",
"nginx",
"redux"
]
}
🎯 言語別の波線制御設定
HTML/CSSの波線を消す
{
// HTML
"html.validate.scripts": false,
"html.validate.styles": false,
// CSS
"css.validate": false,
"scss.validate": false,
"less.validate": false,
// 特定の警告だけ無視
"css.lint.unknownProperties": "ignore",
"css.lint.vendorPrefix": "ignore"
}
Markdownの波線を消す
{
// Markdownのリント無効化
"markdownlint.config": {
"default": false
},
// または特定のルールだけ
"markdownlint.config": {
"MD013": false, // 行の長さ制限
"MD033": false, // インラインHTML許可
"MD041": false // 最初の見出しルール
}
}
JSONの波線を消す
{
// JSONの検証を無効化
"json.validate.enable": false,
// コメントを許可
"json.format.enable": true,
"files.associations": {
"*.json": "jsonc" // JSON with Commentsとして扱う
}
}
💡 Prettier/ESLint関連の波線を制御
PrettierとESLintの競合を解決
// .eslintrc.js
{
"extends": [
"eslint:recommended",
"prettier" // Prettierとの競合ルールを無効化
],
"rules": {
// Prettierが処理する項目はOFF
"indent": "off",
"quotes": "off",
"semi": "off",
"comma-dangle": "off"
}
}
フォーマット関連の波線を消す
// settings.json
{
// 保存時の自動フォーマットでほとんどの波線が解決
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 言語別のフォーマッター設定
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
⚙️ 高度な設定：ファイル・フォルダ別の制御
特定のファイルだけ波線を無効化
// settings.json
{
"[javascript]": {
"editor.renderValidationDecorations": "off"
},
// 特定のファイルパターンで無効化
"files.associations": {
"*.config.js": "javascript",
"*.test.js": "javascript"
},
// テストファイルだけリンターを無効化
"eslint.probe": [
"javascript",
"!**/*.test.js",
"!**/*.spec.js"
]
}
プロジェクト別の設定
.vscode/settings.jsonをプロジェクトごとに作成：
{
// このプロジェクトだけの設定
"typescript.validate.enable": false,
"eslint.enable": false,
"editor.showUnused": false
}
特定のエラーコードだけ無視
// tsconfig.json
{
"compilerOptions": {
"suppressImplicitAnyIndexErrors": true,
"skipLibCheck": true
},
"exclude": [
"node_modules",
"**/*.test.ts"
]
}
🎨 波線のスタイルを変更する
波線を目立たなくする
消すのではなく、目立たなくしたい場合：
{
// 波線を点線に変更
"workbench.colorCustomizations": {
"editorError.foreground": "#ff000050", // 赤を半透明に
"editorWarning.foreground": "#ffff0030", // 黄色を薄く
"editorInfo.foreground": "#0000ff20", // 青をさらに薄く
"editorHint.foreground": "#00ff0010" // 緑をほぼ見えなく
},
// 波線を細くする
"editor.renderLineHighlight": "none",
"editor.occurrencesHighlight": false
}
⚠️ 波線を消す前に考えるべきこと
消していい波線・消してはいけない波線
消してもOKな波線：
- スタイルの好みに関する警告
- 使用していないインポート（自動削除可能）
- コメントのスペルミス
- インデントの警告（Prettierで解決）
消すべきでない波線：
- 実行時エラーになる構文エラー
- 型の不一致（TypeScript）
- セキュリティの警告
- 非推奨APIの使用
チーム開発での注意点
// 個人設定とチーム設定を分ける
{
// チーム共通（.vscode/settings.json）
"editor.formatOnSave": true,
// 個人設定（User settings.json）
"editor.renderValidationDecorations": "editable"
}
🔧 トラブルシューティング
設定しても波線が消えない場合
1. キャッシュをクリア
Ctrl + Shift + P → 「Developer: Reload Window」
2. 拡張機能の確認
表示 → 拡張機能 → 有効な拡張機能を確認
問題の拡張機能を無効化
3. 設定の優先順位を確認
ワークスペース設定 > ユーザー設定 > デフォルト設定
波線が復活してしまう場合
// settings.json に強制設定
{
"[javascript]": {
"editor.renderValidationDecorations": "off"
},
"typescript.tsserver.experimental.enableProjectDiagnostics": false,
"typescript.surveys.enabled": false
}
📊 まとめ：波線と上手に付き合おう
VSCodeの波線は、コードの品質を保つための重要な機能です。
全部消してしまうのは簡単ですが、できれば：
推奨される対処法：
- エラー（赤）は残す – バグ防止のため
- 警告（黄）は調整 – 必要なものだけ表示
- 情報（青）は好みで – 邪魔なら消してOK
- 自動フォーマット活用 – 波線の原因を自動解決
設定の使い分け：
- 個人プロジェクト → 好みで自由に設定
- チーム開発 → 最小限の変更に留める
- 学習中 → 波線を残して学ぶ
波線は「うるさい先生」のようなもの。時にはうざいけど、あなたのコードを良くしてくれる存在です。上手に付き合って、快適な開発環境を作りましょう！
🔗 参考リンク
設定してもうまくいかない場合は、具体的な状況をコメントで教えてください！
コメント