From 908b4905a9df29f53f4965eb0f9bc92b81c3c148 Mon Sep 17 00:00:00 2001 From: Brody McKee Date: Fri, 3 Jan 2020 10:55:14 +0200 Subject: [PATCH] Use native ESLint behaviour when extending --- docusaurus/docs/advanced-configuration.md | 2 +- docusaurus/docs/setting-up-your-editor.md | 1 - .../react-scripts/config/webpack.config.js | 34 ++++++------------- 3 files changed, 11 insertions(+), 26 deletions(-) diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md index 871edd2f49d..842addd3595 100644 --- a/docusaurus/docs/advanced-configuration.md +++ b/docusaurus/docs/advanced-configuration.md @@ -22,5 +22,5 @@ You can adjust various development and production settings by setting environmen | NODE_PATH | ✅ Used | ✅ Used | Same as [`NODE_PATH` in Node.js](https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders), but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting `NODE_PATH=src`. | | 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`, ESLint configs that extend `eslint-config-react-app` will be used by `eslint-loader`. Any rules that are set to `"error"` will stop the application from building. | +| 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. | | 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 95dbaa598b6..e0e8b88426f 100644 --- a/docusaurus/docs/setting-up-your-editor.md +++ b/docusaurus/docs/setting-up-your-editor.md @@ -50,7 +50,6 @@ Note that any rules set to `"error"` will stop the project from building. 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. `.eslintignore` files will be respected 1. When working with TypeScript, you'll need to provide an `overrides` object for rules that should _only_ target TypeScript files. In the below example: diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index bad4290061b..52a42d238f1 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -33,7 +33,6 @@ const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin'); const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin'); const typescriptFormatter = require('react-dev-utils/typescriptFormatter'); // @remove-on-eject-begin -const eslint = require('eslint'); const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier'); // @remove-on-eject-end const postcssNormalize = require('postcss-normalize'); @@ -46,6 +45,8 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; // 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' ); @@ -270,8 +271,8 @@ module.exports = function(webpackEnv) { : false, }, cssProcessorPluginOptions: { - preset: ['default', { minifyFontValues: { removeQuotes: false } }] - } + preset: ['default', { minifyFontValues: { removeQuotes: false } }], + }, }), ], // Automatically split vendor and commons @@ -354,28 +355,13 @@ module.exports = function(webpackEnv) { eslintPath: require.resolve('eslint'), resolvePluginsRelativeTo: __dirname, // @remove-on-eject-begin - ignore: process.env.EXTEND_ESLINT === 'true', - baseConfig: (() => { - // We allow overriding the config only if the env variable is set - if (process.env.EXTEND_ESLINT === 'true') { - const eslintCli = new eslint.CLIEngine(); - let eslintConfig; - try { - eslintConfig = eslintCli.getConfigForFile( - paths.appIndexJs - ); - } catch (e) { - console.error(e); - process.exit(1); - } - return eslintConfig; - } else { - return { + ignore: isExtendingEslintConfig, + baseConfig: isExtendingEslintConfig + ? undefined + : { extends: [require.resolve('eslint-config-react-app')], - }; - } - })(), - useEslintrc: false, + }, + useEslintrc: isExtendingEslintConfig, // @remove-on-eject-end }, loader: require.resolve('eslint-loader'),