不知道大家是不是和我一样，一遇到面试官问我这个问题的时候我一般都会蒙蔽起来，并开始手足无措开始往打包工具那块开始想，但事实上这些叙述其实已经说了很多的，那么我们可以提一些比较新颖的。本篇文章主要是简要的描述下面四个工具，同时告诉你一些基本的配置和使用方法，以便当遇到同样的问题的时候能够拿来用，废话不多说那就开始吧！
1.lint-staged
知识点:
1.作用：在Git提交的时候只对暂存区里面的文件允许lint检查或格式化的工具
2.优点：提高效率，避免对整个项目允许lint
3.常见搭配：与husky配合使用，通过Git钩子触发
配置步骤：
安装：
npm install --save-dev lint-staged
在 package.json 中添加配置：
{
"lint-staged": {
"*.{js,ts}": [
"eslint --fix",
"prettier --write"
],
"*.{json,md}": [
"prettier --write"
]
}
}
单独运行 lint-staged
npx lint-staged
作用：只对当前暂存区的文件运行配置好的任务（如 eslint --fix）。
2.husky
知识点:
1.作用：在Git钩子中允许自定义（pre-commit）的脚本
2.常见的用途：执行lint-staged检查、测试或者构建
3.特点：版本通过.husky/目录来管理钩子，配置更加直观
配置步骤：
1.安装
npm install --save-dev husky
2.初始化
npx husky init
这会在项目根目录创建 .husky/ 文件夹并生成默认钩子。
3.添加 pre-commit 钩子（例如运行 lint-staged）：
编辑 .husky/pre-commit：
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged
4.确保脚本可执行：
chmod +x .husky/pre-commit
3.release-it
知识点:
1.作用：自动化版本管理和发布流程（更新版本号，推送GIT标签）
2.特点：支持自定义的配置，继承GIT和NPM发布
3.常见命令：
- release-it major/minor/patch: 升级主/次/补丁版本。
- --dry-run: 模拟运行而不实际执行。
配置步骤：
安装：
npm install --save-dev release-it
在 package.json 中配置：
{
"release-it": {
"git": {
"commitMessage": "chore: release v${version}",
"tagName": "v${version}"
},
"npm": {
"publish": true
},
"github": {
"release": true
}
}
}
运行：
npx release-it
4.ESLint
知识点:
1.作用：JS/TS代码静态分析工具，用于见检查代码规范和潜在错误
2.特点：可高度自定义规则
3.常见搭配：与Prettier继承
配置步骤:
安装：
npm install --save-dev eslint
初始化配置文件:
npx eslint --init
示例 .eslintrc.json：
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
"no-unused-vars": "warn",
"react/prop-types": "off"
}
}
添加脚本到 package.json：
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
}
}
使用四个插件做一个整体的配置：
{
//配置启动命令
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"release": "release-it"
},
//配置lint-stager，在使用git add .后使用npx lint-staged触发husky钩子，自动修复ESlint和Prettier的问题
"lint-staged": {
"*.{js,ts,jsx,tsx}": [
"eslint --fix",
"prettier --write"
]
},
//自动化发布版本和Git
"release-it": {
"git": {
"commitMessage": "chore: release v${version}",
"tagName": "v${version}"
}
},
"devDependencies": {
"eslint": "^8.0.0",
"husky": "^9.0.0",
"lint-staged": "^15.0.0",
"release-it": "^17.0.0",
"prettier": "^3.0.0"
}
}
使用流程
- 提交代码时，husky 触发 lint-staged，自动修复 ESLint 和 Prettier 问题。
- 运行 npm run lint 检查整个项目。
- 发布版本时，运行 npm run release，自动更新版本并推送。
