ESLint
ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。
安装
pnpm add eslint -D
初始化
npx eslint --init
根据提示选择适合的项进行初始化（脚手架创建的项目可能会自带，就不用自己生成了）。最终会在根目录下生成文件 eslint.config.ts，内容大致如下：
import { defineConfig } from 'eslint/config'
export default defineConfig([])添加 lint 命令
在 package.json 文件中的 script 中添加
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint --fix ."
}
}Prettier
Prettier 是代码格式化工具
安装
pnpm add prettier eslint-config-prettier eslint-plugin-prettier -D
eslint-config-prettier：关闭所有不必要或可能与 Prettier 冲突的 ESLint 规则
eslint-plugin-prettier：将 Prettier 作为 ESLint 规则运行
eslint-plugin-prettier 附带一个可一次性设置两者的配置 eslint-plugin-prettier/recommended 参考
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
import { defineConfig } from 'eslint/config'
export default defineConfig([
eslintPluginPrettierRecommended,
{
rules: {
'prettier/prettier': 'error'
}
}
])添加 vscode 配置，关闭 prettier 格式化，避免两者同时运行
{
"eslint.format.enable": true,
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.organizeImports": "never"
}
}初始化
创建文件 .prettierrc.js，并填入以下内容
/** @type {import("prettier").Options} */
module.exports = {
printWidth: 160,
useTabs: false,
semi: false,
singleQuote: true,
arrowParens: 'avoid',
trailingComma: 'none',
endOfLine: 'lf'
}添加 format 命令
在 package.json 中的 scripts 中添加（自行修改匹配的文件）
{
"scripts": {
"format": "prettier --write ."
}
}lint-staged
对 git 暂存的文件运行 linter，不要让 💩 溜进你的代码库！
安装
pnpm add lint-staged -D
添加 lint-staged 命令
在 package.json 中添加
"lint-staged": {
"*.{js,cjs,ts,tsx,vue}": [
"prettier --write",
"eslint --fix"
],
"*.{md,css,scss,json,yaml}": "prettier --write"
}默认情况下，lint-staged 将同时运行配置的任务，所以注意匹配文件重叠问题。参考
运行
npx lint-staged
husky
husky是一个用来管理git hook的工具，git hook即在我们使用git提交代码的过程中会触发的钩子
安装
pnpm add husky -D
初始化
npx husky init
将在根目录生成文件 .husky，同时将在 package.json 文件中添加下面的命令（这条命令是让以后别人 git clone 代码后，安装依赖之后自动运行这条命令，从而自动初始化 husky）
{
"scripts": {
"prepare": "husky"
}
}添加 hooks
实现在运行 git commit 时，在之前运行命令 npx lint-staged。运行出错会中断 git commit 的执行
echo "npx lint-staged" > .husky/pre-commitcommitlint
是一个验证 git commit message 内容的工具
安装
pnpm add @commitlint/cli @commitlint/config-conventional -D
初始化
添加 husky 钩子（在 commit-msg 触发时，执行对 commit 消息的验证）
echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg修改 package.json 添加 commitlint 使用的共享配置
{
"commitlint": {
"extends": ["@commitlint/config-conventional"]
}
}