如何将ESLint错误输出到Metro bundler控制台并在修复错误前阻止编译

核心实现思路 #

Metro的enhancedMiddleware支持在代码打包请求阶段插入自定义校验逻辑，你可以在这个钩子中先执行ESLint和TS类型校验，只要存在未修复的错误/警告就直接返回错误响应，阻断后续打包流程，实现和eslint-webpack-plugin一致的效果。

具体实现步骤 #

• 第一步：提前安装好项目所需的eslint、typescript及对应规则依赖，可额外安装chalk用于终端错误信息高亮展示。
• 第二步：修改项目根目录下的metro.config.js，添加如下配置：

const { execSync } = require('child_process');
const chalk = require('chalk');

module.exports = {
  // 保留你原有metro配置
  server: {
    enhancedMiddleware: (middleware) => {
      // 自定义校验中间件要放在所有打包逻辑之前执行
      middleware.use((req, res, next) => {
        // 仅拦截代码打包请求，过滤静态资源、热更新等无关请求
        if (req.url.startsWith('/bundle')) {
          try {
            console.log(chalk.blue('正在运行ESLint代码校验...'));
            // 执行ESLint校验，可根据项目需求调整参数
            execSync('npx eslint ./src --ext .ts,.tsx,.js,.jsx', { stdio: 'inherit' });
            
            console.log(chalk.blue('正在运行TypeScript类型校验...'));
            // 执行TS类型校验，不生成编译产物只做类型检查
            execSync('npx tsc --noEmit', { stdio: 'inherit' });
            
            // 所有校验通过，继续打包流程
            next();
          } catch (err) {
            // 校验不通过，直接返回错误阻断打包
            console.log(chalk.red('❌ 代码校验未通过，请修复上述错误后重试'));
            res.statusCode = 500;
            res.end('Code validation failed, fix ESLint/TypeScript errors first.');
          }
        } else {
          // 非打包请求直接放行
          next();
        }
      });
      return middleware;
    }
  }
};

可选调整项 #

• 如果你只想阻断错误不阻断警告，可以给ESLint命令加--quiet参数，给TS命令加--noEmit --quiet参数，校验逻辑就会忽略所有警告，只在出现错误时阻断编译。
• 如果你的项目源码目录不是./src，修改ESLint命令中的对应路径即可。
• 建议把校验命令提前配置在package.json的scripts字段中，比如配置"lint": "eslint ./src --ext .ts,.tsx,.js,.jsx"、"type-check": "tsc --noEmit"，中间件里直接调用npm run lint和npm run type-check即可，后续调整校验规则时不需要修改metro配置。
• 生产环境打包时如果也需要前置校验，直接把校验命令加到打包脚本前面即可，比如"build:android": "npm run lint && npm run type-check && cd android && ./gradlew assembleRelease"。

内容的提问来源于stack exchange，提问作者tjnk24