Eslint AirBNB with 4 spaces for indent

39
votes

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.

3
eslint
related issue on github github.com/yannickcr/eslint-plugin-react/issues/1141 - Alexandre Nicolas
Thanks for your reply, but unfortunately this is for indenting props, not for general code. - Notorious
One more way is to remove entirely this plugin (Until the core team will better User experience - it does not make sense to throw Failed to compile because of one extra white space or indentation ): npm remove @vue/cli-plugin-eslint - Ezra Siton

3 Answers

90
votes

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],
14
votes

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

1
votes

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