-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
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
[New] function-component-definition
: replace var
by const
in certain situations
#3248
Conversation
…rtain situations Signed-off-by: Xavier Le Cunff <[email protected]> Co-authored-by: Xavier Le Cunff <[email protected]> Co-authored-by: Simeon Cheeseman <[email protected]>
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.
var is still quite used.
The linked issue specifically says:
In only those cases, should it autofix to const. In any other case, it must autofix to var, otherwise it’s a breaking change. |
Thank you for the review and your time, I agree with you about using jsx. |
We could add a visitor for const/let declarations/jsx elements, and save a state flag; and then on program exit, we could do the autofixes as either var or const depending. |
Unfortunately I have not enough skills for implementing this :( Should I close this PR? |
I’m suggesting the rule add visitors for const, let, and jsx nodes - then eslint finds them for us. |
As a different option - could we add a config option to use @JohnBerd I've just done something similar in another project so I'll give you a code snippet here. (I could make another PR if you'd rather I take it over?) Replace this; return {
FunctionDeclaration(node) { validate(node, 'function-declaration'); },
ArrowFunctionExpression(node) { validate(node, 'arrow-function'); },
FunctionExpression(node) { validate(node, 'function-expression'); },
}; with something like this; const validatePairs = [];
let hasEs6OrJsx = false;
return {
FunctionDeclaration(node) { validatePairs.push([node, 'function-declaration']); },
ArrowFunctionExpression(node) { validatePairs.push([node, 'arrow-function']); },
FunctionExpression(node) { validatePairs.push([node, 'function-expression']); },
VariableDeclaration(node) {
hasEs6OrJsx = hasEs6OrJsx || node.kind === "const" || node.kind === "let"
},
JSXElement(node) {
hasEs6OrJsx = true;
},
'Program:exit'() {
validatePairs.forEach(pair => validate(pair[0], pair[1], hasEs6OrJsx));
}
}; |
Thank you so much @SimeonC I would be pleased If you can create another PR for this. |
OK, I'll create a branch with the suggested changes and link it here tomorrow.
This will be my first time contributing to an eslint plugin so I'm a bit ignorant of any conventions. What's the reasoning for this restriction? |
Rule options that do nothing by default (since autofixing isn’t the default) are confusing. |
@ljharb I've implemented the changes on the master branch of my fork here - https://github.com/SimeonC/eslint-plugin-react/tree/master, could you pull the changes into this branch and let me know if there are any other changes needed. I also updated the tests and prevented the fixer from changing existing var/let/const declarations if they already exist. |
Codecov Report
@@ Coverage Diff @@
## master #3248 +/- ##
==========================================
- Coverage 97.69% 97.68% -0.01%
==========================================
Files 122 121 -1
Lines 8634 8610 -24
Branches 3135 3130 -5
==========================================
- Hits 8435 8411 -24
Misses 199 199
Continue to review full report at Codecov.
|
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.
Looks pretty good - can we include some tests for a var
going to a const
?
In particular, can we include tests covering these scenarios:
- a
var
, assigned to somewhere in the same block, to confirm it's changed to alet
- a
let
arrow function, assigned to somewhere in the same block, to confirm it's not changed to aconst
- a
var
, that's assigned to outside the block in which it's declared but inside the same function as it's declared, to confirm it's not change from avar
I added some test cases for eslint-plugin-react/lib/rules/function-component-definition.js Lines 164 to 166 in c593379
|
That seems like a good strategy - I just want some tests to guarantee it :-) |
Thanks for the review notes - I've added another commit to fix up the issues SimeonC@edccc0f (Also realised I hadn't checked eslint either so there's a bunch of formatter fixes in that commit as well) |
function-component-definition
: replace var
by const
in certain situations
function-component-definition
: replace var
by const
in certain situationsfunction-component-definition
: replace var
by const
in certain situations
Thank you for your amazing job, this rule is almost perfect but something is missing to me.
var
is almost not used since ES6 was introduced and I am not able to find any React documentation showing a functional component usingvar
instead of const.fix #3152