VSCodeにESLintとPrettierを入れたときにおこるインデントのエラー解決方法

こんにちは。
駆け出し素人プログラマーのHirotoです。

今回はVSCodeにESLintとPrettierを同時に入れたときに起こったインデントのエラーについてまとめてみました。

まず、私の環境では両方の拡張機能を入れると以下のようにインデントのエラーが表示されるようになってしまいました。。。

VSCodeのsettings.json（VSCodeのSettingから右上の以下のボタンを押すとでてくるやつ）

は以下です。

setting.json

{
    "security.workspace.trust.untrustedFiles": "open",
    "python.createEnvironment.trigger": "off",
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "python.defaultInterpreterPath": "C:\\Users\\marks\\scoop\\apps\\python\\3.12.4\\python.exe",
    "editor.formatOnSave": true,
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.defaultFormatter": "vscode.html-language-features",
    "editor.formatOnPaste": true,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
      "eslint.probe": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ],
    "genieai.enableConversationHistory": true,
    "genieai.openai.model": "o1-preview-2024-09-12",
    "genieai.promptPrefix.customPrompt1-enabled": true,
    "genieai.openai.temperature": 1
}

注目箇所は以下

"[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

JavaScriptのフォーマッターをこのようにprettierにしたときにエラーが起こったんですよね。。。

解決法

結果的には問題が起こったファイルと同じディレクトリにある.eslintrc.jsというファイルに以下のコードを付け加えることでエラーが出なくなりました。

.eslintrc.js

  indent: [
    "error",
    4,
    { SwitchCase: 1, ignoredNodes: ["ConditionalExpression *"] },
  ],

解説（ChatGPTより）

これは ESLint のインデントルールの設定で、以下のような意味があります。

"error"
ルール違反がある場合、エラーとして扱うという意味です。つまり、コードのインデントが指定通りでないとエラーが発生します。

4
基本のインデント幅を 4 スペースに設定しています。すべてのブロックやコード構造は、4 スペースを基準としてインデントされる必要があります。

オプション { SwitchCase: 1, ignoredNodes: ["ConditionalExpression *"] }

SwitchCase: 1
switch 文内の case 句（および default 句）を、switch 本体より 1 レベル深くインデントする設定です。つまり、switch ブロックの内部で、case の開始位置は 4 スペース（1レベル分）ずらされます。

*ignoredNodes: ["ConditionalExpression "]
条件演算子（?:）などの一部のノードに対しては、このインデントルールのチェックを無視する設定です。これにより、条件式内の複雑な構造が ESLint のインデントチェックに引っかからないようになります。

まとめると、この設定は「すべてのコードでインデントは 4 スペースを基本とし、switch 文の case 句は 1 レベル分インデント、ただし条件演算子に関連する部分はインデントチェックの対象外とする」というルールを定めています。

らしいです😁

複雑ですね。。。