eslint常见插件用途及webpack打包配置

最近在研究怎样在webpack打包中加入代码格式审查，看到一大堆各种莫名其妙的eslint相关扩展插件，头大，不明所以，随花了两天时间研究了一下相应的操作；
一般我们使用eslint是想格式化我们的代码，使它更规范，大家能约定熟成，便于统一项目代码风格，减少不必要的格式错误；
一般理想的状态是，大家提交代码之前一会自动格式化，并检查格式错误，给予提示；

git钩子husky

hsuky的作用是在我们git提交代码的生命过程中，针对不同的生命周期，做一些额外操作，例如代码格式审查；
1.安装husky

npm i husky -D

husky的常见取值属性有：
pre-commit、prepare-commit-msg、commit-msg、post-commit；
关于这些属性的具体作用这里我们就不一一细说了，有兴趣的可以自行查阅，我就说常用的pre-commit，这个作用就是再git commit之前做格式审查；
整个项目的基础上运行lint格式检查是很慢的，我们可以利用lint-stage这个插件缓存功能，提高代码检查速度，他只检查暂存区的代码；
我们可以再项目的pack.json中配置如下：

"scripts": {
    "lint": "npm run eslint & npm run stylelint",
    "eslint": "eslint --fix",
    "stylelint": "stylelint src/**/*.{html,jsx,css,less,sass,scss}",
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
   "lint-staged": {
   // 属性名：过滤要检查的文件
   // 属性值：
    "src/**/*.{js,jsx}": [
      "npm run eslint",
      //这条的意思是将经过前面几行命令处理过的代码重新add到git
      "git add"
    ],
    "src/**/*.{html,css,sass,scss,less}": [
      "stylelint",
      "git add"
    ]
  }

eslint配置

1.既然使用eslint，首先就要安装；

npm i eslint babel-eslint -D

ESLint的默认解析器和核心规则仅支持最新的最终 ECMAScript 标准，不支持 Babel 提供的实验性（例如新功能）和非标准（例如Flow或TypeScript类型）语法。@ babel / eslint-parser 是允许 ESLint 在由 Babel 转换的源代码上运行的解析器。
需要说明的是：babel-eslint不再更新维护了，后续使用@babel/eslint-parser
2.创建.eslintrc.*这种形式的eslint配置文件或者直接再pack.json里面的eslintConfig 字段指定配置，ESLint 会查找和自动读取它们，或者你可以在命令行运行时指定一个任意的配置文件。Eg：eslint –config .eslintrc.js；

// 例如.eslintrc.js文件配置
{
//parser默认可以编译esprima，具体配置可以查血eslint官网
    "parser": "babel-eslint",
    "rules": {
        "semi": "error"
    }
}

.eslintignore文件创建需要排除检查的文件

默认情况下，ESLint 支持 ECMAScript 5 语法。你可以覆盖该设置，以启用对 ECMAScript 其它版本和 JSX 的支持。请注意，支持 JSX 语法并不等同于支持 React。针对不同的项目框架语言要相对应的插件支持：
vue：eslint-plugin-vue
react：eslint-plugin-react

常见eslint插件及作用

1.eslint-webpack-plugin：eslint解析器，因为webpack是识别js，要解析eslint必须的loader，这是webpack的基本步骤，相对于老版的eslint-loader，eslint-loader后续不再更新，
2.eslint-plugin-react：专门针对react语法的eslint规则，react项目必须；
3.eslint-plugin-import：针对impot语法优化的插件，防止webpack自定义路径造成的错误；
4.eslint-plugin-prettier：运行prettier代码格式化插件的配置；
5.eslint-config-prettier：eslint关闭r所有不必要或可能与Prettier冲突的规则。
6.eslint-plugin-promise：es语法promise的eslint最佳配置；
7.eslint-config-standard：JavaScript标准样式的ESLint可配置，基础配置；
8.eslint-plugin-react-hooks：专门针对react的hook语法的eslint规则；
9.eslint-plugin-vue：vue项目的的配置，vue项目必须；
10.@typescript-eslint/eslint-plugin：ts语法的配置；
11.eslint-plugin-node: 为node准备的eslint规则配置；
12.eslint-plugin-babel：当使用babel-eslint，这个插件能很好调和babel与eslint的结合，定义在.eslintrc.*的plugin属性中；
13.@babel/eslint-plugin：当使用@babel/eslint-parser，这个插件能很好调和babel与eslint的结合；
所有上述辅助功能配置有的是再webpack配置文件中配置再pugins，eslint-webpack-plugin，有的都要再extends里面申明，具体用法可参照npm对应文档说明，eg：

const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {
  // 针对eslint-webpack-plugin,老版使用eslint-loader
  plugins: [new ESLintPlugin()],
  // ...
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ]
};
//.eslintrc.js
module.exports = {
  parser: "@babel/eslint-parser",
  plugins:[
	'@babel/eslint-plugin'
]
};
module.exports = {
  parser: "babel-eslint",
  plugins:[
	'eslint-plugin-babel'
]
};
//or

eslint常用常用配置就先介绍到这里，不足之处欢迎指正；