ESLine配置使用（react,babel,webpack）

前言：最近提交的项目出了一些小bug，原因是有一个组件没有引用就直接调用了其方法，具体是用在请求失败的回调中，因为调试的时候直接走通，所以并没有走到这里，结果只加了一个单词，然后重新git，重新编译，重新部署测试服。为了避免此类低级错误并且产出统一优良风格代码，所以决定在项目中启动ESLint检测。

环境：React，Webpack，Babel

基本安装
npm install eslint --save-dev
npm install eslint-loader --save-dev
处理ES6
npm install babel-eslint --save-dev
针对React
npm install eslint-plugin-react --save-dev

在webpack中配置

...
module: {
	rules: [{
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader","eslint-loader"]
     }]
}
...

详细规则配置
在项目根目录下新建.eslintrc文件(可 eslint --init生成)
详细规则可见（转载）：https://blog.csdn.net/m_review/article/details/78621538

忽略检测
根目录新建.eslintignore文件 里面直接写要忽略的目录

src/containers/hotSearch/
src/entry/
src/helper/
src/store/

至此，在编写代码中出现错误可有红色波浪线提示，如未定义直接使用变量

项目运行后可在控制台console查看报错

每次修改.eslintrc文件规则时建议重新运行项目。

本文地址：https://blog.csdn.net/qq_42555578/article/details/107385431