Vite+React-TS项目TypeScript错误无法检测的问题求助

我用最新版Vite创建了React-TS模板项目，故意编写了TypeScript错误，但无论用哪种方式都检测不到报错。

根据官方文档，有两种TS错误检测方式，但对我都无效：

• 在vite.config.ts中使用vite-plugin-checker插件
• 在独立终端执行tsc --noEmit -w命令

vite-plugin-checker配置及结果 #

插件配置如下：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import Checker from "vite-plugin-checker";
import tsconfigPaths from "vite-tsconfig-paths";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), Checker({ typescript: true })],
});

/*
* 补充：若在checker中指定tsconfig路径：
*Checker({ typescript: "tsconfig.app.json" }) 
* 可以生效，但在大型项目中，重新编译到检测完成的延迟和CRA相当
*/

插件输出：

[TypeScript] Found 0 errors. Watching for file changes.
[TypeScript] Found 0 errors. Watching for file changes. (x2)
[TypeScript] Found 0 errors. Watching for file changes. (x3)

tsc命令执行结果 #

执行tsc --noEmit -w后的输出：

$ tsc --noEmit -w
[21:34:44] Starting compilation in watch mode...
[21:34:44] Found 0 errors. Watching for file changes.

测试用的TypeScript错误代码示例 #

function App() {
  const [count, setCount] = useState<string>(0);
  const [x, setX] = useState(3);

  console.log(abc); // 即使是这类未定义变量的错误也未被捕获

  useEffect(() => {
    setX("hello world");
  }, []);
}

项目创建信息 #

项目是通过以下命令初始化的，tsconfig为Vite默认配置：

$ npm create vite@latest my-vue-app -- --template react-ts

tsconfig文件内容 #

tsconfig.app.json #

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": false,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src"]
}

tsconfig.node.json #

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    // 为保险起见添加了此项 "types": ["react", "react-dom"], 
    "skipLibCheck": false,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["vite.config.ts"]
}

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