首先

其实有时候我不太想写博客，因为我感觉我写的内容，都是从其他文章学习来的，而且写的也不是很有深度，所以，就感觉没有写的必要了。但是最近思考到，我写的这东西，可能有些人是第一次见到这个技术，这里会让你知道这个是什么。想深入研究就需要自己查找资料查看了。

项目地址

husky

Husky improves your commits and more 🐶 woof!

You can use it to lint your commit messages, run tests, lint code, etc... when you commit or push. Husky supports all Git hooks.

用来监听你git的操作。常见的就是监听你git 的commit操作，我们操作也都是对commit进行监听。

安装

npm install husky --save-dev

script

在package.json文件的scripts加入这条语句。

"prepare": "husky install",

执行

npm run prepare

结果

项目中出现了 .husky/_ 文件夹以及下面的文件。

Lint-staged

可以监听到你commit的代码，进行eslint校验与prettier的代码格式化矫正。

安装

npm install lint-staged --save-dev

package.json

script中加入

 "lint:lint-staged": "lint-staged",

在script中添加

 "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
      "prettier --write--parser json"
    ],
    "package.json": [
      "prettier --write"
    ],
    "*.vue": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{scss,less,styl,html}": [
      "prettier --write"
    ],
    "*.md": [
      "prettier --write"
    ]
  },

.husky

.husky文件夹中新建pre-commit文件

. "$(dirname "$0")/_/husky.sh"

[ -n "$CI" ] && exit 0

# Format and submit code according to lintstagedrc.js configuration
npm run lint:lint-staged

那个$CI 是项目持续集成环境变量，如果没有可删去。

流程

当我们commit 时候 .husky监听到就会执行pre-commit文件 -> 执行npm run lint:lint-staged ->

"lint-staged" 对象的内容。这个"lint-staged" 对象下面有 Prettier 和 Eslint 所以后面我们需要安装它们。

Prettier

代码样式的规范校验。

安装

npm install prettier --save-dev

prettier.config.js

项目下新建一个prettier.config.js文件。

module.exports = {
  "printWidth": 80, // 每行代码长度（默认80）
  "tabWidth": 2, // 每个tab相当于多少个空格（默认2）
  "useTabs": false, // 是否使用tab进行缩进（默认false）
  "singleQuote": true, // 使用单引号（默认false）
  "semi": true, // 声明结尾使用分号(默认true)
  "trailingComma": "all", // 多行使用拖尾逗号（默认none）
  "bracketSpacing": true, // 对象字面量的大括号间使用空格（默认true）
  "jsxBracketSameLine": false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
  "arrowParens": "avoid" // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid）
};

如需要其他配置查看官网

.prettierignore

项目下新建一个.prettierignore文件。 prettier校验忽略的文件。

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

ESLint

代码的检验

安装

npm install eslint --save-dev

运行

npx eslint --init

结果

第一步

To check syntax only

只检查语法
To check syntax and find problems

检查语法和查找错误
To check syntax, find problems, and enforce code style

检查语法、查找错误并强制代码风格

进入第二个

第二步

What type of modules does your project use?

项目使用的模版规范

选择第一个

第三步

Which framework does your project use?

选择你使用的框架

我是使用Vue的就选择了Vue

第四步

Does your project use TypeScript?

是否开启TS

刚刚我项目建了一个Vue3 + js的所以就No

第五步

Where does your code run?

你的代码跑在什么环境。浏览器与 Node

选择Browser

第六步

What format do you want your config file to be in?

配置文件的类型

我选择了js

现在是否用npm 安装刚刚选择的。

选择yes

最后

有些人第一步可能选择了第三个，那么就会多出几个选择样式的问题。代码风格和使用规范之类的。

如果有想了解eslint的配置项的学习可以看下不以规矩，不能成方圆-彻底搞懂 ESLint 和 Prettier

因为我使用的是Vue3的项目有些编译会出问题所以我又有所改动。

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    'vue/setup-compiler-macros': true,
  },
  extends: ['eslint:recommended', 'plugin:vue/vue3-recommended'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['vue'],
  rules: {},
};

rules

 rules: {
    'new-cap': 0,
  },

0 代表关闭 1 警告 2 错误

当想让eslint 排除某行的校验

// eslint-disable-line no-invalid-this

这里的 no-invalid-this 指的是

commitlint

当我们commit 写一些message，这个就是来规范我们的message结构。官网

安装

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

使用

在.husky 中新建一个commit-msg

. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit "$1"

项目目录下建commitlint.config.js

module.exports = {
  ignores: [commit => commit.includes('init')], // 忽略带有init的信息
  extends: ['@commitlint/config-conventional'],
  rules: {
    'body-leading-blank': [2, 'always'], // body换行
    'footer-leading-blank': [1, 'always'],  // footer 换行
    'header-max-length': [2, 'always', 108], // 头部的字数
    'subject-empty': [2, 'never'], // <subject> 不能为空 加never 应该表示可以为空(个人理解)
    'type-empty': [2, 'never'],
    'subject-case': [0],
    'type-enum': [
      2,
      'always',
      [
        'feat',  // 新功能
        'fix',  // 修改bug
        'perf', // 性能优化
        'style',  // 代码结构化修改
        'docs', // 文档和注释
        'test', // 测试相关
        'refactor', // 重构
        'ci', // 持续集成
        'chore', // 依赖更新/脚手架配置修改等
        'revert',  // 撤销修改
        'wip', // 正在开发
        'workflow', // 工作流
        'types', // 类型定义文件更改
      ],
    ],
  },
};

规则前面的可以使用
0 = disables the rule
1 = warning
2 = error

辅助工具 Commitizen

安装

npm install commitizen -D

npx commitizen init cz-conventional-changelog --save-dev --save-exact

使用 package.json的script中加入

"commit": "cz",

当你 git add . 结束可以npm run commit 根据步骤就可以规范你的提交。

报错

当没有出现下方选择

可以自己向 package.json 添加

    "config": {
        "commitizen": {
          "path": "cz-conventional-changelog"
        }
      }

或者生成 .czrc

{
  "path": "cz-conventional-changelog"
}

结束

感谢你看到最后，毕竟我感觉自己写的不咋滴，希望对你有所帮助吧。可以参考下面的项目。