规范代码格式
这篇文章发布于 2023年12月01日，星期五，01:53。阅读 ? 次，? 条评论
lint 命令format 命令lint-staged 命令hooksESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。
pnpm add eslint -D
npx eslint --init
根据提示选择适合的项进行初始化（脚手架创建的项目可能会自带，就不用自己生成了）。最终会在根目录下生成文件 .eslintrc.js，内容大致如下：
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: ['eslint:recommended', 'plugin:vue/essential'],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
plugins: ['vue'
lint 命令在 package.json 文件中的 script 中添加
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint --fix ."
}
}pnpm lint
如果写一行代码就要执行一遍 lint 命令，这效率就太低了。所以我们可以配合 vscode 的 ESLint 插件，并在设置文件中添加以下内容，实现每次保存代码时，自动尽可能修复代码的错误。
"editor.codeActionsOnSave": {
"source.fixAll": "explicit",
"source.fixAll.eslint": "explicit"
}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 tseslint from 'typescript-eslint'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
export default tseslint.config(
// 其他的配置添加在上面
eslintPluginPrettierRecommended
)创建文件 .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 ."
}
}pnpm format
配合 vscode 的 Prettier - Code formatter 插件，并在设置文件中添加以下内容，实现每次保存代码时，自动格式化代码。
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}对 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是一个用来管理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-commit是一个验证 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"]
}
}