代码规范之eslint+prettier实践

eslint：code quality linter
prettier: code formatter

二者结合使用既能达到团队代码协作风格一致(比如空格宽度，缩进等)，又能做代码检查。

今天遇到一个问题：使用eslint时，通常为了约束开发人员，会同时使用pre-commit（利用git hooks），在commit之前如果eslint检查不通过则无法提交。

而在加入prettier的时候，希望能在代码提交的时候prettier能自动格式化我的代码文件，然后再提交。因此加入了husky+lint-staged配和实现。husky也利用了git hooks.

结果这两个git hooks只有一个起到了作用。

为了达到既能自动格式化代码，又能拦截eslint错误提交，可以保留pre-commit，然后将lint-staged加入pre-commit中，此时可以移除husky了。

修改package.json如下：
package.json:

"scripts": {
        "lint": "node ./node_modules/.bin/eslint src",
        "precommit": "lint-staged"
    },
"pre-commit": [
    "precommit",
    "lint"
  ],
 "lint-staged": {
        "**/**.{js,json,pcss,md}": [
            "prettier --write",
            "git add"
        ]
    },

安装eslint-config-prettier(eslint-plugin-prettier 和 eslint-config-prettier 以及both 中，选择了eslint-config-prettier):

npm i eslint-config-prettier -D

修改.eslintrc，使得format规则冲突时以prettier为准:

{
  "extends": ["eslint-config-recommended", "prettier"],
  "rules": {
    "eqeqeq": "off"
  }
}

这样就能完美结合了。