前言

最近刚刚接手了“微信支付有优惠”小程序，项目使用的是 WePY 框架，由于大部分代码都是外包同学书写的，所以在前端工程化这块比较欠缺。由于缺少 prettier 等相关格式化工具，代码风格参差不齐。话不多说，下面开始进入今天的主题。

主要思路

使用 husky 提供的 pre-commit 和 commit-msg 钩子，可以在 git 提交代码时执行 lint-staged 和 prettier 的相关操作，完成校验 git commit message 以及代码的自动化格式化。

工具安装

husky 安装

npm i -D husky@4.3.6

commitlint 安装

npm i -D @commitlint/cli,@commitlint/config-conventional

lint-staged 安装

npm i -D lint-staged

prettier 安装

npm i -D prettier

主要配置

package.json 需增加配置

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "src/**/*.{js,wpy,wxs}": [
      "prettier --write"
    ]
  },
}

commitlint 配置

// commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'upd', // 更新功能
        'bug', // 此项特别针对bug号，用于向测试反馈bug列表的bug修改情况
        'feat', // 新功能（feature）
        'fix', // 修补bug
        'docs', // 文档（documentation）
        'style', // 格式（不影响代码运行的变动）
        'refactor', // 重构（即不是新增功能，也不是修改bug的代码变动）
        'test', // 增加测试
        'chore', // 构建过程或辅助工具的变动
        'revert', // feat(pencil): add ‘graphiteWidth’ option (撤销之前的commit)
        'merge', // 合并分支， 例如： merge（前端页面）： feature-xxxx修改线程地址
        'debug', // 需要到测试环境进行调试的情况使用
      ],
    ],
  },
};

prettier 配置

这里需要注意的是，由于 prettier 无法识别 wpy 和 wxs 格式，需要手动指定 parser 。

// .prettierrc
{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 120,
  "trailingComma": "all",
  "arrowParens": "always",
  "overrides": [
    {
      "files": "*.wpy",
      "options": { "parser": "vue" }
    },
    {
      "files": "*.wxs",
      "options": { "parser": "babel" }
    }
  ]
}