How can I define tab size to 4 in ESLint?

eslint eslintrc
Louie Albarico picture Louie Albarico · Feb 10, 2020 · Viewed 8.2k times · Source

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.

Answer

CertainPerformance picture CertainPerformance · Feb 10, 2020

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

Related questions

Using jest in my react app, describe is not defined

I am new to jest and trying to figure out some basic stuff in my following code import * as actions from './IncrementalSearchActions'; describe('Incremental Search Actions', () => { it('Should create an incremental search action') }); The questions/confusions I have …

Read More
ESLint only target a specific directory (eslintrc, create-react-app)

I have a folder structure similar to this: /root .eslintrc.json package.json /someFolder /sub /sub /anotherFolder /src /containers /components /oneMoreFolder /sub /sub I'm working with create-react-app and am applying airbnb rules. I have been able to run the linter …

Read More
eslint "parsing error: Unexpected token {" in JSX

const title = 'My Minimal React Webpack Babel Setups'; const App = () => (<div><b>{title}</b><img src={img} /></div>) This code occurs an error "ESLint Parsing Error: Unexpected token {" my .…

Read More