-
Notifications
You must be signed in to change notification settings - Fork 0
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
Support Eslint 7 & add rules #15
Conversation
rules/flow.js
Outdated
'flowtype/no-mixed': 'off', | ||
'flowtype/no-dupe-keys': 'error', | ||
// TODO: enable? | ||
'flowtype/no-existential-type': 'off', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think can be enabled since *
is deprecated. But I guess we would have to change *
to any
.
'flowtype/no-flow-fix-me-comments': 'off', | ||
'flowtype/no-mixed': 'off', | ||
// TODO: enable? | ||
'flowtype/no-mutable-array': 'off', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure if it forces us to only use $ReadOnlyArray
and totally disallow []
or Array
though. Because in our codebase, I remember we do mutate some stuff for performance purposes.
https://github.com/gajus/eslint-plugin-flowtype/blob/master/.README/rules/no-mutable-array.md
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We have this
Note that initialization of a variable with an empty array is considered valid (e.g., const values: Array = [];). This behavior resembles the behavior of Flow's unsealed objects, as it is assumed that empty array is intended to be mutated.
And also we will still be able to do perf optimisations using // eslint-disable-next-line
it will emphasis the alert on the mutation
'flowtype/no-primitive-constructor-types': 'error', | ||
'flowtype/no-types-missing-file-annotation': 'error', | ||
'flowtype/no-unused-expressions': 'error', | ||
// TODO: disable any? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
flowtype/no-weak-types
: I think we can keep any
for now, else they might be too many changes.
rules/flow.js
Outdated
'flowtype/require-return-type': 'off', | ||
'flowtype/require-types-at-top': 'error', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This might lead to quite a number of changes, need to test it out. Some of our files have this kind of pattern, which we could either move to different files else the types would be difficult to see.
Type A
Function A
Type B
Function B
https://github.com/gajus/eslint-plugin-flowtype/blob/master/.README/rules/require-types-at-top.md
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, would lead to lot of changes but this has autofix I think
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, I think so too. But some files might need to reorganise, should be a few I guess.
'flowtype/space-after-type-colon': ['error', 'always'], | ||
'flowtype/space-before-generic-bracket': ['error', 'never'], | ||
'flowtype/space-before-type-colon': ['error', 'never'], | ||
// TODO: enable? | ||
'flowtype/spread-exact-type': 'off', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it's because spreading non-exact type is not safe and not properly supported by flow
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Might be possible to enable 🤔
rules/flow.js
Outdated
'flowtype/type-id-match': 'off', | ||
// Use identifier as declaration imports are not well supported by vscode | ||
'flowtype/type-import-style': ['error', 'identifier'], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Prefer this to be off. As at times, there is not a need to have identifier
style when importing types from a type file. Less verbose too.
https://github.com/gajus/eslint-plugin-flowtype/blob/master/.README/rules/type-import-style.md
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What about forcing declaration
style? It might help separating type from non type 🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sure, we can force declaration
style. Would prefer that to identifier
style if you want to enforce one of them.
rules/imports.js
Outdated
'alphabetize': { | ||
'order': 'asc', | ||
'caseInsensitive': true, | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
❤️ 😂 🙏 . Though I'm not sure how it will work out with aliasing 🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's see 😄
@@ -195,33 +204,32 @@ module.exports = { | |||
// Prevent unassigned imports | |||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-unassigned-import.md | |||
// importing for side effects is perfectly acceptable, if you need side effects. | |||
'import/no-unassigned-import': 'off', | |||
'import/no-unassigned-import': 'error', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure will it affect index
files that just imports and do nothing.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We will have to use eslint-disable
but these files are bad because using side-effects. Best is to remove them as much as we can
'import/exports-last': 'error', | ||
|
||
// Reports when named exports are not grouped together in a single export declaration | ||
// or when multiple assignments to CommonJS module.exports or exports object are present | ||
// in a single file. | ||
// https://github.com/benmosher/eslint-plugin-import/blob/44a038c06487964394b1e15b64f3bd34e5d40cde/docs/rules/group-exports.md | ||
'import/group-exports': 'off', | ||
'import/group-exports': 'error', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is it when these two rules import/exports-last
and import/group-exports
are enabled together, we wouldn't have that much changes in terms of lines movement in our files?
Cause I'm not sure about import/exports-last
as we do have this kind of patterns which will be flagged. And I guess is okay to have exports
in the middle as sometimes we only export what we need to.
const bool = true
export default bool
const str = 'foo'
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah but it's easier when navigating. If you need to add export a function then it will be grouped in last statement like
const a = ...
function b() {}
export { a, b };
rules/react.js
Outdated
// Enforce a specific function type for function components. | ||
// https://github.com/yannickcr/eslint-plugin-react/blob/v7.20.0/docs/rules/function-component-definition.md | ||
'react/function-component-definition': ['error', { | ||
namedComponents: 'function-declaration', | ||
unnamedComponents: 'function-declaration', | ||
}], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure about this. I prefer to write this way inside a function component, and this would probably prevent it 🤔
var Component = (props) => {
return <div />;
};
Also, unnamedComponents
should be function-expression
instead. There is no function-declaration
for it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This was mainly related to https://twitter.com/dan_abramov/status/1255229440860262400?s=09
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hmmms, true 🤔 But means inside class, we would also have to not use arrows then. We can try it out and see how many changes etc.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No it's just on functions, class arrow functions will be good
@@ -494,7 +499,7 @@ module.exports = { | |||
|
|||
// Enforce that props are read-only | |||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-read-only-props.md | |||
'react/prefer-read-only-props': 'off', | |||
'react/prefer-read-only-props': 'error', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This might lead to a lot of changes but I think is most likely simple fixes. Not sure if it would be too verbose though. 🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think I'll enable them one-by-one to have separated commits
@moroine I guess we probably need to test them out to further understand what will be the changes needed. I commented on the ones that I think might have issues with. If |
@limtingzhi I agree, I'll tests theses changes one-by-one in order to test them out
Yeah I think we can remove them |
@@ -3,32 +3,34 @@ | |||
## Changes | |||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Missing breaking changes eslint
to ^7.10.0
.
CHANGELOG.md
Outdated
- **[Breaking]**: minimum supported NodeJs version 12.18 | ||
- upgrade `babel-eslint` to `^10.1.0` | ||
- upgrade `eslint-plugin-eslint-comments` to `^3.2.0` | ||
- upgrade `eslint-plugin-import` to `^2.22.0` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
eslint-plugin-import
is suppose to be ^2.22.1
and not ^2.22.0
.
CHANGELOG.md
Outdated
- upgrade `eslint-plugin-import` to `^2.22.0` | ||
- upgrade `eslint-plugin-jsx-a11y` to `^6.3.1` | ||
- upgrade `eslint-plugin-react` to `^7.21.2` | ||
- upgrade `eslint-plugin-react-hooks` to `^4.1.2` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
eslint-plugin-react-hooks
is written above as breaking changes. Could you remove this one and update the breaking changes to ^4.1.2
?
rules/imports.js
Outdated
@@ -146,8 +145,18 @@ module.exports = { | |||
// TODO: enforce a stricter convention in module import order? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we need to remove this TODO?
This PR
is WIP, plugins not supporting yet eslint 7:eslint-plugin-jsx-a11y: PR openedeslint-plugin-import: Waiting releaseI've also added lot of rules, idk if they're all needed or if they will lead to too much changes! I haven't tried them yet, let's review them together here.
Related PR: