如何让Vite+React+TypeScript项目在终端显示错误与警告？

云上老周

2026-7-2

Vite+React+TypeScript项目终端显示错误/警告的配置方案

一、语法错误终端不显示的修复

如果项目的JS/TS语法错误仅在浏览器控制台出现、终端无输出，检查vite.config.ts的日志配置，确保未关闭日志输出：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    // 日志级别默认是info，确保未设置为silent或error
    logLevel: 'info',
  },
});

修改后重启开发服务，语法错误会直接输出到终端。

二、TypeScript类型错误终端显示的实现

Vite默认仅做TS语法转译，不执行类型检查，因此类型错误不会输出到终端。有两种常用方案：

方案1：并行运行TS类型检查监听

安装并行命令工具concurrently：

npm install concurrently --save-dev

修改package.json的脚本配置：

{
  "scripts": {
    "dev": "vite",
    "type-check": "tsc --watch --noEmit",
    "start": "concurrently \"npm run dev\" \"npm run type-check\""
  }
}

执行npm run start启动项目，终端会同时输出Vite开发日志和TS类型检查的错误/警告。

方案2：使用`vite-plugin-checker`插件（集成化方案）

该插件能将TS类型检查、ESLint检查等结果直接集成到Vite开发流程中，终端和浏览器会同步显示错误：

安装插件：

npm install vite-plugin-checker --save-dev

修改vite.config.ts：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import checker from 'vite-plugin-checker';

export default defineConfig({
  plugins: [
    react(),
    checker({
      // 启用TS类型检查
      typescript: true,
      // 可选：若项目使用ESLint，可开启ESLint检查
      eslint: {
        lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
      },
    }),
  ],
});