Eslint expected indentation of 1 tab but found 4 spaces error

Question

I am using VScode with latest version of Eslint. It is my first time using a linter.

I keep getting this linting error when using a tab as indentation:

severity: 'Error' message: 'Expected indentation of 1 tab but found 4 spaces. (indent)' at: '4,5' source: 'eslint'

Here is my config file

{
"env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
},
"extends": "eslint:recommended",
"rules": {
    "indent": [
        "error",
        "tab"
    ],
    "linebreak-style": [
        "error",
        "unix"
    ],
    "quotes": [
        "error",
        "single"
    ],
    "semi": [
        "error",
        "always"
    ]
}
}

I don't understand why this error is being thrown as I indicated tabs for indentation. It is obviously calculating my 1 tab as 4 spaced but I don't understand why it is doing that when I am pressing tab for indentation.

update: The reason is because in VScode using ctrl + shift + i to beautify code will actually use spaces and not tabs. That is the reason.

Personate

Answer 1

Try to disable indent inside .eslintrc.js file

rules: {
   'indent': 'off'
}

this works fine for me

Metaplasm

In case you have .eslintrc.json: "rules": {"indent":"off"} with double quotes. – Cryptogram

Answer 2

In VSCODE, go to menu:

File / Preferences / Settings then Text Editor (or just search for 'tab' in the search settings box)

Then remove the tick from the following settings:

• Insert Spaces
• Detect Indentation

Also to auto format the document with the default VSCode keyboard shortcut use:

Shift+Alt+f

Overanxious

In VS Code this is the correct answer, thanks ! – Barbarism

Answer 3

If you use both eslint and prettier, don't disable indent by using {'indent': 'off'} in rules object. To ensure the consistency of your code style, you have to use this rule.

Solution:

This issue is probably happened because of eslint & prettier conflict. Try to play with different options of eslint in .eslintrc file.

If you hover the error lines in vsCode, at the end of error description you can click on that link to see eslint docs.

For example, in case of indent docs is in this link:

Eslint Indent Docs

For me, error resolved by adding this line (for ternary expressions):

...
rules: {
    indent: [
  'error',
  2,
  {
    SwitchCase: 1,
    ignoredNodes: ['ConditionalExpression'], <-- I add this line
  },
],
...

You can also try flatTernaryExpressions or offsetTernaryExpressions for ternary expressions.

Burma

This is the correct answer for those who are having this problem when using switch case – Menhaden

Answer 4

You can automaticaly fix the problems with

npm run lint -- --fix

Buy

Answer 5

I used VScode to solve this problem. All you have to do is hold the mouse over the part where there is an error.

and...

Pappy

Maybe this comes from a extension you are using? I get: "No quick fixes available" – Consensus

@Jesper Hustad, You can use eslint plugin to fix the issue. All though, this will not fix the issues in the build or in the pipeline for existing files – Coextend

To be able to do this the extension called ESLint must be installed. But this trick of using the mouse to fix the error does work. – Tonina

Answer 6

There was a conflict between plugins in my example. I'm using eslint version 8.24.0. To fix, i just removed the rule plugin:prettier/recommended and added prettier at last position from extends as explained in eslint-config-prettier documentation. See: https://github.com/prettier/eslint-config-prettier#arrow-body-style-and-prefer-arrow-callback

Before:

"extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "plugin:storybook/recommended",
  ]

After:

"extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:storybook/recommended",
    "prettier"
  ]

Tramroad

Answer 7

Wee, that exactly what it says. You have in your config "indent": [ "error", "tab" ], So it expects tab as indent. But found in your file 4 spaces. Remove spaces and put tab in you file

Supervene

I don't user 4 spaces when i indent though, I use a tab so why is it detecting 4 spaces? and if I remove and hit tab again the problem is not solved – Personate

Found out the reason, its beacause in VSCODE when you do ctrl shift + i to beautify code it actually uses 4 spaces and not tabs. That is the correct answer – Personate

Answer 8

change "editor.tabSize": 4 to "editor.tabSize": 2 in VS Code Settings

Burgage

Editor: Detect Indentation is off, then "editor.tabSize": 2 – Matriculate

Answer 9

I had a similar problem and solved with this code:

rules: {
    ...
    indent: [2, "tab"],
    "no-tabs": 0,
    ...
}

Delightful

Answer 10

In file

settings.json

remove this line if have:

"editor.defaultFormatter": "esbenp.prettier-vscode",

eslint conflict with prettier

Sobranje

Answer 11

If you are using VSCODE follow the next steps.

1. Access the settings by clicking: code > preferences > settings, as shown in the following image.

2. In the settings, click: Text Editor after that, uncheck the Insert Space option and the Detect Indentation option as shown in the following image.

3. Restart VSCODE and your dev server.

Johnathan

Answer 12

I was having the same problem and I solved my problem with documentation. Instead of disabling eslint indent, you can add it as shown in the documentation.

Docs

Simple:

rules: {
  indent: ['error', 2, { "MemberExpression": 1 }],
}

Eisenach

Answer 13

For individual files, we can utilize the following comment at the top of the page. This will disable eslint check for that particular file with respect to the indent

Just TypeScript

/* eslint-disable @typescript-eslint/indent */

For JavaScript

/* eslint-disable indent */

Breazeale

Answer 14

I had an annoying similar issue where vscode was saying:

Expected indentation of 4 tab but found 2 spaces. (indent)

Even that my .eslintrc.js file was configurred with:

    indent: [
      'error',
      2,
      { SwitchCase: 1 },
    ],

After a long research I fixed it by updating the rule to:

    indent: [
      'error',
      2,
      { SwitchCase: 1, ignoredNodes: ['PropertyDefinition'] },
    ],

Interface

Answer 15

It worked for me, if error is coming then just solve it line by line simply in your code, like : 1.)Expected indentation of 2 spaces but found 8 -> then put only 2 spaces from the starting of the line 2.)Unexpected tab character -> don't use tabs, use spaces 3.)Trailing spaces not allowed -> don't give any spaces after lines end. 4.)Missing space before value for key 'name' -> put 1 space after ":" in object value 5.)A space is required after ',' -> put 1 space after "," in parameter of the function 6.)Opening curly brace does not appear on the same line as controlling statement -> just put the opening curly brace where function starts in the same line 7.)Closing curly brace should be on the same line as opening curly brace or on the line after the previous block -> put the closing curly brace just below where the function starts.

Suprarenal

Answer 16

Please add the below comment at the first line of the JS file that you are customizing.

/* eslint-disable */

Octan

Your answer could be improved by providing more information on your solution and how it helps the OP. – Shaniceshanie

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Foliation

Your answer could be improved by not posting it in the first place. Installing a linter in order to disable it is not a bright thing to do. – Vivle

Your answer does not help. – Champlin

This is not an good answer this is just hack which can get anyone fired 😂 – Isaak