如何配置CRA实现保存时自动校验项目所有目录的代码规范

算力阿峰

2026-9-24

解决方案

方案1：修改react-app-rewired的ESLint检测范围（推荐，复用原有CRA校验逻辑）

若/react目录下没有config-overrides.js文件则新建，已有则直接修改，添加如下配置：

const { override } = require('customize-cra');
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = override(
  config => {
    // 移除CRA默认的ESLint插件
    config.plugins = config.plugins.filter(plugin => plugin.constructor.name !== 'ESLintPlugin');
    // 新增自定义ESLint插件，覆盖检测路径
    config.plugins.push(new ESLintPlugin({
      extensions: ['js', 'jsx', 'ts', 'tsx'],
      context: __dirname,
      // 同时包含两个目录的源码
      files: ['../common/src/**/*', './src/**/*'],
      lintDirtyModulesOnly: true, // 仅校验修改过的文件，提升性能
      failOnError: false, // 开发环境不因为Lint错误阻断编译，可按需调整
      fix: false // 如需自动修复可改为true
    }));
    return config;
  }
);

在/react目录下安装依赖：npm i customize-cra eslint-webpack-plugin -D
重启npm start服务即可，修改两个目录下的文件保存时都会自动触发lint校验，会自动读取对应目录下的.eslintrc.json规则。

方案2：使用文件监听工具独立运行校验

如果不想修改webpack配置，可以用监听工具单独触发lint：

在顶层目录安装依赖：npm i onchange -D
修改顶层package.json的脚本配置：

"scripts": {
  "start:web": "concurrently \"cd backend && npm run start:dev\" \"cd react && npm start\" \"npm run lint:watch\"",
  "lint:react": "cd react && eslint src",
  "lint:common": "cd common && eslint src",
  "lint:watch": "onchange \"react/src/**/*\" \"common/src/**/*\" -- npm run lint:react && npm run lint:common"
}