半见

前端工程化-代码风格规范配置指南

前言
husky 配置 pre-commit
commitlint 进行commit规范
prettier eslint 进行代码样式风格配置
lint-staged 对暂存文件执行修改命令
最后的测试
1. 结果
总结
参考：

前言

项目需要多人合作时，就需要规范一个代码风格和提交流程，当前业界有很多相关的规范和插件，本文对这些插件的配置做个整合，同时给出个人常用的风格配置，用到的插件如下：

husky 配置 pre-commit
commitlint 进行commit规范
prettier eslint 进行代码样式风格配置(以Next项目为底)
lint-staged 对暂存文件执行修改命令

husky 配置 pre-commit

husky是一个流行的工具，用于在 Git 钩子中轻松运行脚本。Git 钩子是在特定事件发生时触发的脚本，例如 pre-commit、pre-push 等。husky 允许你在这些事件发生时自动运行命令，比如代码风格检查、测试或其他自定义脚本，以确保代码提交之前满足特定的质量标准。它以在 git commit 之前做某些检查，例如 npm run lint ，在 .husky/pre-commit 文档中配置。

# 因为我使用pnpm作为npm的包管理，下面都以pnpm为示例
# 安装
pnpm add --save-dev husky
# 初始化 init 命令简化了项目中的 husky 设置。它会在 .husky/ 中创建 pre-commit 脚本，并更新 package.json 中的 prepare 脚本。随后可根据你的工作流进行修改。
pnpm exec husky init
# 测试
git commit -m "Keep calm and commit"

1 2	# .husky/pre-commit 在提交前会执行的脚本 pnpm run test

commitlint 进行commit规范

commitlint用于规范 git commit 时的写法，提交代码时必须按照一定的格式规范，不能乱写。具体的格式可以参考这里What is Commitlint

1 2	# 安装，使用默认的提交规则就行了，如果要定制化可以参考官网设置 pnpm install --save-dev @commitlint/{config-conventional,cli}

prettier eslint 进行代码样式风格配置

Prettier是一个流行的代码格式化工具，它支持多种语言和框架，包括 JavaScript、TypeScript、CSS、HTML 等。Prettier 的主要目标是提供一个统一的代码格式化标准，以减少代码审查中关于风格的讨论，并确保项目中的代码风格一致性。

// package.json 添加format指令
// xxxxxx
"lint": "next lint",
"format": "prettier --check .",
"format:fix": "prettier --write --list-different ."
// xxxxxx

# 安装
pnpm install prettier eslint-config-prettier --save-dev
# 在使用tailwind时我还会使用 prettier-plugin-tailwindcss插件
pnpm install -D prettier-plugin-tailwindcss
# .husky/pre-commit 在提交前会执行的脚本,修改
pnpm run format:fix

// 个人自用.prettierrc配置
{
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "semi": false,
  "singleQuote": true,
  "bracketSpacing": true,
  "arrowParens": "always",
  "jsxSingleQuote": false,
  "bracketSameLine": false,
  "endOfLine": "lf",
  "plugins": ["prettier-plugin-tailwindcss"]
}

// .eslintrc.json 使用next时的eslint配置
{
  "extends": ["next/core-web-vitals", "prettier"]
}

lint-staged 对暂存文件执行修改命令

单纯配置上述插件后，实际会发现在执行后会先提交commit，然后再format fix文件，所以可以使用lint-staged插件，对暂存文件执行修改命令，修改后再commit。

1	pnpm install lint-staged -D

// package.json
"scripts": {
  "lint-staged": "lint-staged"
},

// .lintstagedrc.json 配置lint-staged
{
    "*.{js,jsx,ts,tsx,json,mjs,yaml}": ["prettier --write --list-different ."]
}

1 2	# .husky/pre-commit 在提交前会执行的脚本, 修改pre-commit pnpm run lint-staged

最后的测试

我们以一个Next项目为例来实际操作一下上述的这些指令:

pnpx create-next-app@latest

Progress: resolved 1, reused 0, downloaded 1, added 1, done
✔ What is your project named? … lint-demo
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/banjian/workplace/lint-demo.

cd lint-demo
# 依次执行上述命令，最后根目录下应该有以下内容：
.husky
.husky/_
.husky/pre-commit
node_modules
public
src
.eslintrc.json
.gitignore
.lintstagedrc.json
.prettierrc.js
next-env.d.ts
next.config.mjs
package.json
pnpm-lock.yaml
postcss.config.mjs
README.md
tailwind.config.ts
tsconfig.json
# 执行一次git commit
git add .
git commit -m "chore: init project"

结果

Next项目默认的文件的代码也被改为我们设置的风格了：

总结

最后回顾下各个插件的作用：

husky 用于Git钩子中轻松运行脚本，我们一般使用pre-commit
commitlint 用来规范commit的提交
lint-staged 用于执行脚本修改暂存的文件用于commit
prettier、eslint 代码风格、规范测试工具，保持团队代码风格统一

上述工具还有很多高级进阶用法，可以参考官网进一步了解，如果有什么问题也欢迎留言交流！

参考：

2024-07-12 该篇文章被半见打上标签: 工程化前端 Git Next 归为分类: 配置

以上