webpack进阶篇（二十四）：在webpack中使用ESLint

说明

​​玩转webpack​​课程学习笔记。

ESLint 的必要性

比如：⼿机使⽤了系统⾃带的 webview ⽽没有使⽤ X5 内核，解析 JSON 时遇到重复 key 报错，导致⻚⾯⽩屏。

⾏业⾥⾯优秀的 ESLint 规范实践

​​Airbnb​​​：eslint-config-airbnb、 eslint-config-airbnb-base ​​https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb​​

​​alloyteam团队​​​：eslint-config-alloy ​​https://github.com/AlloyTeam/eslint-config-alloy​​

​​ivweb 团队​​​：eslint-config-ivweb ​​https://github.com/feflow/eslint-config-ivweb​​

制定团队的 ESLint 规范

• 不重复造轮⼦，基于​​eslint:recommend​​ 配置并改进
• 能够帮助发现代码错误的规则，全部开启
• 帮助保持团队的代码⻛格统⼀，⽽不是限制开发体验

​​https://eslint.bootcss.com/docs/rules/​​

ESLint 如何执⾏落地

⽅案⼀：webpack 与 CI/CD 集成

本地开发阶段增加 precommit 钩⼦

1、安装 husky

​​npm install husky --save-dev​​

2、增加 ​​npm script​​​，通过 ​​lint-staged​​ 增量检查修改的⽂件

"scripts": {
  "precommit": "lint-staged"
},
"lint-staged": {
  "linters": {
    "*.{js,scss}": ["eslint --fix", "git add"]
  }
},

⽅案⼆：webpack 与 ESLint 集成

1、使⽤ ​​eslint-loader​​，构建时检查 JS 规范

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          "babel-loader",
          "eslint-loader"
        ]
      }
    ]
  }
};

例子

1、打开​​https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb​​，可以看到下面这个

eslint-config-airbnb：

Our default export contains all of our ESLint rules, including ECMAScript 6+ and React. It requires ​​eslint, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-jsx-a11y​​. If you don’t need React, see eslint-config-airbnb-base.

2、安装依赖

2.1、​​npm i eslint eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks and eslint-plugin-jsx-a11y -D​​

2.2、​​npm i eslint-loader -D​​

2.3、​​npm i babel-eslint -D​​

2.4、​​npm i eslint-config-airbnb -D​​

我使用的是这个版本，版本太高会报一些错误。

"eslint-config-airbnb": "^17.1.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-loader": "^2.1.2",
"eslint-plugin-import": "^2.17.3",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.13.0",

3、修改​​webapck.prod.js​​配置

添加​​eslint-loader​​

rules: [
  {
    test: /.js$/,
    use: [
      'babel-loader',
      'eslint-loader'
    ]
  }
]

4、添加​​.eslintrc.js​​文件

配置官网请参考：​​https://eslint.bootcss.com/docs/user-guide/configuring​​

module.exports = {
  "parser": "babel-eslint",
  "extends": 'airbnb',
  "env": {
    "browser": true,
    "node": true
  },
  "rules": {
    "indent": ["error", 4]
  }
}