前端工程化之代码规范---ESLint + Prettier + husky + lint-staged代码规范全家桶

每个开发者都有自己的习惯，代码的风格也不尽相同，比如缩进的格数，结尾加不加分号,定义函数有没有空格，这些看似好像不起眼的风格，但在多人开发的时候，代码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"