如何修复TS+Expo+React Native项目中ESLint类型导入解析错误？

错误原因 #

1. 全局继承了standard-with-typescript规则，但全局解析配置未适配TypeScript语法，type导入是TS专属语法，被standard基础规则误判为语法错误。
2. TypeScript相关ESLint配置未限定在TS/TSX文件的overrides块中，导致规则作用范围混乱，TS语法无法被正确解析。

修复步骤 #

1. 调整ESLint配置 #

修改.eslintrc.js，将standard-with-typescript移至TS文件的overrides配置内，确保TS语法规则仅作用于TS/TSX文件：

module.exports = {
  env: {
    browser: false,
    es2021: true,
    node: true,
    'react-native/react-native': true
  },
  extends: [
    'plugin:react/recommended'
  ],
  parser: '@typescript-eslint/parser',
  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      extends: [
        'standard-with-typescript',
        'plugin:@typescript-eslint/recommended',
        'plugin:@typescript-eslint/recommended-requiring-type-checking'
      ],
      parserOptions: {
        project: ['./tsconfig.json'],
        ecmaVersion: 'latest',
        sourceType: 'module'
      }
    }
  ],
  plugins: [
    'react',
    '@typescript-eslint',
    'react-native'
  ],
  rules: {
    'react/react-in-jsx-scope': 'off' // RN项目不需要JSX Scope，可关闭该规则
  }
}

2. 完善tsconfig配置 #

确保tsconfig.json的编译选项支持TypeScript模块语法：

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "moduleResolution": "node16",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

3. 刷新VS Code的ESLint服务 #

• 打开命令面板（Ctrl+Shift+P / Cmd+Shift+P）
• 执行ESLint: Restart ESLint Server
• 若错误仍存在，可重启VS Code或清除ESLint缓存

依赖检查 #

确保已安装对应依赖包，版本需相互兼容：

npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-standard-with-typescript eslint-plugin-react eslint-plugin-react-native

内容的提问来源于stack exchange，提问作者Michał Fejer