代码规范之prettier+eslint实践

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"
  }
}

这样就能完美结合了。

相关推荐