react/jsx-sort-props breaks the code
See original GitHub issueTell us about your environment
"babel-eslint": "^9.0.0",
"eslint": "5.6.0",
"eslint-plugin-react": "^7.11.1"
- ESLint Version: 9.0.0
- Node Version: 10.6.0
- npm Version: -
- yarn Version: 1.9.4
What parser (default, Babel-ESLint, etc.) are you using? Babel-ESLint
Please show your full configuration: I created a repo to reproduce the bug: https://github.com/davesnx/eslint-bug-react-sort-props
Configuration
module.exports = {
parser: 'babel-eslint',
plugins: ['react'],
rules: {
'react/jsx-sort-props': 1
}
}
What did you do? Please include the actual source code causing the issue, as well as the command that you used to run ESLint.
import React, { Component } from 'react'
import PropTypes from 'prop-types'
const PictureChoice = () => {
return (
<List
className={className}
onStageAnswer={onStageAnswer}
onCommitAnswer={onCommitAnswer}
isFocused={isFocused}
direction={direction}
allowMultipleSelection={allowMultipleSelection}
measureLongestChildNode={measureLongestChildNode}
layoutItemsSize={layoutItemsSize}
handleAppScroll={handleAppScroll}
isActive={isActive}
resetSelection={resetSelection}
onKeyboardChoiceHovered={onKeyboardChoiceHovered}
keyboardShortcutType
/>
)
}
export default PictureChoice
npx eslint . --fix
What did you expect to happen? So theorically the rule should re-order my props, in the worst case scenario, not sort them. But actually is breaking them. It’s a weird output:
import React, { Component } from 'react'
import PropTypes from 'prop-types'
const PictureChoice = () => {
return (
<List
allowMultipleSelection={allowMultipleSelection}
className={className}
direction={direction}
isFocused=handleAppScroll={handleAppScroll}ection=isActive={isActive}owMultiplisFocused={isFocused}ardShortcutType
layoutItemsSize={layoutItemsSl
layoutItemsSize={layoutItemsSize}
handleAppScroll={handleAppScroll}
isActive={isActive}
resetSelection={resetSelection}
onKeyboardChoiceHovered={onKeyboardChoiceHovered}
keyboardShortcutType
/>
)
}
export default PictureChoice
Issue Analytics
- State:
- Created 5 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
eslint-plugin-react/jsx-sort-props.md at master - GitHub
This rule checks all JSX components and verifies that all props are sorted alphabetically. A spread attribute resets the verification. The default configuration ......
Read more >Invalid configuration for rule "react/jsx-sort-props"
There are two issues: The severity option, if you're using a number, should be a number, not a string that contains a number...
Read more >Eslint Plugin React v7.29.0 Release - GitClear
React -specific linting rules for ESLint ... Eslint Plugin React: v7.29.0 Release ... [Refactor] `jsx-sort-default-props`: remove unnecessary code.
Read more >eslint-plugin-react - npm
Start using eslint-plugin-react in your project by running `npm i ... react/jsx-sort-props, Enforce props alphabetical sorting.
Read more >eslint-plugin-react/README.md - UNPKG
The CDN for eslint-plugin-react. ... 219, | | | [react/jsx-sort-default-props](docs/rules/jsx-sort-default-props.md) | Enforce default props alphabetical ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
This looks like a bug in eslint plugin, not a bug in the eslint itself. Closing.
@davesnx Thanks!
It’s highly unlikely this is a core ESLint issue. Basically one of two things is happening:
I think it makes the most sense to start with eslint-plugin-react so they can see if the rule is incorrect, and then they might redirect you to babel-eslint if the parser ends up being the issue. Or, who knows, maybe there is a core issue after all 😄 But I think eslint-plugin-react should look at the rule first.