Eslint-plugin-react: Weird behavior about "react/jsx-indent"

[Means88]

version

• eslint: 4.17.0
• eslint-plugin-react: 7.6.1

config

{
  "plugins": [
    "import",
    "react"
  ],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "indent": ["error", 2],
    "react/jsx-indent": ["error", 2]
  }
}

source code

import React from 'react';
var a = true;

function ComponentA() {
  return <div>1</div>;
};

function ComponentB() {
  return <div>2</div>;
}

var Layout = (
  <div>
    {a ? <ComponentA /> :
      <ComponentB            //   <------------
        props1='1'
        props2='2'
      />
    }
  </div>
);

lint result

  15:7  error  Expected indentation of 4 space characters but found 6  react/jsx-indent

✖ 1 problem (1 error, 0 warnings)
  1 error, 0 warnings potentially fixable with the `--fix` option.

It's not fixable due to the conflicting with the indent rule.
But it can pass the lint with parentheses around <ComponentB />

diff --git a/1.js b/2.js
index 8c9448b..fe526e2 100644
--- a/1.js
+++ b/2.js
@@ -11,11 +11,11 @@ function ComponentB() {

 var Layout = (
   <div>
-    {a ? <ComponentA /> :
+    {a ? <ComponentA /> : (
       <ComponentB
         props1='1'
         props2='2'
       />
-    }
+    )}
   </div>
 );

[ljharb]

The proper way to use the indent rule with react/jsx-indent is to tell the indent rule to ignore all the JSX nodes.

[Means88]

@ljharb Thank you, it worked for the case above, but there is a more complex case.

config

{
  "plugins": [
    "import",
    "react"
  ],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "indent": ["error", 2, {"ignoredNodes": ["JSXElement"]}],
    "react/jsx-indent": ["error", 2]
  }
}

source code

import React from 'react';
var a = true;

function ComponentA() {
  return <div>1</div>;
};

function ComponentB() {
  return <div>2</div>;
}

var Layout = (
  <div>
    {a ? <ComponentA /> :
    <ComponentB
      props1='1'
      props2='2'
    >
      {"Hello world"}  // <-----------------
    </ComponentB>
    }
  </div>
);

lint result

  19:1  error  Expected indentation of 4 spaces but found 6  indent

✖ 1 problem (1 error, 0 warnings)
  1 error, 0 warnings potentially fixable with the `--fix` option.

fix it

diff --git a/2.js b/1.js
index de3fb1c..12c5670 100644
--- a/2.js
+++ b/1.js
@@ -16,7 +16,7 @@ var Layout = (
       props1='1'
       props2='2'
     >
-      {"Hello world"}
+    {"Hello world"}
     </ComponentB>
     }
   </div>

lint result

  19:5  error  Expected indentation of 6 space characters but found 4  react/jsx-indent

✖ 1 problem (1 error, 0 warnings)
  1 error, 0 warnings potentially fixable with the `--fix` option.

[ljharb]

You need more ignored nodes than that. See https://github.com/airbnb/javascript/blob/e9fff7adbf6dd4e3723c12849c407aafd429cf0f/packages/eslint-config-airbnb-base/rules/style.js#L141

[Means88]

@ljharb Yes, that's it! Thank you very much!