Eslint AirBNB with 4 spaces for indent
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:
.eslintrc.js
.eslintrc.cjs
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
.eslintrc
- 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")
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"]
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],