如何在使用react-app-rewired的React项目中禁用TypeScript警告覆盖层？或匹配VSCode的TypeScript检查严格程度

一、正确禁用编译时警告覆盖层 #

你试过的两种方法没生效，大概率是因为react-app-rewired对devServer的配置方式有特殊要求，直接在webpack函数里修改config.devServer可能不会被正确应用。试试下面官方推荐的配置方式：

在config-overrides.js里单独导出devServer函数，先调用默认配置逻辑再做修改：

module.exports = {
  webpack: function (config, env) {
    // 保留你原有的webpack配置（如果有的话）
    return config;
  },
  devServer: function (configFunction) {
    return function (proxy, allowedHost) {
      // 获取框架默认的devServer配置
      const config = configFunction(proxy, allowedHost);
      // 彻底禁用警告覆盖层
      config.client.overlay = false;
      return config;
    };
  }
};

如果你的react-app-rewired版本比较旧，client.overlay的路径可能不同，可以把上面的config.client.overlay = false改成：

config.overlay = false;

二、对齐VSCode与Webpack的TypeScript检查严格度 #

Webpack的TS检查通常由fork-ts-checker-webpack-plugin负责，它默认可能会启用比VSCode更严格的规则，或者没有完全遵循你本地的tsconfig.json配置。可以通过以下步骤对齐：

1. 先确认你的tsconfig.json配置和VSCode一致
   VSCode默认会读取项目根目录的tsconfig.json，把你想要的检查规则写在这里，比如：

{
  "compilerOptions": {
    "strict": false,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    // 其他你需要的个性化配置
  }
}

2. 在config-overrides.js中修改插件配置，强制遵循tsconfig规则

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  webpack: function (config, env) {
    // 找到fork-ts-checker插件实例
    const tsCheckerPlugin = config.plugins.find(
      plugin => plugin instanceof ForkTsCheckerWebpackPlugin
    );
    
    if (tsCheckerPlugin) {
      // 修改插件配置，让它严格使用本地tsconfig的规则
      tsCheckerPlugin.options = {
        ...tsCheckerPlugin.options,
        typescript: {
          configFile: './tsconfig.json',
          diagnosticOptions: {
            semantic: true,
            syntactic: true,
            // 禁用插件自带的额外严格检查
            strict: false
          }
        }
      };
    }
    
    return config;
  },
  // 加上前面的devServer配置来禁用覆盖层
  devServer: function (configFunction) {
    return function (proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      config.client.overlay = false;
      return config;
    };
  }
};

额外小提示 #

如果配置后还是没生效，建议先清除缓存：

• 删除项目根目录下的node_modules/.cache文件夹
• 重启react-app-rewired start服务

缓存残留有时候会导致旧配置没有被更新，清除后再试通常能解决问题。

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