webpack 使用 ESlint

作者：Seiya

时间：2019年07月17日

制定团队的 ESLint 规范

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

ESLint 落地方案

方案一（webpack 与 CI/CD 集成）

在本地开发阶段增加 precommit 钩子，进行 ESlint 检查，具体如下：

安装 husky
```
npm install husky --save-dev
```

增加 npm script，通过 lint-staged 增量检查修改的文件

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

方案二（webpack 与 ESLint 集成）

使用 eslint-loader 构建时检查 JS 规范

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

根目录下新建 ESlint 配置文件 .eslintrc.js 具体配置如下：

module.exports = {
	/* 解析器 */
	"parser": "babel-eslint",
	/* 继承其它配置 */
	"extends": ["airbnb"],
	/* ESlint 启用环境*/
	"env": {
		"browser": true,
		"node": true
	},
	/* 自定义规则配置 */
	"rules": {
		"indent": ["error", 4]
	}
};

# webpack 使用 ESlint

# 制定团队的 ESLint 规范

# ESLint 落地方案

# 方案一（webpack 与 CI/CD 集成）

# 方案二（webpack 与 ESLint 集成）

# 行业里面优秀的 ESLint 规范实践

webpack 使用 ESlint

制定团队的 ESLint 规范

ESLint 落地方案

方案一（webpack 与 CI/CD 集成）

方案二（webpack 与 ESLint 集成）

行业里面优秀的 ESLint 规范实践