1. vue-cli搭建vue3脚手架+eslint+premitter+git-hooks

95 阅读1分钟

1. vue-cli 脚手架

cli.vuejs.org/zh/guide/cr…

2.eslint+prettier

配置 prettier 规则`.prettierrc

{
  // 不尾随分号
  "semi": false,
  // 使用单引号
  "singleQuote": true,
  // 多行逗号分割的语法中,最后一行不加逗号
  "trailingComma": "none"
}

两者冲突的暂直接忽略处理,具体问题具体分析

3.约定式提交规范

npm install  commitizen@latest -g
npm i cz-customizable@latest --save-dev

package.json 配置

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

配置.cz-config.js

此时使用 git cz 代替 git commit 就可以限制 git 提交语法规范

4.git hooks

** git 在执行某些事件之前或者之后的操作**

git-scm.com/docs/githoo… 主要使用两个钩子

  1. commit-msg:可以用来规范化标准格式,并且可以按需指定是否要拒绝本次提交
  2. pre-commit:会在提交前被调用,并且可以按需指定是否要拒绝本次提交

安装依赖

npm install --save-dev @commitlint/config-conventional@12.1.4 @commitlint/cli@12.1.4
  1. 创建 commitlint.config.js 文件,确保是 UTF-8 格式 echo "module.exports = {extends: ['@commitlint/config-conventional']}" > 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]
     }
   }
npm install husky@latest --save-dev
npx husky install
npm pkg set scripts.prepare="husky install"
npm run prepare
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

5.提交时代码规范

npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src"

6.自动修复格式错误

配置package.json

"lint-staged": {
       "src/**/*.{js,vue}": [
         "eslint --fix",
         "git add"
       ]
     }

修改.husky/pre-commit文件

#!/bin/sh
   . "$(dirname "$0")/_/husky.sh"
   
   npx lint-staged