SuperAPI AI 工具集

eslint-prettier-husky-config

前端与建站

查看项目

更新于 10-15 22:14

技能介绍

用途:为 Next.js/React 项目搭建完整代码质量工具链,整合 ESLint v9(扁平配置)、Prettier、Husky、lint-staged 与 CI lint 检查。

主要能力与用法: 安装依赖:npm install -D eslint@^9 @eslint/js eslint-config-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y prettier husky lint-staged;TypeScript 项目追加 @typescript-eslint/parser、@typescript-eslint/eslint-plugin、typescript-eslint。 在项目根创建 eslint.config.mjs(含 React、React Hooks、JSX 无障碍规则,支持 TypeScript 类型感知检查,忽略 Next.js 构建目录与配置文件)。 创建 .prettierrc(2 空格缩进、单引号、无尾逗号、100 字符宽、Unix 换行)与 .prettierignore(排除构建目录、依赖、生成文件、公共资源)。 运行 npx husky init 初始化钩子,将 pre-commit 内容改为 npx lint-staged,并在 package.json 配置 lint-staged,对 *.js/jsx/ts/tsx 执行 eslint --fix 与 prettier --write,对 json/md/yml/yaml 执行 prettier --write。 添加脚本:lint(eslint . --max-warnings 0)、lint:fix、format、format:check、prepare(husky)。 创建 .github/workflows/lint.yml,在 PR 与 main/master 推送时安装依赖并运行 lint 与格式检查。 验证:运行 npm run lint、npm run format:check,提交一次改动测试钩子,推送分支开 PR 验证 CI。

适用场景:需要统一团队代码风格与提交前检查的 Next.js/React 项目;也可按需调整规则严重度、Prettier 选项、lint-staged 文件模式与附加命令(如类型检查)。

限制:资料未提供具体定价、版本兼容矩阵与完整脚本/模板内容;部分模板需从 assets/ 与 references/ 获取。常见问题包括 ESLint 与 Prettier 冲突(确保 eslint-config-prettier 置于 extends 末位)、Husky 钩子未执行、CI 与本地 Node 版本不一致等。