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