开发MERN项目时，需为前后端文件夹分别配置ESlint、Prettier、Husky吗？

算力阿峰

2026-8-13

MERN项目前后端是否需要单独配置ESLint、Prettier、Husky？

答案是需要分别单独配置，原因和实操建议如下：

核心原因

技术栈语法差异：前端React涉及JSX、React Hooks等专属语法，后端Node/Express则侧重CommonJS/ES模块、API路由逻辑等。ESLint需要针对性配置规则，比如前端用eslint-plugin-react校验React规范，后端用eslint-plugin-node检查Node.js最佳实践，共用一套规则会导致语法误判或规则失效。
格式偏好适配：Prettier基础格式（如缩进、换行）可统一，但前端JSX标签的换行、属性排序，后端require/import的格式习惯可能不同，分开配置能灵活适配各自场景，避免格式冲突。
代码检查范围清晰：分开配置后，前端代码检查仅作用于client目录，后端仅作用于server目录，避免冗余检查，提升效率。

ESLint & Prettier：在client和server目录下分别执行npm init @eslint/config和npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev，各自选择对应技术栈的规则集，生成独立的.eslintrc.json和.prettierrc文件。
Husky：推荐在根目录统一配置Husky，搭配lint-staged实现提交前的分目录检查。示例配置：
在根目录package.json中添加：
```
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "client/**/*.{js,jsx}": ["eslint --fix", "prettier --write"],
  "server/**/*.js": ["eslint --fix", "prettier --write"]
}
```
这样提交代码时，会自动分别校验前后端的代码规范和格式，无需在子目录重复配置Husky。