[JavaScript知识库]如何在项目中使用git hook规范化代码

什么是Git Hooks？

参考资料：官方文档

简单的讲，所谓Hook，一般就是在特定时期提供一个可介入自定义的脚本；

Husky

大多数前端程序员对编写shell脚本是不熟悉的，这个时候就有个神奇的工具Husky来帮助我们实现Git Hooks的使用需求；

npm install husky -D

// 旧版本
{
  ...,
  "husky": {
    "hooks": {
      "pre-commit": "npm run test"
    }
  }
}

// 新版本
{
  "scripts": {
    "prepare": "husky install"
  },
  // 命令行执行 npx husky add .husky/pre-commit "npx lint-staged"
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "npm run lint",
      "git add"
    ]
  }
}

Lint-staged

lint-staged 是一个在git暂存文件上运行linters的工具

如果我们想在husky执行了npm run test之后再去做格式化，或者将格式化之后的代码添加到暂存区，这个时候Husky就不够用了，这个时候又有个神奇的工具Lint-staged来帮助我们实现该需求；

npm install lint-staged -d

{
  ...,
  // 旧版本的husky需要在这里配置pre-commit属性，新版本不用
  "husky": {
    "hooks": {
      "pre-commit": "npm run precommit"
    }
  },
  "lint-staged": {
    "*.js": [
      "eslint",
      "git add"
    ]
  }
}

在项目中集成ESLint

eslint的安装可以参考这篇文章：【前端工程化】六：前端规范化标准及工具ESLint等基本使用

这里我们在scripts中配置执行eslint的命令以便后续使用

{
  "scripts": {
    "lint": "eslint ./src/**/*.{js,jsx,vue,ts,tsx} --fix",
  }
}

ESLint-编辑器集成

只要安装了ESLint插件并启用了这个插件，它就会自动查找项目中的eslint配置规范，并且给出验证提示，同时可以在编辑器中配置使用eslint来格式化代码；

在git commit的时候验证eslint

lint的目的是为了防止我们写出不规范的代码，应当把我们的lint命令加入到开发构建的过程中，强制要求遵守规范

npm install lint-staged husky -D

{
  "scripts": {
    "lint": "eslint ./src/**/*.{js,jsx,vue,ts,tsx} --fix",
    "prepare": "husky install"
  }
}

“prepare”: “husky install” 是npm scripts的钩子，只要我们执行npm install安装依赖就会自动执行husky install将husky配置到本地的git仓库当中；这样做的目的是为了项目中其他成员初始化项目时可以将husky一并配置；

{
  "scripts": {
    "prepare": "husky install"
  },
   // 命令行执行 npx husky add .husky/pre-commit "npx lint-staged"
   // 在git的pre-commit添加钩子，执行npx lint-staged,执行lint-staged工具
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "npm run lint",
      "git add"
    ]
  }
}

“lint-staged"配置的”.{js,jsx,vue,ts,tsx}"* 的意思是当我们去commit的时候.js,jsx,vue,ts,tsx文件资源的时候去执行"npm run lint", "git add"命令，这是我们使用lint-staged的基本操作；

在开发和构建的时候进行验证

• webpack可以通过配置eslint-loader，参考【前端工程化】六：前端规范化标准及工具ESLint等基本使用
  

• vite可以下载插件vite-plugin-eslint来配置，这里贴出我的vite配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'
import vueJsx from '@vitejs/plugin-vue-jsx'
import path from 'path'
// path为node中的模块，下载@types/node 补充node中的类型声明

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        // 将eslint加入构建过程，报错的时候命令行和浏览器页面也会报错
        eslintPlugin({
            // 配置选项
            cache: false // 禁用eslint缓存
        }),
        vueJsx({
            // options are passed on to @vue/babel-plugin-jsx
        })
    ],
    resolve: {
        alias: {
            '@': path.join(__dirname, 'src')
        }
    },
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: '@import "@/styles/variables.scss";@import "@/styles/common.scss";'
            }
        }
    },
    server: {
        proxy: {
            '/admin': {
                target: 'https://shop.fed.lagou.com/api/',
                changeOrigin: true
                // rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    }
})

这样在开发构建的时候如果不符合规范会在页面报错

GitCommit规范

• 下载commit规范工具： npm install -g @commitlint/cli @commitlint/config-conventional

• 配置commit规范文件：新建commitlint.config.js文件

  这里我们使用默认的规范

  // commitlint.config.js
  module.exports = {
      extends: ['@commitlint/config-conventional']
  }
  

• 使用husky添加一个commit msg检查的钩子：npx husky add .husky/commit-msg 'npx --no -- commitlint --edit $1'

总结

我们在项目初始化的时候会配置代码规范，其中使用到了eslint，husky，lint-staged，commitlint等工具；

首先我们配置了eslint的配置文件，会自动集成进下载了eslint插件的vscode编辑器；

然后我们需要在git commit 的时候去调用eslint来验证规范，以保证提交到仓库的代码符合规范；

同时需要在开发和构建的时候调用eslint来验证规范，已保证在开发构建的过程中不符合规范的书写会直接在页面报错；

使用husky的作用是来使用git hooks的钩子的，使用lint-staged是来操作暂存区文件的，而使用commitlint是为了验证commit msg规范的；

所以我们想要在git commit的时候去调用eslint的时候，配置完了lint-staged要去使用命令行操作husky给git的pre-commit添加钩子；

在我们配置完了commitlint的时候，需要使用命令行操作husky给git的commit msg添加钩子；