CODEWITHSUNDEEP
node.jsconfigeslint
JohnSnow
JohnSnow

Reputation: 7111

Eslint expected indentation of 1 tab but found 4 spaces error

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.

Upvotes: 63

Views: 156224

Answers (15)

Matan Givoni
Matan Givoni

Reputation: 1116

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'] },
    ],

Upvotes: 0

Wallace Ferreira
Wallace Ferreira

Reputation: 59

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"
  ]

Upvotes: 4

Linar
Linar

Reputation: 1354

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

Upvotes: 3

SHACHI PRIYA
SHACHI PRIYA

Reputation: 131

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.

Upvotes: -1

Gedeon Mutshipayi
Gedeon Mutshipayi

Reputation: 4073

If you are using VSCODE follow the next steps.

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

enter image description here

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

enter image description here

  1. Restart VSCODE and your dev server.

Upvotes: 3

Tej Prakash
Tej Prakash

Reputation: 11

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

/* eslint-disable */

Upvotes: -10

Tim
Tim

Reputation: 330

In file

settings.json

remove this line if have:

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

eslint conflict with prettier

Upvotes: 2

Badr Bellaj
Badr Bellaj

Reputation: 12821

You can automaticaly fix the problems with

npm run lint -- --fix

Upvotes: 12

Kayra Berk Tuncer
Kayra Berk Tuncer

Reputation: 395

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

Upvotes: 0

Kayahan Kahrıman
Kayahan Kahrıman

Reputation: 618

I had a similar problem and solved with this code:

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

Upvotes: 2

Ali Radmanesh
Ali Radmanesh

Reputation: 2536

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.

Upvotes: 30

Mahmoud Haj Ali
Mahmoud Haj Ali

Reputation: 1288

Try to disable indent inside .eslintrc.js file

rules: {
   'indent': 'off'
}

this works fine for me

Upvotes: 68

Reza Khodarahmi
Reza Khodarahmi

Reputation: 89

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

and... enter image description here

Upvotes: 7

Gary
Gary

Reputation: 909

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

Upvotes: 53

Sergey Yarotskiy
Sergey Yarotskiy

Reputation: 4804

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

Upvotes: 3

Related Questions