TypeScript React项目Node子路径导入触发ESLint import/extension错误求助

这个错误源于ESLint的import/extensions规则要求导入时必须带文件扩展名，而你使用路径别名且未添加扩展名触发了校验。以下是具体解决步骤：

1. 确认ESLint配置的有效性 #

• 检查.eslintrc.cjs是否在项目根目录，避免子目录的ESLint配置文件覆盖根配置。
• 重启编辑器或ESLint服务，配置修改后常需要重新加载才能生效。

2. 针对TypeScript文件配置规则 #

在.eslintrc.cjs的rules字段中，明确允许TypeScript文件省略扩展名：

module.exports = {
  // 其他配置项...
  rules: {
    // 其他规则...
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        ts: 'never',
        tsx: 'never'
      }
    ]
  }
}

ts和tsx设为never，表示这两类文件导入时无需添加扩展名。

3. 让ESLint识别路径别名 #

使用#hooks这类别名时，需配置ESLint解析对应路径，否则规则判断会异常。在.eslintrc.cjs中添加settings配置：

const path = require('path');

module.exports = {
  // 其他配置项...
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.ts', '.tsx']
      },
      alias: {
        map: [
          ['#hooks', path.resolve(__dirname, 'src/hooks')] // 替换为你的实际路径
        ],
        extensions: ['.ts', '.tsx']
      }
    }
  }
}

若未安装eslint-import-resolver-alias依赖，先执行安装命令：

npm install eslint-import-resolver-alias --save-dev

4. 同步Storybook的ESLint配置 #

如果错误仅在Storybook环境触发，检查是否存在.storybook/.eslintrc.cjs这类独立配置文件，需在其中同步上述规则和别名设置。

5. 临时禁用单行规则 #

若以上方法均无效，可在导入行临时跳过校验：

// eslint-disable-next-line import/extensions
import { useGetWallets } from '#hooks/investor/useGetWallets'

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