关于eslint:Eslint-Prettier-Husky-Commitlint-Lintstaged-规范前端工程代码规范

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'