React Native中ESLint、Prettier、TypeScript初始配置问题咨询

React Native + TypeScript 中配置绝对路径，需同步调整 tsconfig.json、babel.config.js 及 ESLint 配置，以下是各文件的核心校验要点：

1. tsconfig.json #

需继承官方预设配置并补充路径映射：

{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".", // 以项目根目录为基准路径
    "paths": {
      "@/*": ["src/*"] // 将@开头的路径映射到src目录对应文件
    }
  },
  "include": ["src/**/*", "declarations.d.ts"] // 确保所有需解析的文件被包含
}

• 确认 baseUrl 设为 .，paths 中 @/* 的映射目标与你的源码目录一致（通常为 src/*）。
• @tsconfig/react-native/tsconfig.json 是官方预设的TypeScript配置，无需修改，仅需在自定义tsconfig中继承即可。

2. babel.config.js #

需先安装 babel-plugin-module-resolver 依赖（npm install babel-plugin-module-resolver --save-dev），再配置别名：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'], // 设定根目录
        alias: {
          '@': './src' // 与tsconfig的路径映射完全匹配
        }
      }
    ]
  ]
};

• 插件配置的 alias 必须和 tsconfig.json 中的 paths 保持一致，否则会出现编译或运行时路径找不到的问题。

3. .eslintrc.js #

需配置路径解析器让ESLint识别绝对路径：

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'react', 'react-native'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-native/all'
  ],
  settings: {
    'import/resolver': {
      typescript: {}, // 让ESLint复用tsconfig的路径映射
      'babel-module': {} // 兼容babel的模块解析逻辑
    }
  },
  rules: {
    // 自定义规则
  }
};

• 需配套安装 eslint-import-resolver-typescript 和 eslint-import-resolver-babel-module 依赖（npm install eslint-import-resolver-typescript eslint-import-resolver-babel-module --save-dev），否则ESLint会报错无法解析绝对路径。

如果你的配置符合以上要点，那么绝对路径的配置就是正确的。

错误原因 #

该错误是因为你使用 @typescript-eslint/parser 作为ESLint解析器，且在 .eslintrc.js 中配置了 parserOptions.project（指向你的tsconfig文件），但 babel.config.js 是JavaScript文件，不在tsconfig的 include 列表中，也未被ESLint排除，导致TypeScript解析器尝试用TS规则解析这个JS文件，从而触发解析错误。

解决方法 #

任选以下一种方案即可：

方案1：排除ESLint对babel.config.js的检查

在项目根目录的 .eslintignore 文件中添加：

babel.config.js

方案2：为JS文件单独配置解析规则

修改 .eslintrc.js，通过 overrides 关闭JS文件的TS项目解析：

module.exports = {
  // 原有配置...
  overrides: [
    {
      files: ['*.js'],
      parserOptions: {
        project: null // 禁用TS项目解析，让ESLint用默认JS解析器处理JS文件
      }
    }
  ]
};

方案3：调整tsconfig的include列表（不推荐）

将 babel.config.js 添加到tsconfig的 include 中，但这会让TypeScript将该JS文件当作TS文件处理，可能引入额外问题，不建议采用。

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