项目架构之 -- 提交代码时的ESLint校验

对于一个项目的架构来讲代码格式的统一是必不可少的。如果一个项目里面各种语法杂乱无章，对于后续的维护工作也是很恼火的。代码写的不优雅会被别人吐槽死~

我们在做架构的时候一定要尽量的将标准大众化，这样才能让更多的人接受。

准备工作【生成项目】

以react为例，用脚手架生成一个项目，目录结构如下【不需要一致，仅供参考】：

【这里放个图】

介绍下我们需要使用的npm模块

第一步 - 安装所需依赖

cnpm install prettier husky lint-staged eslint -S
1

第二步 - 配置规则

2.1 配置ESLint规则

在项目中执行以下命令进行初始化eslint文件

./node_modules/.bin/eslint --init
1

选择eslint的提示选项：
【这里配个图】

在项目根目录新建.eslintrc.json文件。在rules选项中加规则：

"rules": {
	"no-dupe-keys": "error", // 禁止对象字面量中出现重复的key
	"no-duplicate-case": "error", // 禁止出现重复的case标签
	"no-empty": ["error", { "allowEmptyCatch": true }], // 禁止出现空语句块，catch可以
	"no-ex-assign": "error", // 禁止对catch子句的参数重新赋值
	"no-extra-boolean-cast": "error", // 禁止不必要的布尔转换
	"curly": "error", // 强制所有控制语句使用一致的括号风格
}
1
2
3
4
5
6
7
8

更多校验规则见：eslint官网

2.2 配置prettier规则

在项目根目录下新建.prettierrc文件

{
	"printWidth": 100, // 代码换行长度
	"tabWidth": 2, // 代码缩进空格数
	"useTabs": true, // 使用tab缩进而不是空格缩进
	"semi": true, // 是否需要代码尾分号
	"singleQuote": true, // 是否使用单引号
	"bracketSpacing": true, // 对象内是否加空格
	"arrowParens": "avoid", // 单个参数的箭头函数不加括号
}
1
2
3
4
5
6
7
8
9

更多配置见：prettier官网

2.2 配置package.json

增加husky 和 lint-staged的配置

"husky": {
	"hooks": {
		"pre-commit": "lint-staged"
	}
},
"lint-staged": {
	"src/**": [
		"prettier --config .prettierrc --write",
		"eslint --fix",
		"git add"
	]
}
1
2
3
4
5
6
7
8
9
10
11
12

第三步 - 测试

我们现在就是需要来检验一下是否配置成功了，我们先修改一些文件，然后执行：

git add .
git commit -m "test"
1
2

此时就会进行eslint检验，如果有错误的话commit会失败把错误信息暴露出来。