From 2ad78aa205563f87b1607d0789608c13695cd9da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arnaud=20Barr=C3=A9?= Date: Mon, 17 Jul 2023 15:25:01 +0200 Subject: [PATCH] fix(create-vite): fix eslint configuration for React templates (#13749) --- .../template-react-ts/.eslintrc.cjs | 11 +------- .../create-vite/template-react-ts/README.md | 27 +++++++++++++++++++ .../template-react-ts/package.json | 6 ++--- .../create-vite/template-react/.eslintrc.cjs | 4 +-- packages/create-vite/template-react/README.md | 8 ++++++ .../create-vite/template-react/package.json | 2 +- 6 files changed, 42 insertions(+), 16 deletions(-) create mode 100644 packages/create-vite/template-react-ts/README.md create mode 100644 packages/create-vite/template-react/README.md diff --git a/packages/create-vite/template-react-ts/.eslintrc.cjs b/packages/create-vite/template-react-ts/.eslintrc.cjs index 1dc7153b3ad796..d6c953795300e4 100644 --- a/packages/create-vite/template-react-ts/.eslintrc.cjs +++ b/packages/create-vite/template-react-ts/.eslintrc.cjs @@ -1,27 +1,18 @@ -/* eslint-env node */ - module.exports = { root: true, env: { browser: true, es2020: true }, extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', - 'plugin:@typescript-eslint/recommended-requiring-type-checking', 'plugin:react-hooks/recommended', ], + ignorePatterns: ['dist', '.eslintrc.cjs'], parser: '@typescript-eslint/parser', - parserOptions: { - ecmaVersion: 'latest', - sourceType: 'module', - project: true, - tsconfigRootDir: __dirname, - }, plugins: ['react-refresh'], rules: { 'react-refresh/only-export-components': [ 'warn', { allowConstantExport: true }, ], - '@typescript-eslint/no-non-null-assertion': 'off', }, } diff --git a/packages/create-vite/template-react-ts/README.md b/packages/create-vite/template-react-ts/README.md new file mode 100644 index 00000000000000..1ebe379f5f423c --- /dev/null +++ b/packages/create-vite/template-react-ts/README.md @@ -0,0 +1,27 @@ +# React + TypeScript + Vite + +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. + +Currently, two official plugins are available: + +- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh + +## Expanding the ESLint configuration + +If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: + +- Configure the top-level `parserOptions` property like this: + +```js + parserOptions: { + ecmaVersion: 'latest', + sourceType: 'module', + project: ['./tsconfig.json', './tsconfig.node.json'], + tsconfigRootDir: __dirname, + }, +``` + +- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` +- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` +- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list diff --git a/packages/create-vite/template-react-ts/package.json b/packages/create-vite/template-react-ts/package.json index 877f31c58b0cc1..f0dfe6b829671e 100644 --- a/packages/create-vite/template-react-ts/package.json +++ b/packages/create-vite/template-react-ts/package.json @@ -6,7 +6,7 @@ "scripts": { "dev": "vite", "build": "tsc && vite build", - "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0", + "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": { @@ -16,8 +16,8 @@ "devDependencies": { "@types/react": "^18.2.15", "@types/react-dom": "^18.2.7", - "@typescript-eslint/eslint-plugin": "^5.62.0", - "@typescript-eslint/parser": "^5.62.0", + "@typescript-eslint/eslint-plugin": "^6.0.0", + "@typescript-eslint/parser": "^6.0.0", "@vitejs/plugin-react": "^4.0.3", "eslint": "^8.45.0", "eslint-plugin-react-hooks": "^4.6.0", diff --git a/packages/create-vite/template-react/.eslintrc.cjs b/packages/create-vite/template-react/.eslintrc.cjs index ee71034ece0476..4dcb43901a687f 100644 --- a/packages/create-vite/template-react/.eslintrc.cjs +++ b/packages/create-vite/template-react/.eslintrc.cjs @@ -1,6 +1,5 @@ -/* eslint-env node */ - module.exports = { + root: true, env: { browser: true, es2020: true }, extends: [ 'eslint:recommended', @@ -8,6 +7,7 @@ module.exports = { 'plugin:react/jsx-runtime', 'plugin:react-hooks/recommended', ], + ignorePatterns: ['dist', '.eslintrc.cjs'], parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, settings: { react: { version: '18.2' } }, plugins: ['react-refresh'], diff --git a/packages/create-vite/template-react/README.md b/packages/create-vite/template-react/README.md new file mode 100644 index 00000000000000..f768e33fc946e6 --- /dev/null +++ b/packages/create-vite/template-react/README.md @@ -0,0 +1,8 @@ +# React + Vite + +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. + +Currently, two official plugins are available: + +- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh diff --git a/packages/create-vite/template-react/package.json b/packages/create-vite/template-react/package.json index 2308cdf87d123b..4b007bccb344b4 100644 --- a/packages/create-vite/template-react/package.json +++ b/packages/create-vite/template-react/package.json @@ -6,7 +6,7 @@ "scripts": { "dev": "vite", "build": "vite build", - "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0", + "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": {