Eslint-plugin-react: jsx-one-expression-per-line doesn't work with plain text

Created on 4 Feb 2019  路  5Comments  路  Source: yannickcr/eslint-plugin-react

full disclosure: I'm mostly self-learned so I believe there's a nonzero possibility that I don't understand React best practices, but that being said I couldn't find any reason this code wouldn't be valid

screen shot 2019-02-04 at 11 11 28 am

  1. The error is pretty clearly wrong, as it's on a new line. This looks like a clone of #1893 but I actually am using LF line endings (this is actually on OSX, but reproducible on Linux).
  2. "Fixing" it just adds a blank line below it without removing the error. This is pretty much #1835.

The reason why I mention code validity is because everything performs as expected if I change the text to a string literal {'Clear'} or wrap it in some sort of React component / fragment <>Clear</>. I've never seen code written that way without good reason, like a conditional text, so unless I'm mistaken, I don't think I need to wrap it in the aforementioned ways... but again, could be my inexperience.

I've isolated it to the following rules, but I think they're part of the same package, so I'm not sure why they produce an error when together. Matching eslint tab rules to the eslint-plugin-react rules doesn't change my error.

Using the AirBnB defaults with these rules and the following versions:

        "no-tabs": 0,
        "react/jsx-indent": [1, "tab"],
        "react/jsx-indent-props": [1, "tab"],
  "devDependencies": {
    "eslint": "^5.12.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-react": "^7.12.4"
  }
bug help wanted

Most helpful comment

I found a problem: It is because of tab indention for closed tag
Here is example of test cases.

UPDATE

Here is PR (#2198)

All 5 comments

See #1855.

I did see those threads so I somewhat get the gist of what's happening. On further inspection I think this is actually related to the indenting style of spaces vs tabs:

"react/jsx-indent": [1, "tab"],
"react/jsx-indent-props": [1, "tab"],

screen shot 2019-02-04 at 12 56 22 pm

vs without (after converting tabs to spaces):

screen shot 2019-02-04 at 2 20 30 pm

Regardless of intent, it seems like a bug that it reports the jsx-one-expression-per-line only along with tab enforcement over spaces - not sure if any other issues cover this, so apologies if this is a duplicate.

I found a problem: It is because of tab indention for closed tag
Here is example of test cases.

UPDATE

Here is PR (#2198)

@ljharb

Could you please make some forecasts about next release (7.12.5?) where this issue would be resolved?
Last patch (7.12.4) was 2 months ago.

@Ohar Thanks for fixing this. I ran into this same problem yesterday and was scratching my head about what was going wrong.

Likewise I feel it'd be great if it were possible to release a new version including this fix (though of course I understand the maintainers are no doubt very busy).

Was this page helpful?
0 / 5 - 0 ratings