前端——代码规范化（多人合作开发）

前言

当前，前端项目支持代码规范校验、代码格式化已经必不可少，同时需要支持代码提交前对代码格式校验预检查，这里提供一份最简单的配置供大家参考。

每个包代表了什么

在配置之前，先了解用实现代码规范化、git 提交信息校验用到的包。

1.代码格式规范相关

• eslint：代码格式校验
• prettier：prettier 主要是为了格式化代码，而在没有 prettier 之前，是用 eslint —fix和 编辑器自带代码格式来进行代码格式化的。
• stylelint：css样式格式校验

2.代码提交规范相关

• lint-staged：一个在git暂存文件上运行linters的工具，检查本次修改更新的代码，并自动修复并且可以添加到暂存区
• husky: 是一个Git Hook 工具。将其安装到所在仓库的过程中它会自动在 .git/ 目录下增加相应的钩子实现对应的功能，这里我们通过使用husky来监测commit-msg钩子，完成提交信息校验，监测 pre-commit 钩子，完成代码校验。
• pre-commit：git hooks的钩子，在代码提交前检查代码是否符合规范，不符合规范将不可被提交
• commit-msg：git hooks的钩子，在代码提交前检查commit信息是否符合规范
• commitizen：git的规范化提交工具，帮助你填写commit信息，符合约定式提交要求
• commitlint：用于检测提交的信息。

3.相关问题

　　git提交：

　　　　1.解决windows与mac，CRLF与LF的冲突

　　　　2.约定提交注释的规范：

 　　　　　　npm install cz-customizable

　　　　　　 在package.json中添加

"scripts": {

    "commit": "git add . & git cz"

  }，

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

　　　　　　在根目录下新建:    .cz-config.js    文件
　　　　　　并输入一下内容：

module.exports = {
    types: [
      { value: 'fix', name: 'fix:      优化，或修复一个bug' },
      { value: 'feat',name: 'feat:     新增一个功能',},
      { value: 'update',name: 'update:   代码打包提交',},
      { value: 'build', name: 'build:    变更项目构建或外部依赖（如webpack、npm等）'},
      {value: 'perf',name: 'perf:     性能优化',},
      { value: 'docs',name: 'docs:     文档变更',},
      {value: 'revert',name: 'revert:   代码回退'},
      {value: 'refactor',name: 'refactor: 代码重构',},
      {value: 'test',name: 'test:     添加一个测试'},
    ],
    messages: {
      type: '选择一种你期望的提交类型(type):',
      // scope: '选择一个更改的范围(scope) (可选):',
      // used if allowCustomScopes is true
      // customScope: 'Denote the SCOPE of this change:',
      subject: '输入本次commit记录说明:\n',
      // body: '长说明，使用"|"换行(可选)：\n',
      // breaking: '非兼容性说明 (可选):\n',
      // footer: '关联关闭的issue，例如：#31, #34(可选):\n',
      confirmCommit: '确定提交说明?',
    },
    // ? 设置更改的范围
    // scopes: [
    //   { name: 'api' },
    //   { name: 'bug' },
    //   { name: 'optimization' },
    //   { name: '添加其它' }
    // ],
    skipQuestions: ['scope', 'body', 'breaking', 'footer'],
    allowBreakingChanges: [
      'fix',
      'feat',
      'update',
      'refactor',
      'perf',
      'build',
      'revert',
    ],
    subjectLimit: 100,
  };