JavaScript | VSCodeで「保存時に自動修正＆警告表示」する設定（.vscode/settings.json）

では、VSCodeで 「保存時に自動修正」＋「リアルタイム警告」 を出す完全設定を、
初心者にもわかるように丁寧に説明します。

目的

保存時に自動で ESLint を走らせて、

• コードの問題（例：finally内のreturn）を即警告
• 修正できるものは自動整形（インデント・セミコロンなど）

📁 必要ファイル構成

project/
├─ .eslintrc.json        ← ESLint設定
├─ .vscode/
│   └─ settings.json     ← VSCode用設定
├─ package.json
└─ main.js

1. ESLint の導入

まずプロジェクトフォルダで以下を実行👇

npm init -y
npm install eslint --save-dev
npx eslint --init

途中の質問はおおまかに：

✔ To check syntax and find problems
✔ JavaScript modules (import/export)
✔ Browser
✔ Use a popular style guide → Recommended
✔ JSON

これで .eslintrc.json ができます。

2. .eslintrc.json の例

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended"],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "no-unsafe-finally": "error",
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  }
}

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended"],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "no-unsafe-finally": "error",
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  }
}

👉 ポイント：

• no-unsafe-finally : finally内のreturn/throwを禁止
• semi : セミコロン必須
• quotes : ダブルクォーテーション統一

3. VSCode拡張機能のインストール

VSCode で以下の拡張機能を入れましょう：

• ✅ ESLint（作者: Microsoft）
• ✅ Prettier（コード整形が自動で行われる）

4. .vscode/settings.json の設定

{
  // 保存時に自動でESLintを実行して修正
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // ESLintエラーをリアルタイムで表示
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],

  // エラーを明確に赤線表示
  "eslint.alwaysShowStatus": true,

  // Prettierと競合しないように統一
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

{
  // 保存時に自動でESLintを実行して修正
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // ESLintエラーをリアルタイムで表示
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],

  // エラーを明確に赤線表示
  "eslint.alwaysShowStatus": true,

  // Prettierと競合しないように統一
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

この設定により：

• コードを保存した瞬間に ESLint + Prettier が走る
• finally内にreturnがあれば警告マークがつく
• スタイル問題は自動修正される

5. 実際の動作例

async function test() {
  try {
    throw new Error("err");
  } catch (e) {
    console.log("catch:", e);
  } finally {
    return "OK"; // ⚠️ ESLint: Unsafe usage of ReturnStatement in finally block
  }
}

async function test() {
  try {
    throw new Error("err");
  } catch (e) {
    console.log("catch:", e);
  } finally {
    return "OK"; // ⚠️ ESLint: Unsafe usage of ReturnStatement in finally block
  }
}

VSCodeで保存するとすぐに：

• 下線付き警告「Unsafe usage of ReturnStatement in finally block」
• 問題パネルに赤エラー
• 自動整形（インデントなど）

まとめ

おまけ：チーム開発で便利な設定

共同開発時には .vscode/settings.json を共有しておくと
「誰の環境でも同じ警告・同じ自動整形」が効きます ✅