忽略或防止 ESLint 错误破坏 React 项目中的构建 (create-react-project)
Ignore or prevent ESLint errors from breaking the build in a React project (create-react-project)
我最近用 create-react-project
创建了一个项目。
问题是,在我进行开发时,每次 ESLint 出现问题时,构建都会中断并且无法编译代码。
我可以在保留构建 运行 的同时仍然使用 ESLint 运行 并报告我稍后会修复的错误吗?
好的,我刚刚从我的 webpack 配置中评论了这一行
// {
// test: /\.(js|jsx|mjs)$/,
// enforce: 'pre',
// use: [
// {
// options: {
// formatter: eslintFormatter,
// eslintPath: require.resolve('eslint'),
//
// },
// loader: require.resolve('eslint-loader'),
// },
// ],
// include: paths.appSrc,
// },
如果你想强制 ESLint 总是发出警告(不会阻止你构建)而不是错误,你需要设置 emitWarning: true
:
{
enforce: 'pre',
include: paths.appSrc,
test: /\.(js|jsx|mjs)$/,
use: [{
loader: require.resolve('eslint-loader'),
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),
emitWarning: true, HERE
},
}],
},
Errors and Warning
By default the loader will auto adjust error reporting depending on eslint errors/warnings counts. You can still force this behavior by using emitError
or emitWarning
options:
emitError
(default: false
)
Loader will always return errors if this option is set to true.
emitWarning
(default: false
)
Loader will always return warnings if option is set to true
. If you're using hot module replacement, you may wish to enable this in development, or else updates will be skipped when there's an eslint error.
...
由于 eslint-loader
现已弃用并且 eslint-webpack-plugin
现在用于 create-react-app
检查 docs,我能够通过添加两个选项来解决类似的问题eslint-webpack-plugin
弹出你的 React 应用程序后,将这些选项添加到 ESLintPlugin
选项:
new ESLintPlugin({
// Plugin options
extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
context: paths.appSrc,
failOnError: false, <== `This one`
emitWarning: true, <== `And this one`
// ESLint class options
cwd: paths.appPath,
resolvePluginsRelativeTo: __dirname,
baseConfig: {
extends: [require.resolve('eslint-config-react-app/base')],
rules: {
...(!hasJsxRuntime && {
'react/react-in-jsx-scope': 'error'
})
}
}
})
只需在您的 .env
文件中添加 DISABLE_ESLINT_PLUGIN=true
干杯!
对于想要在 2021 年解决此问题的人,您只需在 .env.development 文件中设置以下内容即可忽略 TypeScript 错误
TSC_COMPILE_ON_ERROR=true
来源:https://create-react-app.dev/docs/advanced-configuration/#:~:text=TSC_COMPILE_ON_ERROR
此外,要忽略 ESLint 错误,请使用 craco 覆盖 eslint-webpack-plugin
默认配置以忽略开发环境中的错误。
const eslintWebpackPlugin = require("eslint-webpack-plugin");
const process = require("process");
module.exports = {
webpack: {
configure: (config) => {
config.plugins.forEach((plugin) => {
if (plugin instanceof eslintWebpackPlugin) {
// Ignore ESLint Errors.
plugin.options.failOnError = process.env.NODE_ENV === "production";
}
});
return config;
},
},
};
我可能会迟到,但如果你补充
ESLINT_NO_DEV_ERRORS=true
在 .env
文件中,然后对错误进行排序。
P.S: 适用于 react script 4.0.3
及以上
我最近用 create-react-project
创建了一个项目。
问题是,在我进行开发时,每次 ESLint 出现问题时,构建都会中断并且无法编译代码。
我可以在保留构建 运行 的同时仍然使用 ESLint 运行 并报告我稍后会修复的错误吗?
好的,我刚刚从我的 webpack 配置中评论了这一行
// {
// test: /\.(js|jsx|mjs)$/,
// enforce: 'pre',
// use: [
// {
// options: {
// formatter: eslintFormatter,
// eslintPath: require.resolve('eslint'),
//
// },
// loader: require.resolve('eslint-loader'),
// },
// ],
// include: paths.appSrc,
// },
如果你想强制 ESLint 总是发出警告(不会阻止你构建)而不是错误,你需要设置 emitWarning: true
:
{
enforce: 'pre',
include: paths.appSrc,
test: /\.(js|jsx|mjs)$/,
use: [{
loader: require.resolve('eslint-loader'),
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),
emitWarning: true, HERE
},
}],
},
Errors and Warning
By default the loader will auto adjust error reporting depending on eslint errors/warnings counts. You can still force this behavior by using
emitError
oremitWarning
options:
emitError
(default:false
)Loader will always return errors if this option is set to true.
emitWarning
(default:false
)Loader will always return warnings if option is set to
true
. If you're using hot module replacement, you may wish to enable this in development, or else updates will be skipped when there's an eslint error....
由于 eslint-loader
现已弃用并且 eslint-webpack-plugin
现在用于 create-react-app
检查 docs,我能够通过添加两个选项来解决类似的问题eslint-webpack-plugin
弹出你的 React 应用程序后,将这些选项添加到 ESLintPlugin
选项:
new ESLintPlugin({
// Plugin options
extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
context: paths.appSrc,
failOnError: false, <== `This one`
emitWarning: true, <== `And this one`
// ESLint class options
cwd: paths.appPath,
resolvePluginsRelativeTo: __dirname,
baseConfig: {
extends: [require.resolve('eslint-config-react-app/base')],
rules: {
...(!hasJsxRuntime && {
'react/react-in-jsx-scope': 'error'
})
}
}
})
只需在您的 .env
文件中添加 DISABLE_ESLINT_PLUGIN=true
干杯!
对于想要在 2021 年解决此问题的人,您只需在 .env.development 文件中设置以下内容即可忽略 TypeScript 错误
TSC_COMPILE_ON_ERROR=true
来源:https://create-react-app.dev/docs/advanced-configuration/#:~:text=TSC_COMPILE_ON_ERROR
此外,要忽略 ESLint 错误,请使用 craco 覆盖 eslint-webpack-plugin
默认配置以忽略开发环境中的错误。
const eslintWebpackPlugin = require("eslint-webpack-plugin");
const process = require("process");
module.exports = {
webpack: {
configure: (config) => {
config.plugins.forEach((plugin) => {
if (plugin instanceof eslintWebpackPlugin) {
// Ignore ESLint Errors.
plugin.options.failOnError = process.env.NODE_ENV === "production";
}
});
return config;
},
},
};
我可能会迟到,但如果你补充
ESLINT_NO_DEV_ERRORS=true
在 .env
文件中,然后对错误进行排序。
P.S: 适用于 react script 4.0.3
及以上