记录husky + lint-staged 控制前端代码规范

懒惰的大螃蟹
230 阅读6分钟

为什么使用

规范是提高团队协作的一种约定，好的规范可以提升团队工作效率。但是规范中的条例有很多，想要一下子全都记住并在开发过程中一一恪守无疑是有难度的。

本文将带你使用husky + lint-staged工具，来帮助代码提交前进行校验并格式化

具体方案

Tip : 代码格式化工具使用eslint，避免prettier冲突。

不引入eslint-config-prettier为了保留eslint-plugin-vue的vue规范校验规则。

  1. 将项目内配置文件添加至项目根目录下

将附件中lintProjectConfig.zip解压至项目目录下

根据目录结构，替换lint/huskyInstall.js、package.json中的内容

原因: husky默认会以package.json所在路径作为根目录查找.git文件夹，并校验当前根目录是否存在.git文件夹。下放case2的情况下，使用默认配置无法正常husky install，需要调整一下配置

case 1: .git文件夹与项目同一层级

project

-- .git

--package.json

配置

package.json

添加script "huskyInstall": "husky install"

huskyInstall.js

const exec = require('child_process').execSync;
const fs = require('fs');


try {
  // 安装husky脚本
  if (!fs.existsSync('.husky/_')) {
    exec('yarn huskyInstall');
  }

  // 生成pre-commit git钩子脚本
  if (!fs.existsSync('.husky/pre-commit')) {
    exec('yarn husky add .husky/pre-commit "yarn lint-staged"');
  }
} catch (e) {
  console.log('err', e);
}

case 2: .git文件夹位于项目父目录

project

-- .git

-- frontend

--package.json

配置

package.json

添加script "huskyInstall": "cd .. && husky install frontend/.husky"

注意: 如果根目录文件夹叫frontend-desk, 则需要改为:

"huskyInstall": "cd ../ && husky install frontend-desk/.husky"

huskyInstall.js

const exec = require('child_process').execSync;
const fs = require('fs');


try {
  // 安装husky脚本
  if (!fs.existsSync('.husky/_')) {
    exec('yarn huskyInstall');
  }

  // 生成pre-commit git钩子脚本
  if (!fs.existsSync('.husky/pre-commit')) {
    exec('yarn husky add .husky/pre-commit "cd ./frontend && yarn lint-staged"');
  }
} catch (e) {
  console.log('err', e);
}
  1. 项目初始化时下载以下两个核心依赖

yarn add husky@6.0.0 -D

yarn add lint-staged@11.1.2 -D

  1. 在控制台执行node ./lint/huskyInstall.js

工作流程

紧急情况

  1. 遇到紧急情况，跳过校验可使用命令 git commit --no-verify -m '信息'

QA

1、husky通过修改.git文件中的config中的hooksPath,是否会影响远程仓库从而影响其他开发者的hooks？

可以通过将.git文件夹加入根目录的.gitignore文件中，这样只会改变本地的仓库的hook。

2、husky改变hooks后是否会导致后端代码无法提交？

前提条件: 目前huksy的初始化设置在前端项目npm包依赖安装完成后的钩子下，对应着package.json中的prepare脚本钩子中执行。

分下面2种情况：

(1) 本地仅开发后端代码。这种情况下本地不会安装前端依赖从而不会触发husky初始化，因此无影响。

(2) 本地开发后端代码并需要本地启动前端服务。该情况下会触发husky初始化，在提交代码时会执行husky重新定义的gitHook，因此只要在前端的校验脚本中去指定过滤掉后端项目的根目录文件夹放行，就可以达到不影响后端代码提交的效果。

相关插件说明

ESLINT

官网: eslint.cn/docs/user-g…

目前前端开发最流行的代码校验插件

使用方式

  1. 项目中安装eslint的npm依赖。可通过脚本命令./node_modules/.bin/eslint进行代码校验

  2. Vscode等编辑器中安装扩展程序，同时以需要依赖eslint依赖包。通过setting.json中配置扩展程序配置如文件改动保存时自动校验并修复等

配置

  1. 文件: 可以在项目根目录下创建.eslintrc.[js、json]文件、.eslint.config文件、package.json中创建eslintConfig属性。--- 文件配置方式居多

  2. 配置文件优先级(由高到低)

.eslintrc.js

.eslintrc.yaml

.eslintrc.yml

.eslintrc.json

package.json

  1. 如果同一目录下 .eslintrc 和 package.json 同时存在，.eslintrc 优先级高会被使用，package.json 文件将不会被使用。

  2. Eslint一旦发现配置文件中存在root:true，将会停止往父级目录寻找配置文件

  3. 注释: 可以通过JS注释将配置信息嵌入至代码源文件中。如:

    /* eslint eqeqeq: "off", curly: "error" */

extend

eslint-plugin-vue 用于校验vue文件中的规范，如attribute-order, component-options-order等

Prettier

官网: prettier.io/docs/en/ind…

目前前端开发比较流行的代码格式化插件

使用方式

  1. 下载prettier依赖包

  2. vscode下载prettier插件，并将prettier设置成编辑器默认格式化工具

配置

  1. 根目录创建文件.prettierrc.js管理prettier配置

与Eslint集成

  1. eslint-config-prettier 快速关闭与prettier冲突的eslint规则，需要配置在eslintrc.js中

  2. prettier-eslint 能够在执行完prettier后立即执行eslint --fix。Vetur中有内嵌了prettier-eslint

Vetur

VSCode中Vue开发最流行的扩展程序。能够对vue文件进行格式化、高亮、代码校验

lint: eslint-plugin-vue

formatter: prettier, prettier-eslint, prettyhtml, stylus-supermacy, vscode-typescript, sass-formatter

使用方式

vscode中通过扩展程序商店下载Vetur安装

Husky

官方文档: typicode.github.io/husky

husky可以让我们向项目中方便添加git hooks，可以在hooks添加一些事件。如pre-commit钩子下可以进行代码检查， commit下校验commit message

使用方式

  1. 安装husky npm installl -D husky

  2. 在npm脚本中添加下列脚本，保证首次yarn/npm install安装完毕后会自动安装husky

    { "scripts": { "prepare": "husky install" } }

    // husky install做了两件事 // 1. 安装husky启动脚本 // 2. 将.git中的hooks目录指向.husky目录，从而当发生git操作时，触发的是.husky中的git钩子配置文件

  3. 通过husky add添加git钩子发生时执行脚本配置文件

    // 以yarn为包管理器为例 // 添加pre-commit钩子配置文件， 在git commit操作完成前执行npm run test脚本 husky add .husky/pre-commit "npm run test"

Lint-staged

官方文档: github.com/okonet/lint…

推荐使用新

Lint-staged是一个在git暂存文件上运行linters的工具。配合husky可以在本地暂存区代码提交前，对暂存区代码做一些操作

以11.1.2版本为例，lint-staged执行流程

命令行解释

git stash create 创建一个stash对象,返回一个stashId。 此时stash不会进入stash list

git stash store --m stashId 将当前工作区的内容(add或未add过的)保存至stashId存储区

giit diff --name-only --cached 比较暂存区(add后)与本地版本库(commit后)文件差异，只显示有差异的文件名

git reset HEAD --hard 将工作区、暂存区和HEAD保持一致

git stash apply 将工作区应用stash存储内容，不会在stash list中删除改版本stash

git stash drop refs/stash@{0} 根据stash index删除stash list中对应的stash

使用方式

  1. 下载lint-staged依赖包

  2. 通过yarn lint-staged命令行调用

配置

  1. 在package.json中配置lint-staged属性
  2. 创建.lintstagedrc文件。支持.js、.json、.yaml、.yml
avatar
文章
阅读
粉丝