提交时代码检查

1,001 阅读2分钟

前言

在项目开发中,有的伙伴不格式化代码,有的伙伴格式化代码后会平白无故多出很多更改,很多都是格式上的变化,但是会给开发带来不必要的负担,所以最好制定一个统一的代码风格。

安装并配置prettier

介绍:Prettier 是一个opinionated的代码格式化程序。

  1. 安装prettier,执行以下命令:
cnpm install prettier -D
  1. 配置prettier代码格式化的规则。 在项目根目录新建.prettierrc.js文件,内容为以下格式:(具体规则还需参考官方文档)
module.exports = {
    semi: true,
    trailingComma: 'all',
    singleQuote: true,
    useTabs: true,
};

安装并配置eslint

介绍:Eslint 是代码检测工具。

  1. 安装eslint 安装eslint,执行以下命令:
cnpm install eslint -D

全局安装eslint,执行以下命令:

cnpm install eslint -g
  1. 初始化eslint 如果有全局安装eslint,执行以下命令:
eslint --init

如果没有全局安装eslint,执行以下命令:

./node_modules/.bin/eslint --init

具体项目根据实际情况选择不同的选项即可 image.png

  1. 配置eslint代码检查的规则。 会在项目根目录自动创建一个.eslintrc.js文件,可以在rules中配置规则。(具体规则还需参考官方文档)
module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        // 禁止对象字面量中出现重复的 key
        "no-dupe-keys": "error"
    }
};

安装并配置lint-staged

介绍:lint-staged 是一个在git暂存文件上运行linters的工具。

  1. 安装lint-staged,执行以下命令:
cnpm install lint-staged -D
  1. 配置lint-stagedpackage.json中增加
"lint-staged": {
    "src/*": [
        "prettier --config .prettierrc.js --write",
        "eslint --fix",
        "git add"
    ]
}

安装并配置husky

介绍:husky 是一个 Git Hook 工具。

  1. 安装husky,执行以下命令:
cnpm install husky -D
  1. 配置huskypackage.json中增加以下代码:
"prepare": "husky install"

并且需要执行一次增加的prepare,执行以下命令:

npm run prepare

以上操作会在项目根目录自动创建一个.husky文件夹。

  1. 添加一个pre-commit钩子
npx husky add .husky/pre-commit "npx lint-staged"

以上命令会在.husky文件夹下创建一个pre-commit

image.png

以上命令中的undefined可根据需要替换,我这边是换成了npx lint-staged,以后每次commit时都会被执行。

image.png

测试

在src目录中新增一个js文件,随便写点东西,然后执行:

git add .
git commit -m 'test'

这是我要提交的文件

image.png

image.png 检测到代码有问题,所以commit失败

修改之后

image.png

image.png commit成功,并且a.js中的代码也被prettier格式化了。

image.png

可以查看示例

参考

huskyhusky使用总结