eslint indent and @typescript-eslint/indent conflict

Question

So I'm using eslint and prettier on a TS express app. I want to set tab width to 4, but it seems the base eslint and the typescript eslint are in conflict.

This is what it gives me for the same line:

This is my eslintrc.json:

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true
    },
    "extends": "standard-with-typescript",
    "overrides": [],
    "parserOptions": {
        "ecmaVersion": "latest",
        "project": "tsconfig.json"
    },
    "rules": {
        "indent": ["error", 4],
        "prettier/prettier": ["error", { "endOfLine": "auto" }]
    },
    "parser": "@typescript-eslint/parser",
    "plugins": ["prettier"]
}

This is my prettierrc.json:

{
  "singleQuote": true,
  "arrowParens": "always",
  "printWidth": 120,
  "semi": false,
  "tabWidth": 4
}

Any idea how to resolve it so I can just have 4 spaces to a tab?

Answer 1

If you're using prettier and eslint, you should use the prettier eslint configuration. It will disable every style-only eslint rule. It should be ok, since styles would be left for prettier to format. See the docs for more info on this.

Since you have the prettier plugin installed, you can change your extends line to this and it should be enough:

"extends": ["standard-with-typescript", "plugin:prettier/recommended"]