Eslint + Prettier + Husky + Commitlint+ Lint-staged 规范前端工程代码规范

1.代码检查工具

1.安装工具

npm i eslint -D
npx eslint --init

2.配置自动格式化

在package.json中添加"lint": "eslint --ext .js,.jsx src --fix"。
执行npm run lint会进行自动修复

执行init完成会生成一个.eslintrc.js的文件

2.代码风格工具

1.项目集成

• npm i prettier eslint-config-prettier eslint-plugin-prettier -D

• 在.eslintrc 中,extend中添加 "prettier" 解决 eslint 和 prettier 的冲突
  

  2.配置 .prettierrc

  1.编配置

  在根目录创建.prettierrc根据自己喜好的编码格式设置规则

  // 自己配置
  {
  "semi": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "singleQuote": true,
  "arrowParens": "avoid"
  }

  2.安装prettier

  

  3.解决配置了.prettierrc不生效问题

  把一下勾选框取消这样就不会优先使用editorconfig配置文件了
  

3.git钩子

Git 有很多的 hooks, 让我们在不同的阶段,对代码进行不同的操作,控制提交到仓库的代码的规范性,和准确性, 以下只是几个常用的钩子

• pre-commit
  描述: 通过钩子函数,判断提交的代码是否符合规范
• commit-msg
  描述: 通过钩子函数,判断 commit 信息是否符合规范
• pre-push
  描述: 通过钩子,执行测试,避免对以前的内容造成影响

4.工具

• husky
  husky 是一个 Git Hook 工具。husky 其实就是一个为 git 客户端增加 hook 的工具。将其安装到所在仓库的过程中它会自动在.git/目录下增加相应的钩子。
  相对于git hooks的优势：1.由于.git文件夹是不会被git跟踪的，所以.git/hooks目录下的hooks钩子无法提交，就不能和他人共享钩子脚本。2.husky可以将git内置的钩子暴露出来，很方便地进行钩子命令注入，而不需要在.git/hooks目录下自己写shell脚本了。可以使用它来lint提交消息、运行测试、lint代码等。当你commit或push的时候。husky触发所有git钩子脚本。
• lint-staged
  使用lint-staged对将要提交的内容进行lint校验，而不是给所有文件进行一次lint
• commitlint
  commit 信息校验工具，多人协作中可以规范commit信息，可以更清晰的查看每一次代码提交记录
• commitizen
  辅助 commit 信息 ,通过预先设置一些固定的选项来规范开发人员提交信息，如下图
  

5.安装流程

1.安装代码检验依赖

• npm i lint-staged husky -D
• npm set-script prepare "husky install"
  执行此命令在package.json中添加脚本
  
• npm run prepare
  初始化husky,将 git hooks 钩子交由,husky执行,会自动生成一个.husky文件夹
  
• pre-commit 执行 npx lint-staged 指令
  npx husky add .husky/pre-commit "npx lint-staged"执行此命令会在.husky下生成pre-commit文件，文件内容如下
  

• 根目录创建 .lintstagedrc.json 文件控制检查和操作方式
  

  {
    "*.{js,jsx,ts,tsx}": ["prettier --write .", "eslint  --fix"],
    "*.md": ["prettier --write"]
  }

  2.安装提交信息依赖

• npm i commitlint -D
• npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
  在.hsuky中增加commit-msg钩子

3.安装辅助提交依赖

• 安装指令和命令行的展示信息
  npm i commitizen cz-conventional-changelog -D
• 在package.json中设置执行git-cz指令
  npm set-script commit "git-cz"
  

• 初始化命令行的选项信息,不然没有选项
  npx commitizen init cz-conventional-changelog --save-dev --save-exact
  
  我自己的项目执行此命令会报错，所以需要手动配置一下
  cnpm install cz-conventional-changelog -D安装后在package.json加入
  

  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }

  4.自定义提交规范

  1,安装工具

  npm i -D commitlint-config-cz cz-customizable

  2.在根元素新增commitlint.config.js

• 

• 增加 .cz-config.js
  

  'use strict';
  module.exports = {
    types: [
        { value: '✨新增', name: '新增:    新的内容' },
        { value: '修复', name: '修复:    修复一个Bug' },
        { value: '文档', name: '文档:    变更的只有文档' },
        { value: '格式', name: '格式:    空格, 分号等格式修复' },
        { value: '♻️重构', name: '重构:    代码重构，注意和特性、修复区分开' },
        { value: '⚡️性能', name: '性能:    提升性能' },
        { value: '✅测试', name: '测试:    添加一个测试' },
        { value: '工具', name: '工具:    开发工具变动(构建、脚手架工具等)' },
        { value: '⏪回滚', name: '回滚:    代码回退' }
    ],
    scopes: [
        { name: '模块1' },
        { name: '模块2' },
        { name: '模块3' },
        { name: '模块4' }
    ],
    // it needs to match the value for field type. Eg.: 'fix'
    /*  scopeOverrides: {
    fix: [
      {name: 'merge'},
      {name: 'style'},
      {name: 'e2eTest'},
      {name: 'unitTest'}
    ]
  },  */
    // override the messages, defaults are as follows
    messages: {
        type: '选择一种你的提交类型:',
        scope: '选择一个scope (可选):',
        // used if allowCustomScopes is true
        customScope: 'Denote the SCOPE of this change:',
        subject: '短说明:\n',
        body: '长说明，使用"|"换行(可选)：\n',
        breaking: '非兼容性说明 (可选):\n',
        footer: '关联关闭的issue，例如：#31, #34(可选):\n',
        confirmCommit: '确定提交说明?(yes/no)'
    },
    allowCustomScopes: true,
    allowBreakingChanges: ['特性', '修复'],
    // limit subject length
    subjectLimit: 100
  };
  

• package.json 中,将原来commit配置,变更为自定义配置
  

6 配置忽略校验文件

在根目录增加.eslintignore设置无需校验的文件

**/node_modules
.eslintrc.js
**/config
**/scripts

7.使用@commitlint/config-conventional规范配置

以上是根据提交信息依赖可视化完成的，如下图

还有一种命令行的方式，使用@commitlint/config-conventional包来规范配置，标识采用什么规范来执行消息校验

• 1.npm i @commitlint/config-conventional -D

• 2.更改package.json中的config

   "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }

• 3 更改commitlint.config.js

  module.exports = {
    extends: ['@commitlint/config-conventional'],
    rules: {
        'type-enum': [
            //第一个参数为level，可选0,1,2，0为disable，1为warning，2为error；第二个参数为应用与否，可选always|never，第三个参数为包含哪些关键字数组
            2,
            'always',
            [
                'build', //构建
                'ci', //持续集成修改
                'docs', //文档更新
                'feat', //新功能
                'fix', //问题修复
                'perf', //性能升级
                'refactor', //功能重构
                'revert', //回滚
                'style', //样式更新
                'test', //单元测试/测试
                'chore' //除上述之外的
            ]
        ],
        'header-max-length': [2, 'always', 72], // 简述限制72字符长度
        'scope-case': [2, 'always', 'lowerCase'], // scope小写
        'subject-empty': [2, 'never'], // subject不为空
        'subject-full-stop': [2, 'never', '.'], // subject结尾不加'.'
        'type-case': [2, 'always', 'lowerCase'], // type小写
        'type-empty': [2, 'never'] // type不为空
    }
  };
  

  执行git commit -m 'test'看效果
  
  执行git commit -m "feat: 新功能"(成功的状态下)
  

7 遇到的问题

• 1.执行npm run commit时 ，报错
  
  解决：
  在.eslintrc.js中加入 parser: '@typescript-eslint/parser'