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,
};

Same problem here! All the linters and auto formatting options conflict with each other! I couldn’t get code without a semicolon be accepted without errors... I had to resort to just using vs code’s native auto formatting — Kokodoko, May 28 '19 at 09:51

score 44 · Answer 1 · answered Nov 21 '19 at 15:02

44

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.

answered Nov 21 '19 at 15:02

Paul Razvan Berg

16,949
9
76
114

1

I didn't realize I had an old hangover `indent` rule in my eslint config, thanks! – Robin Zimmermann May 19 '22 at 14:57
disabling `indent` rule is not an option if you want to keep a linter – taras Mar 22 '23 at 16:44

score 24 · Answer 2 · edited Feb 22 '23 at 22:24

24

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

It disables rules in eslint that conflict with prettier.

npm install --save-dev eslint-config-prettier

in your .eslintrc.* file put last "prettier" to extends section

"extends": [
         //"some-other-config-you-use",
         "prettier"
      ],

edited Feb 22 '23 at 22:24

Michael Freidgeim

26,542
16
152
170

answered May 28 '19 at 22:09

Sam Banks

369
3
8

5

To add to this, make sure to add this LAST in the extensions list so it overrides other eslint rules! – parker_codes Mar 12 '21 at 20:21
1

Moving `plugins` under `rules` does the work! – Skipm3 May 18 '21 at 03:27

score 16 · Answer 3 · edited Jan 18 '22 at 20:30

16

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

Parameters defined

new eslint rules want the first parameter to be a number: Severity should be one of the following: 0 = off, 1 = warn, 2 = error.
the amount of indent
The object is stating how to indent switch and case statements following the options here.

edited Jan 18 '22 at 20:30

clay

5,917
2
23
21

answered Jan 07 '21 at 19:53

Cocuba

363
5
12

6

any idea what is happening here? – itsmnthn Mar 06 '21 at 06:33
@itsmnthn Did [clay's edits](https://stackoverflow.com/revisions/65619058/2) answer your question? – ruffin Apr 28 '22 at 14:34

score 10 · Answer 4 · answered May 12 '22 at 11:58

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.

score 9 · Answer 5 · answered Nov 01 '20 at 17:09

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.

this doesn't answer the question which is about vim and not VSCode — mikemols, Dec 01 '20 at 13:39
This was my issue. Even though I had `indent: 0` in my eslint config and was using eslint-config-prettier, I was getting conflicting formatting with ternary operators in JSX. I had no idea that VS Code had its own parser on top of eslint. — Manath, Feb 19 '21 at 15:44

score 4 · Answer 6 · answered Oct 05 '21 at 05:36

eslint-config-prettier will disable all ESLint formatting rules that may conflict with Prettier's rules.

npm i --save-dev eslint-config-prettier
eslint-plugin-prettier is the plugin that will add Prettier's formatting rules.
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"
  ]
}

score 3 · Answer 7 · answered Mar 02 '21 at 17:50

3

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

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

answered Mar 02 '21 at 17:50

Pastuh

376
2
12

score 2 · Answer 8 · answered Nov 23 '22 at 16:27

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.

score 1 · Answer 9 · answered Nov 18 '22 at 14:53

1

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.

answered Nov 18 '22 at 14:53

Mr. Kabir

695
8
9

score 0 · Answer 10 · answered Feb 10 '21 at 17:03

0

I had this issue and by changing Prettier to Use Tabs in the settings menu (ctrl + shift + P), it fixed the issue for me.

answered Feb 10 '21 at 17:03

Mike

87
1
2
10

1

Welcome to StackExchange, and thanks for posting an answer. However, it would be much better if you actually explain steps. Your one sentence here is not enough to help me fix my problem. I'm confused about what you're saying. – Ryan May 13 '21 at 15:23
This is a simple single settings change, there is but one step. Since I've been on StackExchange for 8+ years, I find your comment a bit condescending. – Mike May 13 '21 at 19:03
My apologies. I wasn't trying to be condescending. – Ryan May 13 '21 at 20:39

score 0 · Answer 11 · answered Mar 22 '21 at 20:40

0

In my case I just changed CRLF (Carriage Return, Line Feed) to LF (Line Feed) on VSCode

answered Mar 22 '21 at 20:40

Hermanyo H

134
3

score 0 · Answer 12 · answered Sep 26 '22 at 19:54

0

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.

answered Sep 26 '22 at 19:54

Stephane

11,056
9
41
51

score 0 · Answer 13 · answered Jan 02 '23 at 11:09

0

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

answered Jan 02 '23 at 11:09

onyango Benard

9
2

Prettier and eslint indents not working together

13 Answers13

Linked