前端代码格式自动化处理：eslint + stylelint + prettier

前端项目开发过程中，由于团队成员每个人的开发习惯和代码风格不同，最终提交到git仓库的代码格式不统一对团队间的协作产生阻碍，因此使用工具来自动和强制统一代码格式是一个好的选择。

Git Hooks

为了保证提交到git仓库的代码是整洁、格式统一的，通常需要使用Git Hooks。Git Hooks是在git操作的某些时机自动执行的一些脚本，常见的Git Hooks如 pre-commit、post-merge、pre-push等。详情见Git Hooks官方学习文档。

Git Hooks存储在git目录下的hooks子目录中，即绝大部分项目中的 .git/hooks。如下：

Git Hooks

如果直接去该目录下编写脚本，对于大部分开发人员来说不太友好，因此在前端项目中可以使用husky这个npm库来简化Git Hooks脚本的编写，见https://www.npmjs.com/package/husky。

husky简单介绍

1. 安装依赖

yarn add -D husky

2. 在package.json里添加要执行的git hooks命令，如：

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "npm test",
      "post-merge": "sh test.sh",
      "pre-push": "node test.js",
      "...": "..."
    }
  }
}

这里的hooks对应.git/hooks下的hooks脚本，里面可以放一些npm命令或者其他自定义的命令。

lint-staged简单介绍

如果要在pre-commit时自动执行代码格式校验，对于整个项目文件执行校验命令通常是不合适的，因为代码库的代码通常是整洁的，且每个提交改动的文件一般比较少，因此可以使用lint-staged工具，只对git暂存区的文件执行脚本。见https://www.npmjs.com/package/lint-staged。

1. 安装依赖

yarn add -D lint-staged

2. 结合husky，在提交代码前只对暂存区的代码执行命令，配置如下：

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js}": [
      "sh test.sh"
    ]
  },
}

lint-staged会自动将暂存区的文件当作参数拼接在要执行的命令后面，以上命令相当于执行sh test.js ${files}，对于v10.x之后的版本，还会在执行命令后自动执行git add命令。

eslint

见https://eslint.org/docs/user-guide/getting-started

prettier

见https://prettier.io/docs/en/install.html

与eslint集成见https://prettier.io/docs/en/integrating-with-linters.html

stylelint

见https://stylelint.io/user-guide/get-started

editorconfig

见https://editorconfig.org/，需配合编辑器插件生效

vscode支持eslint和stylelint的配置

vscode插件安装

• ESLint
• stylelint
• EditorConfig for VS Code

配置settings.json

{
    "css.validate": false,
    "less.validate": false,
    "scss.validate": false,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true
    },
   "stylelint.validate": [
        "css",
        "less",
        "postcss",
        "sass",
        "scss"
    ]
}

常用基础配置（方便拷贝）

文件清单

• .eslintrc
• .prettierrc
• .stylelintrc.json
• package.json
• .editorconfig

// .eslintrc
{
  "extends": ["plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "warn"
  }
}

// .prettierrc
{
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 100,
  "overrides": [
    {
      "files": ".prettierrc",
      "options": { "parser": "json" }
    }
  ]
}

// .stylelintrc.json
{
  "extends": "stylelint-config-standard",
  "rules": {
    "color-no-invalid-hex": true,
    "block-no-empty": true,
    "selector-pseudo-class-no-unknown": [ true, {
      "ignorePseudoClasses": ["global"]
    } ]
  }
}

// package.json
// scripts里的命令用于手动校验
{
  "scripts": {
    "lint": "eslint src/**/*.{js,jsx} --fix",
    "lint:style": "stylelint src/**/*.{css,less} --fix"
  },
  "devDependencies": {
    "eslint": "^5.4.0",
    "eslint-config-prettier": "^6.11.0",
    "husky": "^4.2.5",
    "lint-staged": "^10.2.2",
    "stylelint": "^13.3.3",
    "stylelint-config-standard": "^20.0.0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx}": [
      "eslint --fix --max-warnings 0"
    ],
    "*.{css,less}": [
      "stylelint --fix --max-warnings 0"
    ]
  }
}

# .editorconfig
# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

umi项目的eslint配置和插件列表

// .eslintrc
{
  "extends": ["eslint-config-umi", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "warn",
    "react-hooks/exhaustive-deps": "off",
    "jsx-a11y/anchor-is-valid": "off",
    "eqeqeq": "off"
  }
}

{
  "devDependencies": {
    "babel-eslint": "^9.0.0",
    "eslint": "^5.4.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-config-umi": "^1.4.0",
    "eslint-plugin-flowtype": "^2.50.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-react": "^7.11.1",
  }
}