Skip to content
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

feat(create-vite): add eslint to React templates #12801

Merged
merged 1 commit into from
Apr 20, 2023
Merged

Conversation

ArnaudBarre
Copy link
Member

No description provided.

@ArnaudBarre ArnaudBarre self-assigned this Apr 9, 2023
@stackblitz
Copy link

stackblitz bot commented Apr 9, 2023

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@patak-dev
Copy link
Member

@cyco130 @nickmccurdy maybe you could help us with a review here

@nickmccurdy
Copy link
Contributor

@patak-dev I can, but I'm curious, has the Vite team's stance on lint configs changed? I thought they wouldn't be merged, or I would have suggested some myself.

@patak-dev
Copy link
Member

@nickmccurdy we discussed with the team after the discussion between you, Dan Abramov, and others, and we believe that for the particular case of React, Dan is correct, we need to include at least 'plugin:react-hooks/recommended'. The rest of the PR is the bare minimum for a React eslint setup + @ArnaudBarre's https://github.com/ArnaudBarre/eslint-plugin-react-refresh (at least to me, it seems like a good idea to add it too as we had many users hitting the issues this plugin helps to spot).

We would prefer to avoid adding eslint to the templates (and we don't have plans to add them to other frameworks), but for React, it seems we should do this.

@smeng9
Copy link
Contributor

smeng9 commented Apr 13, 2023

Have we considered using the new eslint config file https://eslint.org/docs/latest/use/configure/configuration-files-new or is it not mature enough?

@ArnaudBarre
Copy link
Member Author

I've tried it but and it look nicer but the init command still generates the old output, and the total absence of types was really painful to migrate manually, after hitting three runtime errors when updating the config I gave up. But I'm open to contribution for that.

@patak-dev patak-dev merged commit d84460a into main Apr 20, 2023
@patak-dev patak-dev deleted the react-template-eslint branch April 20, 2023 07:56
'plugin:react-hooks/recommended',
],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could use "detect" as version value and never change this line again in your lifetime

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Personally I think the complexity of resolutions involved in web dev is higher than the chance of a rule targeting a version of React not yet released.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ArnaudBarre i think this is more about if you update the installed react version to 19, it would still apply '18.2' settings unless you remember to update this version string too, which renovate-bot et al won't do for you.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I know but if it get out of sync this is probably not an issue. You will maybe after sometimes "miss" some lint rules that advice for new APIs (if they exist and if someone make a rule for that).
This is why this not an issue for me and using "detect" IMO will cause more issue because of the overall complexity to be able to resolve "react" given the varierty of runtimes and package manager available

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

from what I understood, eslint was added here because it is considered essential for react templates, to the point that it would be broken without it? Honestly I disagree with that view and would have preferred that all create-vite templates stayed the same minimal "show it works" style.

But if this is truly needed, using the settings for the correct react version is essential too and they need to take care of resolving it correctly in the eslint plugin.
The alternative would be to disable renovate updates for react and additional maintenace burden to update both manually. Oh, and you'd have to pin the react version in package.json.

@ThePiyushAggarwal
Copy link

ThePiyushAggarwal commented May 13, 2023

Thank you for adding eslint! I just can't configure on my own. There's just too many opinions out there.

Does anyone know a quick way to add this to old projects. I have to copy the packages and .eslintrc.cjs file to my repo. I am doing it this way.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

7 participants