Eslint-plugin-react: react/jsx-sort-props not working

Created on 24 Jul 2017  路  5Comments  路  Source: yannickcr/eslint-plugin-react

I seem to be having trouble getting this rule to work. The documentation references the following interface:

"react/jsx-sort-props": [<enabled>, {
  "callbacksLast": <boolean>,
  "shorthandFirst": <boolean>,
  "shorthandLast": <boolean>,
  "ignoreCase": <boolean>,
  "noSortAlphabetically": <boolean>,
  "reservedFirst": <boolean>|<array<string>>,
}]

My current configuration is "react/jsx-sort-props": [2]. I have omitted the options which seem to work fine for other rules in the library. Don't get any errors for the following component:

<Component c="c" b="b" a="a" />
bug help wanted

Most helpful comment

I just run into this issue too. I think that when reservedFirst is enabled and noSortAlphabetically is off, then the alphabetical order is only enforced within the reserved props.

Adding a test case like this shows the issue:

{
  code: '<App key={2} b a />',
  options: reservedFirstAsBooleanArgs,
  errors: [expectedError]
}

I don't know if the expected behavior is that sorting is only enforced within the reserved props, but I would expect the alphabetical order to also be enforced in the other props.

I think I have a fix for this, so I'm gonna submit a PR with it. If this fix is not desired and current behavior is the desired, I apologize for all this noise.

All 5 comments

There must be something else going on - the test cases (https://github.com/yannickcr/eslint-plugin-react/blob/master/tests/lib/rules/jsx-sort-props.js#L106, https://github.com/yannickcr/eslint-plugin-react/blob/master/tests/lib/rules/jsx-sort-props.js#L162) seem pretty solid.

Can you provide a full repro case, not just with options omitted?

https://github.com/tobyf93/jsx-sort-props-issue

npm run lint will give you an error about boolean attributes but not prop order...

same result for:

"react/jsx-sort-props": [2, {
  "callbacksLast": false,
  "shorthandFirst": false,
  "shorthandLast": false,
  "ignoreCase": false,
  "noSortAlphabetically": false,
  "reservedFirst": true
}]

I just run into this issue too. I think that when reservedFirst is enabled and noSortAlphabetically is off, then the alphabetical order is only enforced within the reserved props.

Adding a test case like this shows the issue:

{
  code: '<App key={2} b a />',
  options: reservedFirstAsBooleanArgs,
  errors: [expectedError]
}

I don't know if the expected behavior is that sorting is only enforced within the reserved props, but I would expect the alphabetical order to also be enforced in the other props.

I think I have a fix for this, so I'm gonna submit a PR with it. If this fix is not desired and current behavior is the desired, I apologize for all this noise.

Still not working any working fix?

Was this page helpful?
0 / 5 - 0 ratings