如何用ts搭建一个vue3通用项目底座 | 第二篇（4）：Git规范化提交

我血条呢

已于 2024-08-28 16:41:43 修改

阅读量734

点赞数 16

分类专栏：前端通用系统模板文章标签：前端 git vue-cli3 typescript vue.js 代码规范

于 2024-08-27 17:14:46 首次发布

本文链接：https://blog.youkuaiyun.com/pasco152/article/details/141606614

版权

前言

上一篇引入了CSS框架，接下来配置一下代码提交规范。

8、初始化git

这个很简单，git init即可，会生成一个.git文件

9、husky 配置

安装husky插件

// package.json
"husky": "^8.0.3",

然后添加 husky 脚本

// package.json
"prepare": "husky install"

执行 pnpm run prepare。
执行之后会发现项目根目录多了个.husky的目录及文件。
在该目录下添加 pre-commit、commit-msg和common.sh文件。
注意不要加到_文件夹里。

// .husky/commit-msg
#!/bin/sh

# shellcheck source=./_/husky.sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit "$1"

// .husky/common.sh
#!/bin/sh
command_exists () {
   
  command -v "$1" >/dev/null 2>&1
}

# Workaround for Windows 10, Git Bash and Pnpm
if command_exists winpty && test -t 1; then
  exec < /dev/tty
fi

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

[ -n "$CI" ] && exit 0

# Format and submit code according to lintstagedrc.js configuration
npm run lint

npm run lint:lint-staged

安装lint-staged插件。

// package.json
"lint-staged": "^13.2.2",

在.husky文件夹里新建lintstagedrc.cjs文件，用来限定lint范围。

// lintstagedrc.cjs
module.exports = {
   
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
  '!(package)*.json': ['prettier --write--parser json'],
  'package.json': ['prettier --write'],
  '*.vue': ['eslint --fix', 'prettier --write', 'stylelint --fix'],
  '*.{vue,css,scss,postcss,less}': ['stylelint --fix', 'prettier --write'],
  '*.md': ['prettier --write'],
};

结合之前的文章，添加对应的脚本命令，如果没看过前几篇，一定要去配置一下。

// package.json
    "lint:eslint": "eslint --max-warnings 0  \"{src,mock,build}/**/*.{vue,js,ts,tsx}\" --fix",

最低0.47元/天解锁文章