diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md index a4073a24b31..6da2ad174e0 100644 --- a/docusaurus/docs/advanced-configuration.md +++ b/docusaurus/docs/advanced-configuration.md @@ -24,6 +24,5 @@ You can adjust various development and production settings by setting environmen | GENERATE_SOURCEMAP | 🚫 Ignored | ✅ Used | When set to `false`, source maps are not generated for a production build. This solves out of memory (OOM) issues on some smaller machines. | | INLINE_RUNTIME_CHUNK | 🚫 Ignored | ✅ Used | By default, Create React App will embed the runtime script into `index.html` during the production build. When set to `false`, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP. | | IMAGE_INLINE_SIZE_LIMIT | 🚫 Ignored | ✅ Used | By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to 0 will disable the inlining of images. | -| EXTEND_ESLINT | ✅ Used | ✅ Used | When set to `true`, user provided ESLint configs will be used by `eslint-loader`. Note that any rules set to `"error"` will stop the application from building. | | FAST_REFRESH | ✅ Used | 🚫 Ignored | When set to `false`, disables experimental support for Fast Refresh to allow you to tweak your components in real time without reloading the page. | | TSC_COMPILE_ON_ERROR | ✅ Used | ✅ Used | When set to `true`, you can run and properly build TypeScript projects even if there are TypeScript type check errors. These errors are printed as warnings in the terminal and/or browser console. | diff --git a/docusaurus/docs/setting-up-your-editor.md b/docusaurus/docs/setting-up-your-editor.md index 35f3ea31ae5..4aaedad9d4c 100644 --- a/docusaurus/docs/setting-up-your-editor.md +++ b/docusaurus/docs/setting-up-your-editor.md @@ -26,16 +26,15 @@ Note that even if you customise your ESLint config, these changes will **only af If you want to enforce a coding style for your project, consider using [Prettier](https://github.com/jlongster/prettier) instead of ESLint style rules. -### Experimental: Extending the ESLint config +### Extending or replacing the default ESLint config -We recognise that in some cases, further customisation is required. It is now possible to extend the base ESLint config by setting the `EXTEND_ESLINT` environment variable to `true`. See [advanced configuration](advanced-configuration.md) for more information on available environment variables. - -Note that any rules set to `"error"` will stop the project from building. +You can extend our base ESLint config, or replace it completely if you need. There are a few things to remember: 1. We highly recommend extending the base config, as removing it could introduce hard-to-find issues. 1. When working with TypeScript, you'll need to provide an `overrides` object for rules that should _only_ target TypeScript files. +1. It's important to note that any rules that are set to `"error"` will stop the project from building. In the below example: diff --git a/packages/cra-template-typescript/template.json b/packages/cra-template-typescript/template.json index 8d590a3af21..675bee92d5f 100644 --- a/packages/cra-template-typescript/template.json +++ b/packages/cra-template-typescript/template.json @@ -10,6 +10,9 @@ "@types/jest": "^26.0.0", "typescript": "^3.9.5", "web-vitals": "^0.2.2" + }, + "eslintConfig": { + "extends": ["react-app", "react-app/jest"] } } } diff --git a/packages/cra-template/template.json b/packages/cra-template/template.json index 130ce707359..d425109ca8b 100644 --- a/packages/cra-template/template.json +++ b/packages/cra-template/template.json @@ -5,6 +5,9 @@ "@testing-library/react": "^10.4.3", "@testing-library/user-event": "^12.0.11", "web-vitals": "^0.2.2" + }, + "eslintConfig": { + "extends": ["react-app", "react-app/jest"] } } } diff --git a/packages/eslint-config-react-app/README.md b/packages/eslint-config-react-app/README.md index fc89c216e25..90330a0a879 100644 --- a/packages/eslint-config-react-app/README.md +++ b/packages/eslint-config-react-app/README.md @@ -32,6 +32,24 @@ Then create a file named `.eslintrc.json` with following contents in the root fo That's it! You can override the settings from `eslint-config-react-app` by editing the `.eslintrc.json` file. Learn more about [configuring ESLint](http://eslint.org/docs/user-guide/configuring) on the ESLint website. +## Jest rules + +This config also ships with optional Jest rules for ESLint (based on [`eslint-plugin-jest`](https://github.com/jest-community/eslint-plugin-jest)). + +You'll first need to add the plugin. + +```sh +npm install --save-dev eslint-plugin-jest@24.x +``` + +You can then enable these rules by adding the Jest config to the `extends` array in your ESLint config. + +```json +{ + "extends": ["react-app", "react-app/jest"] +} +``` + ## Accessibility Checks The following rules from the [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) plugin are activated: diff --git a/packages/eslint-config-react-app/index.js b/packages/eslint-config-react-app/index.js index c41432de112..36538fb736f 100644 --- a/packages/eslint-config-react-app/index.js +++ b/packages/eslint-config-react-app/index.js @@ -10,8 +10,8 @@ // Inspired by https://github.com/airbnb/javascript but less opinionated. // We use eslint-loader so even warnings are very visible. -// This is why we only use "WARNING" level for potential errors, -// and we don't use "ERROR" level at all. +// This is why we prefer to use "WARNING" level for potential errors, +// and we try not to use "ERROR" level at all. // In the future, we might create a separate list of rules for production. // It would probably be more strict. diff --git a/packages/eslint-config-react-app/jest.js b/packages/eslint-config-react-app/jest.js new file mode 100644 index 00000000000..43ab8dc51cb --- /dev/null +++ b/packages/eslint-config-react-app/jest.js @@ -0,0 +1,33 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +'use strict'; + +// We use eslint-loader so even warnings are very visible. +// This is why we prefer to use "WARNING" level for potential errors, +// and we try not to use "ERROR" level at all. + +module.exports = { + plugins: ['jest'], + overrides: [ + { + files: ['**/__tests__/**/*', '**/*.{spec,test}.*'], + env: { + 'jest/globals': true, + }, + // A subset of the recommended rules: + // https://github.com/jest-community/eslint-plugin-jest#rules + rules: { + 'jest/expect-expect': 'warn', + 'jest/no-identical-title': 'warn', + 'jest/valid-describe': 'warn', + 'jest/valid-expect': 'warn', + 'jest/valid-expect-in-promise': 'warn', + }, + }, + ], +}; diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index 573fece08be..3ae20c59080 100644 --- a/packages/eslint-config-react-app/package.json +++ b/packages/eslint-config-react-app/package.json @@ -21,6 +21,7 @@ "eslint": "^7.0.0", "eslint-plugin-flowtype": "^5.2.0", "eslint-plugin-import": "^2.22.0", + "eslint-plugin-jest": "^24.0.0", "eslint-plugin-jsx-a11y": "^6.3.1", "eslint-plugin-react": "^7.20.3", "eslint-plugin-react-hooks": "^4.0.8" diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json index 23e8aa55d45..584f362e9ed 100644 --- a/packages/react-error-overlay/package.json +++ b/packages/react-error-overlay/package.json @@ -48,6 +48,7 @@ "eslint-config-react-app": "^5.2.1", "eslint-plugin-flowtype": "^5.2.0", "eslint-plugin-import": "^2.22.0", + "eslint-plugin-jest": "^24.0.0", "eslint-plugin-jsx-a11y": "^6.3.1", "eslint-plugin-react": "^7.20.3", "eslint-plugin-react-hooks": "^4.0.8", diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 5e1935d8a0e..0c8dbae85e1 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -51,8 +51,6 @@ const webpackDevClientEntry = require.resolve( // makes for a smoother build process. const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false'; -const isExtendingEslintConfig = process.env.EXTEND_ESLINT === 'true'; - const imageInlineSizeLimit = parseInt( process.env.IMAGE_INLINE_SIZE_LIMIT || '10000' ); @@ -364,15 +362,6 @@ module.exports = function (webpackEnv) { formatter: require.resolve('react-dev-utils/eslintFormatter'), eslintPath: require.resolve('eslint'), resolvePluginsRelativeTo: __dirname, - // @remove-on-eject-begin - ignore: isExtendingEslintConfig, - baseConfig: isExtendingEslintConfig - ? undefined - : { - extends: [require.resolve('eslint-config-react-app')], - }, - useEslintrc: isExtendingEslintConfig, - // @remove-on-eject-end }, loader: require.resolve('eslint-loader'), }, diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 4f133bc020a..502ff85ebed 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -49,6 +49,7 @@ "eslint-loader": "^4.0.2", "eslint-plugin-flowtype": "^5.2.0", "eslint-plugin-import": "^2.22.0", + "eslint-plugin-jest": "^24.0.0", "eslint-plugin-jsx-a11y": "^6.3.1", "eslint-plugin-react": "^7.20.3", "eslint-plugin-react-hooks": "^4.0.8",