前端部署自动化husky提交代码格式化流程-时代邻里前端组

章鱼哥来了
574 阅读2分钟

1.下载需要的依赖

npm install husky lint-staged prettier --save-dev
or
yarn add husky lint-staged prettier -D

- 版本参考
"husky": "^7.0.4",
"lint-staged": "^12.0.2",
"prettier": "^2.4.1",

  • 有些大佬需要eslint也可以安装不影响

  • eslint-plugin-vue

    • vue.js的Eslint插件（查找vue语法错误，发现错误指令，查找违规风格指南）

  • eslint-plugin-prettier

  • 运行更漂亮的Eslint，使prettier规则优先级更高，Eslint优先级低

  • eslint-config-prettier

  • 让所有可能与prettier规则存在冲突的Eslint rules失效，并使用prettier进行代码检查

  • @babel/eslint-parser

  • 该解析器允许你使用Eslint校验所有babel code

  • 仅支持最新的最终ECMAScript标准，不支持实验性语法

  • 该编译器会将code解析为Eslint能懂的EsTree（ES2021语法等等）

2.运行安装执行脚本添加script命令

npm set-script prepare "husky install"
npm set-script lint-staged "lint-staged --allow-empty"

3.执行 yarn install 或者 npm install

  • 生成需要的.husky文件
  • 就会执行 hysky install

4.添加配置文件 package.json

 "lint-staged": {
    "*.{js,vue,jsx,tsx,css,less,scss}": [ 
      "prettier --write"
    ]
  }
  • 执行yarn husky add .husky/pre-commit 'yarn lint-staged --allow-empty "$1"'之后，会看到在根目录的.husky文件夹下多了一个 pre-commit 文件，其内容如下：
    npm run lint-staged --allow-empty "$1"

5.新增钩子函数规范提交命令格式commitlint等

yarn add @commitlint/cli  @commitlint/config-conventional -D
or
npm install @commitlint/cli  @commitlint/config-conventional -save
  • 可以看到 版本号
  • "@commitlint/cli": "^15.0.0",
  • "@commitlint/config-conventional": "^15.0.0",
  • 方式一：执行yarn husky add .husky/commit-msg 'yarn commitlint --edit "$1"'之后，会看到在根目录的.husky文件夹下多了一个 commit-msg 文件
  • 方式二：执行 npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"' 其内容如下：
yarn husky add .husky/commit-msg 'yarn commitlint --edit "$1"
or
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

  • 在husky内的commit-msg文件内展示如下：

  • yarn commitlint --edit $1

  • npx --no -- commitlint --edit $1

  • 执行echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js在根目录创建 commitlint.config.js 文件（当然也可以手动创建此文件），其内容如下所示：

module.exports = {
  extends: ['@commitlint/config-conventional'],
  // 以下时我们自定义的规则
  rules: {
    'type-enum': [
      2,
      'always',
      [
        '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修改线程地址
      ],
    ],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'subject-empty': [0, 'never'],
  },
}

6.提交代码commit

PS E:\part-admin\vue-service> git commit -m 'feat: 提交代码' 

> admin@0.1.0 lint-staged E:\part-admin\vue-service
> lint-staged --allow-empty

[STARTED] Preparing...
[SUCCESS] Preparing...
[STARTED] Running tasks...
[STARTED] Running tasks for *.{js,vue,jsx,tsx,css,less,scss}
[STARTED] prettier --write
[SUCCESS] prettier --write
[SUCCESS] Running tasks for *.{js,vue,jsx,tsx,css,less,scss}
[SUCCESS] Running tasks...
[STARTED] Applying modifications...
[SUCCESS] Applying modifications...
[STARTED] Cleaning up...
[SUCCESS] Cleaning up...
avatar
文章
阅读
粉丝