16

I'm experimenting with ESLint in my workspace and I got little confused by the indent rule.

Here is my rule for indent setting:

"rules": {
  "indent": [
    "error", "tab"
  ]
}

The documentation only says that there are only two options: a positive number for number of spaces and "tab".

My question is how can I define tab size of 4 rather than just "tab"? Is it possible to use the indent rule for this?

I'm using vscode.

Pawel Uchida-Psztyc
  • 3,735
  • 2
  • 20
  • 41
Louie Albarico
  • 230
  • 1
  • 3
  • 11

4 Answers4

12

You need config Vscode to define tab size to 4. ESlint is used to show an error, it isn't used to convert tab to spaces. You can use this rule on ESlint for show error when the intent difference from 4 spaces (which is default style):

{
    "indent": ["error", 4]
}
Thai Dang
  • 121
  • 4
9

What you're looking for isn't possible as a linter setting. ESLint lints the source files (or plain text), and all the source files have at the location of a tab is a tab character. There aren't separate tab characters for different tab lengths. Rather, each application which is displaying a tab character decides for itself how to display the tab character. VSCode may have one setting for it, but when you open the file in a different editor, or in a browser, the other editor or browser may choose to display it differently (like as a tab taking up 2 spaces, or a tab taking up 8 spaces, or something like that).

Even in a browser, there can be multiple different settings for the length of a tab, in the same tab, despite starting from the same source file. See here for an example of a related discussion.

VSCode does have a setting for the visual size of tabs, though: go to File -> Preferences -> Tab Size and set it to 4:

enter image description here

CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
2

Even after setting tab size to 4 I still encountered some errors, eslint saying I should still use four spaces.

   "rules": {
        "indent": ["error", { "allowIndentationTabs": true }]
     }

But using allowIndentationTabs https://eslint.org/docs/latest/rules/no-tabs#allowindentationtabs as seen inside the documentation removed the errors. Also setting no-tabs to 0 works

   "rules": {
        "indent": [4, "tab"],
        "no-tabs": 0,
     }
Leksyking
  • 322
  • 3
  • 5
0

This seems to be more of an ide based issue. Eslint can be told that an indentation of 4 is required or a tab, which is an escaped character '\t'. If you want your tab space to defined as 4 spaces then you'll have to change the settings in whatever code editor you are using.

How can I customize the tab-to-space conversion factor?

This shows you how to that in vscode.

flytex
  • 98
  • 7