一、配置ESlint

1.1 安装eslint

npm install eslint -D

1.2 初始化eslint,生成配置文件

npx eslint --init

1.3 在编辑器安装ESlint插件

1.4 通过执行命令检测文件代码规范

# ./ 为需要检测的文件路径
npx eslint ./

二、配置husky

2.1 安装husky

npm install husky -D

2.2 在 package.json 中加入prepare脚本,每次在 npm i 安装完依赖后都会执行这个命令

npm set-script prepare "husky install"
npm run prepare

2.3 添加 pre-commit 钩子

npx husky add .husky/pre-commit "npx eslint ./"

运行完之后会在 .husky 文件下新增 pre-commit 文件

若 pre-commit 文件生成失败,可手动添加

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx eslint ./

三、配置 commit 提交规范

  • 完成以上两项配置就已经可以对提交代码进行检测
  • 以下内容是对 commit 提交信息的检测,需要对 commit提交规范 有了解
  • 例如:“feat: 新增功能”,“fix: 修复bug”

3.1 安装 commitlint

npm install --save-dev @commitlint/config-conventional @commitlint/cli

3.2 新增 commitlint.config.js 文件

# 注意:生成的文件格式编码如果不是UTF-8的,需要手动改下
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

3.3 新增 commit-msg 钩子

npx husky add .husky/commit-msg  "npx --no -- commitlint --edit ${1}"

运行完之后会在 .husky 文件下新增 commit-msg 文件

若 commit-msg 文件生成失败,可手动添加

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

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

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐