每个开发者都有自己的习惯,代码的风格也不尽相同,比如缩进的格数,结尾加不加分号,定义函数有没有空格,这些看似好像不起眼的风格,但在多人开发的时候,代码commit提交,可能就会出现一大片冲突,或者过多修改过的情况,对项目管理和维护是极其不友好的,而且在review,阅读项目代码的时候,一个项目中出现几种,甚至10几种的代码风格,我相信没人受得了这事,人都有一种惯性思维,习惯看一种风格,切换到其他风格可能需要适应一下,更别说人手一套风格的项目了,这肯定是不能接受的
代码规范一致性很重要,经历过多人协作项目开发的都知道,代码风格不一样,在commit提交代码的时候,代码可能是一样的,但每行多一个空格,少一个空格,都可能会出现大面积的差异,和冲突,diff比较冲突解决起来就这个环节就能自闭了,这个问题很严重,必须得解决
幸运的是,我们可以通过工具来解决这个看似很棘手的问题:
ESLint + Prettier + husky + lint-staged
这套代码自动化规范工具能很好的解决前端代码规范问题
先来说下每个工具都是干嘛的,最后如何组合在一起在项目中去使用
ESLint: 可参考
ESLint是一个JavaScript代码静态检查工具,可以检查JavaScript的语法错误
,提示潜在的bug,可以有效提高代码质量,维持前端团队高度一致的编码风格。ESLint不但提供一些默认的规则,也提供用户自定义规则来约束所写的JavaScript代码。
所有都是可拔插的:
- 内置规则和自定义规则共用一套规则 API
- 内置的格式化方法和自定义的格式化方法共用一套格式化 API
- 额外的规则和格式化方法能够在运行时指定
- 规则和对应的格式化方法并不强制捆绑使用
每条规则:
- 各自独立
- 可以开启或关闭(没有什么可以被认为“太重要所以不能关闭”)
- 可以将结果设置成警告或者错误
如下等等,很多对应使用场景都有对应的规则。
配置名 | 作用 |
---|---|
array-bracket-newline | 在数组开括号后和闭括号前强制换行 |
array-bracket-spacing | 强制数组方括号中使用一致的空格 |
array-element-newline | 强制数组元素间出现换行 |
block-spacing | 禁止或强制在代码块中开括号前和闭括号后有空格 |
brace-style | 强制在代码块中使用一致的大括号风格 |
更多规则,可参考官方文档
这些规则都是通过一个.eslintrc.js
文件和.eslintignore
文件去管理的
.eslintrc.js
配置的是代码检查时的代码风格
.eslintignore
配置的是对于哪些文件不做检查,和.gitignore
的作用一样
.eslintignore
示例配置如下:
node_modules/
dist/
.yarn/
src/assets/
.eslintrc.js
示例配置如下
module.exports = {
"extends": ["airbnb-base"],
"env": {
"es6": true,
"node": true
},
"rules": {
"comma-dangle": ["error", "never"], // 要求或禁止末尾逗号:不允许逗号
"indent": ["error", 2], // JavaScript代码强制使用一致的缩进:2格缩进
"semi": ["error", "never"], // 不使用分号
"arrow-parens": ["error", "as-needed"], // 箭头函数的参数可以不使用圆括号
"linebreak-style": "off", // 取消换行符\n或\r\n的验证
"object-curly-newline": ["error", {
"consistent": true }], // 花括号内的换行符不一定要格式一致
"function-paren-newline"