[英]How to output eslint errors in the browser when using reactjs
Normally i have set up my project using the create-react-app cli tool.通常我已经使用 create-react-app cli 工具设置了我的项目。 How can i setup my ReactJS project to output ESLint errors and warnings in the browser.
如何设置我的 ReactJS 项目以在浏览器中输出 ESLint 错误和警告。 More specifically i want it to output any ESLint errors and warnings just like VueJS does.
更具体地说,我希望它像 VueJS 一样输出任何 ESLint 错误和警告。
VueJS will normally output any warning or error on a semi transparent screen in the browser and will not display the app until you resolve the ESLint errors. VueJS 通常会在浏览器的半透明屏幕上输出任何警告或错误,并且在您解决 ESLint 错误之前不会显示应用程序。
Thank you.谢谢你。
To output eslint errors in the browser you can use the following combination of plugins in webpack.js
:要在浏览器中输出 eslint 错误,您可以在
webpack.js
使用以下插件组合:
...
plugins: [
new ESLintPlugin({
files: 'src/**/*.(js|jsx|ts|tsx)',
extensions: ['.js', '.jsx', '.ts', '.tsx'],
configFile: '.eslintrc.json',
lintDirtyModulesOnly: true,
emitError: true,
emitWarning: true,
failOnError: false,
failOnWarning: false,
}),
new ErrorOverlayPlugin(),
new webpack.HotModuleReplacementPlugin({}),
],
...
Assumptions:假设:
.eslintrc.json
for your project.eslintrc.json
ESLintPlugin
and ErrorOverlayPlugin
into your webpack.js fileESLintPlugin
和ErrorOverlayPlugin
到你的 webpack.js 文件中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.