Eslint AirBNB with 4 spaces for indent

Question

I am configuring eslint and am using the AirBNB style guide.

I want to over-ride the indent (supposed to be 2 spaces) to be 4 spaces. But no matter what I do within my .eslintrc I cannot get this error supressed so that I can use indentation of 4 spaces.

I have the message "Expected indentation of 2 spaces chatacters but found 4. (react/jsx-indent)" everywhere within my code base.

I am using eslint 4.9.0. How can I resolve this? Thanks.

Answer 1

Ok so this is relatively easy to do and is achievable by adding the following to your eslint config:

// Indent with 4 spaces
"indent": ["error", 4],

// Indent JSX with 4 spaces
"react/jsx-indent": ["error", 4],

// Indent props with 4 spaces
"react/jsx-indent-props": ["error", 4],

Answer 2

The code above should be added to rules field in the ESlint config.

module.exports = {
"extends": "eslint:recommended",
"rules": {
    // enable additional rules
    "indent": ["error", 4],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "double"],
    "semi": ["error", "always"],

    // override default options for rules from base configurations
    "comma-dangle": ["error", "always"],
    "no-cond-assign": ["error", "always"],

    // disable rules from base configurations
    "no-console": "off",
}

[ Source - see Using "eslint:recommended"]

Answer 3

Since the accepted answer is incomplete and that answer's edit queue is full, I'm adding this complement:

To Simply Disable the 2-space ident rule, add the following line to the rules property of your esling config file:

"indent": "off",

To Override the Rule (probably what you want) to check for 4-space idents rather than 2 spaces, add the following line instead:

"indent": ["error", 4],

It should look like this:

// eslintrc.js
module.exports = {
  "extends": [
    "eslint:recommended",
    "airbnb",
  ],
  "rules": {
    "indent": ["error", 4],
  },
};

ESLint config location

Your eslint config might be in any of the following files:

1. .eslintrc.js
2. .eslintrc.cjs
3. .eslintrc.yaml
4. .eslintrc.yml
5. .eslintrc.json
6. .eslintrc
7. or it might be inside your package.json, in an "eslintConfig" property.

More about eslint config: https://eslint.org/docs/user-guide/configuring (under header "Configuration File Formats")