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.

Answer 1

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

Answer 2

Try to disable indent inside .eslintrc.js file

rules: {
   'indent': 'off'
}

this works fine for me

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.

Answer 4

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...