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.

Sign up for GitHub

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

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintrc.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ module.exports = defineConfig({
'plugin:@typescript-eslint/recommended',
'plugin:regexp/recommended',
],
ignorePatterns: ['packages/create-vite/template-**'],
plugins: ['import', 'regexp'],
parser: '@typescript-eslint/parser',
parserOptions: {
Expand Down
14 changes: 14 additions & 0 deletions packages/create-vite/template-react-ts/.eslintrc.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
module.exports = {
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
parser: '@typescript-eslint/parser',
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': 'warn',
},
}
6 changes: 6 additions & 0 deletions packages/create-vite/template-react-ts/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
Expand All @@ -15,7 +16,12 @@
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@typescript-eslint/eslint-plugin": "^5.57.1",
"@typescript-eslint/parser": "^5.57.1",
"@vitejs/plugin-react": "^4.0.0-beta.0",
"eslint": "^8.38.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
"typescript": "^5.0.2",
"vite": "^4.3.0-beta.2"
}
Expand Down
15 changes: 15 additions & 0 deletions packages/create-vite/template-react/.eslintrc.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
module.exports = {
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
Copy link

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.

plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': 'warn',
},
}
5 changes: 5 additions & 0 deletions packages/create-vite/template-react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
Expand All @@ -16,6 +17,10 @@
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^4.0.0-beta.0",
"eslint": "^8.38.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
"vite": "^4.3.0-beta.2"
}
}