阅读 77

vue项目集成husky, commitlint, lint-staged, prettier总结

公司项目开发中,都会有很多种规范,代码规范,提交规范等等,目的就是为了使团队代码风格统一,便于阅读,便于理解。

通过使用以上工具,项目将会具备校验提交信息是否规范,提交前格式化代码,lint代码等功能。

1介绍

1.1 husky

如很多其他版本控制系统一样,git也具有在特定时间执行特定动作的脚本功能。husky 其实就是一个为 git 客户端增加 hook 的工具。它提供了很多git hooks(如commit, push, receive等),我们可以很方便在这些钩子中检测提交信息是否规范,运行测试用例,检测代码等等。

1.2 commitlint

commitlint 可以校验提交信息是否规范,提交格式如下:

    git commit -m <type>: <description>
复制代码

其中type可以是以下值:

  • build:主要目的是修改项目构建系统(例如 glup,webpack,rollup 的配置等)的提交
  • ci:主要目的是修改项目继续集成流程(例如 Travis,Jenkins,GitLab CI,Circle等)的提交
  • docs:文档更新
  • feat:新增功能
  • fix:bug 修复
  • perf:性能优化
  • refactor:重构代码(既没有新增功能,也没有修复 bug)
  • style:不影响程序逻辑的代码修改(修改空白字符,补全缺失的分号等)
  • test:新增测试用例或是更新现有测试
  • revert:回滚某个更早之前的提交
  • chore:不属于以上类型的其他类型(日常事务)

例如:

    git commit -m "fix: 修复什么bug"
复制代码

1.3 lint-staged

可以运行相关lint插件进行代码检测。

1.4 prittier

可以对代码进行格式化,保证代码统一格式。

2 配置husky

  1. 安装
    yarn add husky -D
复制代码
  1. 启用,执行完下面命令后,根目录会出现一个.husky的目录。
    yarn husky install
复制代码
  1. 为了保证其他人下载项目代码以后,自动启用hook,所以需要在package.jsonscripts中加入"postinstall": "husky install",例如:
    {
      "scripts": {
        "postinstall": "husky install"
      }
    }
复制代码

注意:如果是npm安装,可以参照这里

2 配置commitlint

  1. 安装
    yarn add @commitlint/cli @commitlint/config-conventional -D
复制代码
  1. 创建配置文件
    echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
复制代码

或者在根目录新建这个commitlint.config.js文件,然后输入下面内容:

    module.exports = {extends: ['@commitlint/config-conventional']}
复制代码
  1. 增加commit-msg钩子
    yarn husky add .husky/commit-msg 'yarn commitlint --edit "$1"'
复制代码

执行完上述命令以后,.husky下面会有commit-msg的文件。 至此,项目可以校验提交信息,是否符合规范,有想尝试的可以试下。

  1. windows下使用git bash执行commit时,可能会出现包含stdin is not a tty的报错。可以在 .husky 目录下创建一个 common.sh 文件:
#!/bin/sh

command_exists () {
  command -v "$1" >/dev/null 2>&1
}

# Windows 10, Git Bash and Yarn workaround
if command_exists winpty && test -t 1; then
  exec < /dev/tty
fi
复制代码

然后在对应的勾子文件中,增加一行 . "$(dirname "$0")/common.sh" 代码

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
. "$(dirname "$0")/common.sh"

yarn …
复制代码

注意:所有*.sh文件的第一行必须是#!/bin/sh,否则会出现报错:error: cannot spawn git: No such file or directory

3 配置lint-staged

  1. 安装
    yarn add lint-staged -D
复制代码
  1. 根目录创建 .lintstagedrc 配置文件
    {
      "./src/**/*.{js,jsx,ts,tsx,vue,less,sass,scss,css.json}": ["prettier --write"],
}
复制代码

4 配置prettier

  1. 安装
    yarn add prettier -D
复制代码
  1. 根目录创建.prettierrc.js文件
// 详见https://prettier.io/docs/en/options.html
module.exports = {
  printWidth: 80, // 每行的长度
  tabWidth: 2, // 缩进的空格数
  useTabs: false, // 用tabs而不是空格缩进
  semi: true, // 每个语句末尾是否加分号,false只有在编译报错时才加
  singleQuote: false, // 使用单引号代替双引号,jsx引号规则将会忽略此配置。
  quoteProps: "as-needed", //
  jsxSingleQuote: false, // 在jsx中使用单引号代替双引号
  trailingComma: "es5", // 是否有末尾的逗号,例如数组或对象的最后一项。/es5/none/all
  bracketSpacing: false, // 在对象字面量{}的语法中打印空格
  jsxBracketSameLine: false, // 开始标签的>是否和之前内容在同一行
  arrowParens: "always", // 箭头函数的参数是否加括号 /always/avoid
  rangeStart: 0, // 需要格式化的开始位置
  rangeEnd: Infinity, // 需要格式化的结束位置
};
复制代码

5 配置pre commit钩子

  1. 执行下面命令,会在.husky目录下面有个文件pre-commit
    yarn husky add .husky/pre-commit 'yarn lint-staged --allow-empty "$1" && yarn lint'
复制代码

项目如果使用vue-cli创建的,package.jsonscripts中会有lint: vue-cli-service lint。如果想执行其他lint插件,可以将上面的yarn lint修改。

注意:如果commit出现stdin is not a tty的报错。参考

至此。完结。

6 额外补充

  1. 如果不想加入 配置husky 中的第3步,可以删除.husky下的.gitignore文件。

  2. 如果不想安装lint-staged,可以将文件pre-commit里的命令改为:

    yran prettier "./src/**/*.{js,jsx,ts,tsx,vue,less,sass,scss,css.json}" --write && yarn lint
复制代码

7 参考

  1. typicode.github.io/husky/#/?id…
  2. www.cnblogs.com/qiqi715/p/1…
  3. www.cnblogs.com/JasonLong/p…
文章分类
开发工具
文章标签