vue3项目的创建和git提交规范，eslint ，cz，hooks

烟雨k

已于 2022-10-14 09:25:25 修改

阅读量1.3k

点赞数 3

文章标签： git 前端 vue.js

于 2022-10-08 14:07:33 首次发布

本文链接：https://blog.csdn.net/woaijskxh/article/details/127206963

版权

ESLint
Commitizen
Git Hooks
(--forece 强制安装)`

vue create （项目文件名）

选择 ’Manually celect features‘ //手动配置

选择需要的配置项

选择vue3项目

是否选择镜像

选择scss

选择eslint+Standard config //使用eslint标准代码格式化方案

后，两个都选，保存时提交，都进行eslint

选择 In dedicated config files //单独配置文件

是否存储预设 //N /选择否

完成后等待片刻，创建基础项目框架

安装插件prettier

配置格式化

git cz提交

commitizen

commitizen用git进行提交规范，方便多人共同开发时，代码格式的统一

安装依赖 commitizen

npm install -g commitizen@4.2.4

安装依赖 cz-customizable

npm i cz-customizable@6.3.0 --save-dev

添加以下配置到 package.json 中

 "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  }

项目根目录下创建 .cz-config 自定义提示文件

module.exports = {
  // 可选类型
  types: [
    { value: 'feat', name: 'feat:新功能' },
    { value: 'fix', name: 'fix:修复' },
    { value: 'docs', name: 'docs:文档变更' },
    { value: 'style', name: 'style:代码格式(不影响代码运行的变动)' },
    { value: 'refactor',name: 'refactor: 重构(既不是增加feature，也不是修复bug)'
    },
    { value: 'perf', name: 'perf:性能优化' },
    { value: 'test', name: 'test:增加测试' },
    { value: 'chore', name: 'chore:构建过程或辅助工具的变动' },
    { value: 'revert', name: 'revert:回退' },
    { value: 'build', name: 'build:打包' }
  ],
  // 消息步骤
  messages: {
    type: '请选择提交类型:',
    customScope: '请输入修改范围(可选):',
    subject: '请简要描述提交(必填):',
    body: '请输入详细描述(可选):',
    footer: '请输入要关闭的issue(可选):',
    confirmCommit: '确认使用以上信息提交？(y/n/e/h)'
  },
  // 跳过问题
  skipQuestions: ['body', 'footer'],
  // subject文字长度默认是72
  subjectLimit: 72
}

现在就可以使用 git cz 替换 git commit -m “提交信息”

阻止commit 提交

安装依赖

npm install --save-dev @commitlint/config-conventional@12.1.4 @commitlint/cli@12.1.4

创建 commit.config.js文件

echo "module.exports = {extends: ['@commitlint/config-conventional']}" >commitlint.config.js

打开 commitlint.config.js ，增加配置项

module.exports = {
  // 继承的规则
  extends: ['@commitlint/config-conventional'],
  // 定义规则类型
  rules: {
    // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
    'type-enum': [
      2,
      'always',
      [
        'feat', // 新功能 feature
        'fix', // 修复 bug
        'docs', // 文档注释
        'style', // 代码格式(不影响代码运行的变动)
        'refactor', // 重构(既不增加新功能，也不是修复bug)
        'perf', // 性能优化
        'test', // 增加测试
        'chore', // 构建过程或辅助工具的变动
        'revert', // 回退
        'build' // 打包
      ]
    ],
    // subject 大小写不做校验
    'subject-case': [0]
  }
}

git Hooks

安装依赖

npm install husky@7.0.1 --save-dev

创建文件 .husky 文件夹

npx husky install

创建commit-msg文件和pre-commit文件

在commit-mag中配置

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

npx --no-install commitlint --edit ""

在pre-commit中配置

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

npx lint-staged

在package.json 中生成 prepare 指令

npm set-script prepare "husky install"

添加 commitlint 的 hook 到 husky 中，并指令在commit-msg 的 hooks 下

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

至此不规范的代码将不再可提交

提交时自动进行eslint格式规范

安装依赖

cnpm install --save-dev prettier husky lint-staged eslint

在项目根目录新建一个 .prettierrc 文件。内容为

{
    // 代码换行长度
    "printWidth": 200,
    // 代码缩进空格数
    "tabWidth": 2,
    // 使用制表符缩进而不是空格缩进
    "useTabs": true,
    // 代码结尾是否加分号
    "semi": false,
    // 是否使用单引号
    "singleQuote": true,
    // 对象大括号内两边是否加空格 { a:0 }
    "bracketSpacing": true,
    // 单个参数的箭头函数不加括号 x => x
    "arrowParens": "avoid"
}

不允许拥有注释，保存时删除注释

关闭摸一下eslint校验

找到.esilnerc.js文件