Discussion: errors from new rules when updating eslint-config-airbnb to v19 #2217
Description
Increasing Access
It's good to keep all of our dependencies updated to their latest versions.
Feature enhancement details
We us the eslint-config-airbnb package to define a lot of our code style rules. We are currently on version 16.1.0. I would like to update this to the latest version 19.0.4. This update changes a lot of rules and introduces LOTS of linting errors into the codebase:
✖ 1321 problems (1320 errors, 1 warning)
273 errors and 0 warnings potentially fixable with the--fixoption.
For each rule, we have 3 options:
- If we don't like the rule: Override the rule in our
.eslintrcconfig to allow the current code. - If we do like the rule: Keep the rule and fix the code (sometimes possible with
lint-fixcommand). - If we do like the rule, but don't want to deal with right away: Adjust the rule in our
.eslintrcto downgrade errors to warnings.
My plan right now is to update the package but add exemptions for all of the rules (option 1).
I don't like to change to much in a single PR so my plan is to address desirable rules (option 2) individually. For example I think that no-useless-catch is a good rule which we should use so I put in PR #2212 to fix the code.
Here are examples of all of the new errors:
| Message | Rule |
|---|---|
| Default parameters should be last | default-param-last |
| Dependency cycle detected | import/no-cycle |
| Cannot use import declarations in modules that export using CommonJS (module.exports = 'foo' or exports.bar = 'hi') | import/no-import-module-exports |
| Useless path segments for "../../IDE/actions/console", should be "../actions/console" | import/no-useless-path-segments |
| A control must be associated with a text label | jsx-a11y/control-has-associated-label |
| A form label must be associated with a control | jsx-a11y/label-has-associated-control |
| Expected blank line between class members | lines-between-class-members |
| File has too many classes (2). Maximum allowed is 1 | max-classes-per-file |
| Unnecessary 'else' after 'return' | no-else-return |
| The members of 'FileActions' are read-only | no-import-assign |
| Return values from promise executor functions cannot be read | no-promise-executor-return |
| 'default' is restricted from being used as an exported name | no-restricted-exports |
| Unnecessary try/catch wrapper | no-useless-catch |
Use an object spread instead of Object.assign eg: { ...foo } |
prefer-object-spread |
| Missing an explicit type attribute for button | react/button-has-type |
| Must use destructuring state assignment | react/destructuring-assignment |
| Must use destructuring props assignment | react/destructuring-assignment |
| Function component is not a function declaration | react/function-component-definition |
| Unexpected newline before '}' | react/jsx-curly-newline |
| Prefer fragment shorthand over React.Fragment | react/jsx-fragments |
| JSX props should not use functions | react/jsx-no-bind |
| Fragments should contain more than one child - otherwise, there’s no need for a Fragment at all | react/jsx-no-useless-fragment |
+ must be placed on a new line |
react/jsx-one-expression-per-line |
| Prop spreading is forbidden | react/jsx-props-no-spreading |
| Missing parentheses around multilines JSX | react/jsx-wrap-multilines |
| Use callback in setState when referencing the previous state | react/no-access-state-in-setstate |
| componentWillReceiveProps is deprecated since React 16.9.0, use UNSAFE_componentWillReceiveProps instead, see https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops. Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components | react/no-deprecated |
| componentWillMount is deprecated since React 16.9.0, use UNSAFE_componentWillMount instead, see https://reactjs.org/docs/react-component.html#unsafe_componentwillmount. Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components | react/no-deprecated |
| Unused method or property "node" of class "NavBasic" | react/no-unused-class-component-methods |
| autosaveInterval should be placed before componentDidUpdate | react/sort-comp |
| 'defaultProps' should be declared outside the class body | react/static-property-placement |