手把手带你基于ESLint 9+Husky+Prettier+Commitlint+Lint-staged配置前端开发规范
在前端项目开发中，代码规范是保证代码质量和团队协作效率的基础。一个完善的代码规范体系不仅能统一团队成员的编码风格，还能在代码提交前自动检查问题，减少代码review的成本。
本文将手把手教你搭建一套完整的前端开发规范体系，基于ESLint 9新配置系统，配合Husky、Prettier、Commitlint、Lint-staged等工具，实现代码提交前的自动检查和格式化。
# 一、项目初始化与依赖安装
# 创建Next.js 16项目
npx create-next-app@latest my-app --typescript --tailwind --eslint
cd my-app
@前端进阶之旅: 代码已经复制到剪贴板
# 安装ESLint 9相关依赖
npm install eslint@9 @eslint/js@9 --save-dev
npm install typescript-eslint@8 --save-dev
npm install eslint-config-next@16 --save-dev
npm install eslint-plugin-simple-import-sort@12 eslint-plugin-unused-imports@4 --save-dev
npm install @eslint/compat@1 --save-dev
@前端进阶之旅: 代码已经复制到剪贴板
# 安装Prettier相关依赖
npm install prettier@3 prettier-plugin-tailwindcss@0.7 --save-dev
npm install eslint-config-prettier@10 --save-dev
@前端进阶之旅: 代码已经复制到剪贴板
# 安装Git钩子相关依赖
npm install husky@9 lint-staged@16 --save-dev
npm install @commitlint/cli@17 @commitlint/config-conventional@17 --save-dev
@前端进阶之旅: 代码已经复制到剪贴板
# 完整依赖清单
{
"devDependencies": {
"@commitlint/cli": "^17.7.2",
"@commitlint/config-conventional": "^17.7.0",
"@eslint/compat": "^1.4.1",
"@eslint/eslintrc": "^3",
&q
