1.代码查看工具

1.装置工具

npm i eslint -Dnpx 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'