Prettier and eslint indents not working together

Question

I traying setup my vim based typescript developing environment, but have an issue with indent management.

Probably 'eslint' says: indent: Expected indentation of 2 spaces but found 4. after prettier reformat.

My .eslintrc.js :

module.exports = { 
  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
  extends: [ 
    'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  parserOptions: { 
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module', // Allows for the use of imports
    ecmaFeatures: { 
      jsx: true, // Allows for the parsing of JSX
      tsx: true, // Allows for the parsing of TSX ???
    },
  },
  rules: { 
    indent: ['error', 2],
    quotes: ['error', 'single'],
    semi: ['error', 'never'],
    'sort-keys': ['error', 'asc', { caseSensitive: true, natural: false }],
  },
}

My .prettierc :

 module.exports = { 
  semi: false,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 80, 
  tabWidth: 2,
};

Answer 1

As per this Kai Cataldo's comment on this GitHub issue :

ESLint's indent rule and Prettier's indentation styles do not match - they're completely separate implementations and are two different approaches to solving the same problem ("how do we enforce consistent indentation in a project").

Therefore, when using prettier , you'd better disable eslint's indent rule. It's guaranteed that they will clash.

Answer 2

in eslintrc add indent: [2, 2, { SwitchCase: 1}]

Parameters defined

1. new eslint rules want the first parameter to be a number: Severity should be one of the following: 0 = off, 1 = warn, 2 = error .

2. the amount of indent

3. The object is stating how to indent switch and case statements following the options here .

Answer 3

This should fix it https://github.com/prettier/eslint-config-prettier

It disables rules in eslint that conflict with prettier

Answer 4

Turning off default Visual Studio Code parser and just leaving the eslint parser on save fixed it for me.

Just go to settings Ctrl/Cmd + , , choose User (global settings) or Workspace (only for the working repo) and on top right corner click the paper with a turning arrow. That will open the declared settings on a json file. With the following settings it should work on any case:

{
  // other settings
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": false
  },
  // other settings
}

Normally at the bottom of the Visual Studio Code window you have a Fix on save: X flag. That should be linked with this setting so make sure to leave it consistent.

Answer 5

Most annoying thing.. so fixed with: eslint-config-prettier

{
  "rules": {
    "no-tabs": ["error", {"allowIndentationTabs": true}]
  }
}

Answer 6

I ran into the same issue. Thing is you can just manually override any clashing rules. In my case it was the prettier/prettier plugin for ESLint, so that can be solved adding the indent rule, under the required plugin.

"rules": {
        // "indent":["error",10]
        "prettier/prettier":[  //or whatever plugin that is causing the clash
            "error",
            {
                "tabWidth":4
            }
        ]
    }

You can override specific rules like this, to get rid of any clashes.

Answer 7

1. eslint-config-prettier will disable all ESLint formatting rules that may conflict with Prettier's rules .
   
   npm i --save-dev eslint-config-prettier
2. eslint-plugin-prettier is the plugin that will add Prettier's formatting rules.
3. Let's tell ESLint we'll use Prettier's recommended configuration:
   npm i --save-dev eslint-plugin-prettier

//eslintrc.js
{
  "eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest",
    "plugin:prettier/recommended"
  ]
}

Answer 8

It seems on my end, the only conflict is with ternary operations. Another option to fix the issue is to use the following eslint rule.

"indent": ["error", 2, { "offsetTernaryExpressions": true }],

There are a lot more options here: https://eslint.org/docs/latest/rules/indent#offsetternaryexpressions

I find eslint's indent rules more configurable and would use them over prettier.

Answer 9

我遇到了这个问题，通过在设置菜单（ctrl + shift + P）中将 Prettier 更改为使用选项卡，它为我解决了这个问题。

Answer 10

就我而言，我只是在 VSCode 上将CRLF （回车，换行）更改为LF （换行）

Answer 11

If you are using VS-Code and configured the eslint and prettier settings as per the others answers here, then also check this option in VS-Code;)

Change it to 'Tab' instead.

Answer 12

In my case what I did was I removed the indentation rule from the .eslintrc file and added useTabs: true to my .prettierrc file.

After reloading the VS Code it works perfectly with the tab size indentation.

Answer 13

So, npm i --save-dev eslint-config-prettier fixed the Issue as pointed out by Akshay

Answer 14

had the same issue, not using eslint, solved like so:

npm i tslint-config-prettier --save-dev

tslint.config : Add it if not already added:

"extends": ["tslint:recommended", "tslint-config-prettier"],