从零开始搭建前端项目二（husky+lint-staged）

从零开始一步一步搭建一个精简的前端项目。

技术栈：Vue3.0 + Vite + TypeScript + Element Plus + Vue Router + axios + Pinia

规范化：Eslint + Airbnb JavaScript Style + husky + lint-staged

包管理：yarn

历史内容

从零开始搭建前端项目一（Vue3+Vite+TS+Eslint+Airbnb+prettier）

本章内容

使用husky和lint-staged保证提交到Git的代码都是统一的代码约束和风格。

husky

功能：关联Git的钩子函数，在执行相关git hooks时进行自定义操作，比如在提交前执行Eslint校验，提交时校验commit message等等。

安装

官网地址：Husky - Git hooks

使用Automatic (recommended)方式安装

npx husky-init
yarn

安装完成后在项目目录下新增了.husky文件夹。

配置

在package.json文件中scripts同级新增husky

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged" // 后续安装
    }
  },

lint-staged

功能：过滤出 Git 代码暂存区文件的工具；如果对整个项目的代码做一个检查，可能耗时很长，导致项目改动很大。所以可以只针对暂存区文件做检查。

安装

官网地址：GitHub - okonet/lint-staged: 🚫💩 — Run linters on git staged files

# lint-staged
yarn add lint-staged --dev

配置

在package.json文件中scripts同级新增lint-staged

"lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "yarn lint",
      "prettier --write",
      "git add"
    ]
  }

因为这里ESLint需要全局执行，所以ESLint也需要全局安装。

yarn global add eslint

测试

在终端推送git时，可以看到git hooks操作具体内容，与lint-staged配置的命令一致。

--- 2022.02.28更新 ---

commitlint

commitlint是git commit校验约束工具，帮助我们编写commit message时更规范。

安装

yarn add @commitlint/cli @commitlint/config-conventional --dev 

配置

配置指令

yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'

根目录创建commitlint.config.js文件

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'build',
        'chore',
        'ci',
        'docs',
        'feat',
        'fix',
        'perf',
        'refactor',
        'revert',
        'style',
        'test',
      ],
    ],
  },
};

提交代码时的信息。

"feat: 配置commitlint功能"

小结

使用husky + lint-staged实现了在提交代码前进行ESLint校验，从而保证提交到Git的代码都是统一的代码约束和风格。