Eslint AirBNB with 4 spaces for indent

eslint
Notorious picture Notorious · Feb 21, 2018 · Viewed 25.2k times · Source

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

Notorious picture Notorious · Feb 21, 2018

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

Related questions

Turning off eslint rule for a specific line

In order to turn off linting rule for a particular line in JSHint we use the following rule: /* jshint ignore:start*/ $scope.someVar = ConstructorFunction(); /* jshint ignore:end */ I have been trying to locate the equivalent of the above for eslint.

Read More
Turning off eslint rule for a specific file

Is it possible to turn off the eslint rule for the whole file? Something such as: // eslint-disable-file no-use-before-define (Analogous to eslint-disable-line.) It happens to me quite often, that in a certain file, I'm breaking a specific rule on many places …

Read More
How to fix missing dependency warning when using useEffect React Hook?

With React 16.8.6 (it was good on previous version 16.8.3), I get this error when I attempt to prevent an infinite loop on a fetch request ./src/components/BusinessesList.js Line 51: React Hook useEffect has a missing dependency: 'fetchBusinesses'. Either include it …

Read More