本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前端自动化 之 Husky+Lint-staged 篇 (三)

目录结构

├─.husky
│  ├─_
│  ├─.gitignore
│  ├─pre-commit
├─.vscode
│  ├─extensions.json
│  └─settings.json
├─library
│  ├─build
│  │  └─plugins
│  │      └─unplugin
│  │      │   └─index.ts
│  │      ├─gzip.ts
│  │      ├─imagemin.ts
│  │      ├─index.ts
│  │      ├─styleImport.ts
│  │      └─svgSprite.ts
│  └─layouts
├─public
└─src
│  ├─assets
│  │  └─svg
│  └─components
│  │   └─HelloWorld.vue
│  └─main.ts
├─.editorconfig
├─.eslintrc.js
├─.gitignore
├─index.html
├─package.json
├─prettier.config.js
├─tsconfig.json
├─tsconfig.node.json
└─vite.config.ts

Husky

在做前端工程化时husky可以说是一个必不可少的工具。husky对 git 的 commit 操作进行校验,husky继承了Git下所有的钩子，在触发钩子的时候。 配合lint-staged在提交代码之前运行 Linting更有意义。通过这样做，您可以确保没有错误进入存储库并强制执行代码样式。husky可以阻止不合法的commit，push等等

cnpm i husky lint-staged -D

package.json 添加配置

要在安装后自动启用 Git 挂钩，请编辑package.json

"scripts": {
    "prepare": "husky install"
 },
 "lint-staged": {
    "*.{js,ts,tsx,jsx,vue}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ],
    "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
      "prettier --write--parser json"
    ],
    "package.json": [
      "prettier --write"
    ],
    "*.md": [
      "prettier --write"
    ]
}

创建一个钩子

要将命令添加到挂钩或创建新命令，请使用husky add <file> [cmd]（不要忘记husky install之前运行）。

npx husky add .husky/pre-commit "npx lint-staged" 

排除异常

执行命令有可能无法创建pre-commit钩子，提示以下信息：

Usage:
  husky install [dir] (default: .husky)
  husky uninstall
  husky set|add <file> [cmd]

解决方案

先创建pre-commit钩子,手动编辑 undefined替换npx lint-staged

npx husky add .husky/pre-commit

尝试提交

git add .husky/pre-commit
git commit -m "Keep calm and commit"

如果lint-staged命令失败，您的提交将自动中止。

package.json 最终配置

{
  "name": "admin-risun-vite",
  "version": "1.0.0-beta.1",
  "private": true,
  "author": {
    "name": "SunHongYu",
    "email": "17600616235@163.com",
    "url": "https://juejin.cn/"
  },
  "description": "Admin-Risun 前端框架",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "npm run build && vite preview",
    "preview:dist": "vite preview",
    "lint:eslint": "eslint {library,mock,src}/**/*.{vue,ts,tsx} --fix",
    "lint:prettier": "prettier {library,src,mock}/**/*.{html,vue,css,sass,scss,ts,md} --write",
    "clean": "rimraf node_modules",
    "prepare": "husky install"
  },
  "dependencies": {
    "element-plus": "^2.0.1", 
    "vue": "^3.2.30"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.10.1",
    "@typescript-eslint/parser": "^5.10.1",
    "@vitejs/plugin-legacy": "^1.7.0",
    "@vitejs/plugin-vue": "^2.2.0",
    "@vue/compiler-sfc": "^3.2.30",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^10.0.0",
    "eslint": "^8.7.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.3.0",
    "husky": "^7.0.4",
    "lint-staged": "^12.3.3",
    "prettier": "^2.5.1",
    "svg-sprite-loader": "^6.0.11",
    "typescript": "^4.5.4",
    "unplugin-auto-import": "^0.5.11",
    "unplugin-vue-components": "^0.17.18",
    "vite": "^2.8.0",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-imagemin": "^0.6.1",
    "vite-plugin-style-import": "^1.4.1",
    "vite-plugin-svg-icons": "^2.0.1",
    "vite-plugin-vue-setup-extend": "^0.4.0",
    "vite-plugin-style-import": "^1.4.1",
    "vue-eslint-parser": "^8.2.0",
    "vue-global-api": "^0.4.1",
    "vue-tsc": "^0.31.1"
  },
  "lint-staged": {
    "*.{js,ts,tsx,jsx,vue}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ],
    "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
      "prettier --write--parser json"
    ],
    "package.json": [
      "prettier --write"
    ],
    "*.md": [
      "prettier --write"
    ]
  }
}