大家好，我是Derek。

今天给大家介绍一下基于 vue-cli 脚手架生成的前端工程的代码格式和提交规范的配置流程。

代码格式规范

ESLint

ECMAScript/JavaScript 的代码检查和格式化工具。

    module.exports = {
      // ESLint 规则作用的范围
      root: true,
      // 启用 ESLint 检测的环境
      env: {
        node: true
      },
      // ESLint 基础配置继承的配置
      extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
      // 解析器
      parserOptions: {
        parser: 'babel-eslint'
      },
      /**
       * 需要修改的启用规则和相应的错误级别
       * "off" 或 0 关闭规则
       * "warn" 或 1 开启规则，使用警告级别的错误（不会导致程序退出）
       * "error" 或 2 开启规则，使用错误级别的错误（程序会退出）
       * */ 
      rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
      }
    }

Prettier

代码风格格式化工具

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

Prettier 和 ESLint 配合保存自动格式化代码

• VSCode
  • 设置 保存自动格式化代码
  • 设置 TabSize 为 2
  • 设置 Prettier 为默认格式化工具
• ESLint 和 Prettier 冲突
  • .eslintrc.js 文件的规则字段添加 space-before-function-paren': 'off'

Git提交规范

约定式提交规范

约定式提交规范是一种基于提交信息的轻量级约定。 它提供了一组简单规则来创建清晰的提交历史； 这更有利于编写自动化工具。 通过在提交信息中描述功能、修复和破坏性变更， 使这种惯例与 SemVer 相互对应。

    <type>[optional scope]: <description>

    [optional body]

    [optional footer(s)]

    译文：

    <类型>[可选 范围]: <描述>

    [可选 正文]

    [可选 脚注]

commitizen

当您使用 Commilizen 提交时，其会提示您填写所有必填的提交字段并生成相应的提交信息。

1.全局安装 Commitizen

    npm install -g commitizen

2. 安装 cz-customizable

npm i cz-customizable --save-dev

3.在 package.json 中添加

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

4.项目根目录下创建 .cz-config.js

module.exports = {
  // 可选类型
  types: [
    { value: 'feat', name: 'feat: 新功能' },
    { value: 'fix', name: 'fix: 修复一个bug' },
    { value: 'docs', name: 'docs: 文档变更' },
    { value: 'style', name: 'style: 代码格式(不影响代码运行的变动)' },
    { value: 'conflict', name: 'conflict: 修复代码冲突' },
    { value: 'font', name: 'font: 字体文件更新' },
    { 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: 影响构建系统或外部依赖项的更改(如:webpack、npm)' }
  ],
  // 交互式消息提示步骤
  messages: {
    type: '请选择提交类型:',
    customScope: '请输入修改范围(可选):',
    subject: '请简要描述提交(必填):',
    body: '请输入详细描述(可选):',
    footer: '请输入要关闭的issue(可选):',
    confirmCommit: '确认使用以上信息提交？(y/n/e/h)'
  },
  // 跳过问题
  skipQuestions: ['body', 'footer'],
  // subject文字长度默认是72
  subjectLimit: 72
}

5. 使用 git cz 代替 git commit 提交代码

Git Hooks

Git 在提交和合并等操作前后触发额外的操作

commit-msg

可以用来规范化标准格式，并且可以按需指定是否拒绝本次提交。

pre-commiy

会在提交前被调用，并且可以按需指定是否要拒绝本次提交。

commitlint

commitlint 用于检查提交的信息是否符合约定式规范

1.安装依赖

npm install -g @commitlint/cli @commitlint/config-conventional

2.项目根目录下创建 commitlint.config.js

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

3.打开 commitlint.config.js 增加自定义规则

module.exports = {
  // 继承的规则
  extends: ['@commitlint/config-conventional'],
  // 自定义规则
  roles: {
    // type 的类型定义：表示 git 提交的 type 必须以下类型范围之内
    'type-enum': [
      // 当前验证的错误级别
      2,
      // 再什么情况下进行验证
      'always',
      // 反省内容
      ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'chroe', 'revert', 'build']
    ],
    // subject 大小写不做校验
    'subject-case': [0]
  }
}

注意：保存的编码格式应为 UTF-8

husky

现代原生 Git Hooks 工具

1.安装 husky

npm install husky --save-dev

2.启动 Git Hooks

npx husky install

3.编辑 package.json，安装后自动启动 Hooks

npm pkg set scripts.prepare="husky install"

4.运行 prepare 指令

npm run prepare

5.添加 hooks

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src"

lint-staged

lint-staged 可以让当前的代码检查只检查本次修改更新的代码，并在出现错误的时候，自动修复并推送

1.修改 package.json

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

2.修改 pre-commit

npx eslint --ext .js,.vue src 
-> 
npx lint-staged