Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

jsx-one-expression-per-line doesn't work with plain text #2152

Closed
chocolatemelt opened this issue Feb 4, 2019 · 5 comments
Closed

jsx-one-expression-per-line doesn't work with plain text #2152

chocolatemelt opened this issue Feb 4, 2019 · 5 comments

Comments

@chocolatemelt
Copy link

chocolatemelt commented Feb 4, 2019

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 jsx-one-expression-per-line with CRLF on Windows #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 jsx-one-expression-per-line fix option inserts blank lines #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"
  }
@ljharb
Copy link
Member

ljharb commented Feb 4, 2019

See #1855.

@chocolatemelt
Copy link
Author

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.

@Ohar
Copy link

Ohar commented Mar 13, 2019

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

UPDATE

Here is PR (#2198)

@Ohar
Copy link

Ohar commented Mar 21, 2019

@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.

@overlookmotel
Copy link

@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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

No branches or pull requests

4 participants