Vite+React项目中VSCode无错误下划线、无警告问题求助

问题场景 #

使用Vite初始化React项目后，VSCode不再对代码错误（如组件Props拼写错误）提供下划线提示。例如：
组件定义时接收拼写为removeFrromOrder（双r）的Props：

const BasketItem = ({ removeFrromOrder, id, name, price, quantity }) => {
  return (
    <ListItem>
      <Typography variant='body1'>
        {name} {price}руб x{quantity}
      </Typography>

      <IconButton onClick={() => removeFrromOrder(id)}>
        <Close />
      </IconButton>
    </ListItem>
  );
};

使用组件时传入的是removeFromOrder（单r）：

<BasketItem key={item.name} removeFromOrder={removeFromOrder} {...item} />

本该因Props不匹配出现下划线提示，但当前无任何标识，组件运行异常也无报错提示。

原因及解决办法 #

1. 未启用TypeScript类型检查 #

Vite默认的React JavaScript模板没有类型校验能力，VSCode无法识别Props拼写错误。

• 安装依赖：

  npm install typescript @types/react @types/react-dom --save-dev
  

• 项目根目录创建tsconfig.json，可通过npx tsc --init生成基础配置，或添加以下核心配置：

  {
    "compilerOptions": {
      "target": "ES2020",
      "useDefineForClassFields": true,
      "lib": ["ES2020", "DOM", "DOM.Iterable"],
      "module": "ESNext",
      "skipLibCheck": true,
      "moduleResolution": "bundler",
      "allowImportingTsExtensions": true,
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true,
      "jsx": "react-jsx",
      "strict": true,
      "noUnusedLocals": true,
      "noUnusedParameters": true,
      "noFallthroughCasesInSwitch": true
    },
    "include": ["src"],
    "references": [{ "path": "./tsconfig.node.json" }]
  }
  

• 若不想改为TS文件，可在tsconfig.json中设置"allowJs": true，让TypeScript检查JS/JSX文件。

2. VSCode TypeScript版本未关联项目 #

VSCode可能使用内置TypeScript版本，而非项目本地安装的版本，导致配置不生效：

• 打开命令面板（Ctrl+Shift+P），输入TypeScript: Select TypeScript Version
• 选择Use Workspace Version（项目本地安装的TS版本）

3. ESLint配置缺失 #

若依赖ESLint做代码检查，Vite默认模板可能未配置React相关规则：

• 安装依赖：

  npm install eslint eslint-plugin-react eslint-plugin-react-hooks --save-dev
  

• 创建.eslintrc.cjs配置文件，添加Props检查规则：

  module.exports = {
    env: {
      browser: true,
      es2021: true,
    },
    extends: [
      'eslint:recommended',
      'plugin:react/recommended',
      'plugin:react-hooks/recommended',
    ],
    parserOptions: {
      ecmaFeatures: { jsx: true },
      ecmaVersion: 'latest',
      sourceType: 'module',
    },
    plugins: ['react'],
    rules: {
      'react/prop-types': 'error', // 开启PropTypes校验
      'react/jsx-uses-vars': 'error',
    },
    settings: {
      react: { version: 'detect' },
    },
  };
  

• 确保VSCode已安装ESLint插件，并启用自动检查。

4. 与Vite无关的说明 #

Vite作为构建工具，仅负责项目打包和开发服务，本身不提供VSCode的代码错误提示功能。这类提示依赖TypeScript、ESLint等静态代码检查工具，问题根源是项目未配置相关校验规则。

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