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查看报错
ESLine配置使用(react,babel,webpack)_第1张图片
每次修改.eslintrc文件规则时建议重新运行项目。

你可能感兴趣的:(ESLine配置使用(react,babel,webpack))