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

Jump to bottom

Use native ESLint behaviour when extending #8276

Merged
merged 1 commit into from Mar 1, 2020
Merged

Use native ESLint behaviour when extending #8276

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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion docusaurus/docs/advanced-configuration.md
View file
Open in desktop
Expand Up @@ -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. |
1 change: 0 additions & 1 deletion docusaurus/docs/setting-up-your-editor.md
View file
Open in desktop
Expand Up @@ -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:
Expand Down
34 changes: 10 additions & 24 deletions packages/react-scripts/config/webpack.config.js
View file
Open in desktop
Expand Up @@ -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');
Expand All @@ -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'
);
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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'),
Expand Down