VScode 找不到 `tsx` 文件的项目特定导入，但 typescript 编译器发现它们没问题答案

【问题标题】：VScode can't find project specific imports for `tsx` files, but typescript compiler finds them OKVScode 找不到 `tsx` 文件的项目特定导入，但 typescript 编译器发现它们没问题
【发布时间】：2021-07-21 20:17:41
【问题描述】：

当我将jsx 组件制作成tsx 时，VScode 会在项目特定的导入下划线。

以下来自components\molecules\WizardSteps.jsx

JSX

多伦多证券交易所

以下来自components\molecules\WizardSteps.tsx改名后：

错误是：

找不到模块 'components/atoms/Step' 或其对应的类型声明。

components/atoms/Step.tsx 存在。

但是打字稿编译器没有抱怨，我的项目构建了。我正在使用 next.js，因此next 命令涉及打字稿编译器。

这是我的tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

我已阅读 the documentation on include 和 baseUrl 并确认：

**/ 匹配任何嵌套到任何级别的目录

所以我的包含应该可以工作。

有趣的是，这个问题似乎只发生在 tsx 文件中 - ts 文件加载项目特定的导入文件。

如何让 VScode 对我的 typescript 导入感到满意？

【问题讨论】：

"components/atoms/Step" 在第一种情况下是如何解决的？你用的是nextjs.org/docs/advanced-features/module-path-aliases吗？它似乎不在您的tsconfig.json 中-您有jsconfig.json 吗？是否有它的类型定义？
@jonrsharpe 我相信 Next 只是使用前面提到的 tsconfig.json，以及来自 tsconfig.json 的 baseUrl 和 include 选项。
你有一个baseUrl，但没有paths，所以我不清楚Step是如何在重命名之前解决的。
@jonrsharpe 谢谢。我在这里问之前检查了typescriptlang.org/tsconfig#paths，但根据文档“这可以用来避免代码库中的长相对路径”，它似乎并不相关。 - 我可以接受较长的相对路径，我只希望相对路径能够正常工作。

标签： reactjs typescript visual-studio-code next.js

【解决方案1】：

由于 TypeScript 构建文件，但 VScode 报错，原来错误来自eslint（尽管错误未提及 eslint）。

按照https://stackoverflow.com/a/56696478/123671 的步骤，使用以下内容更新.eslintrc：

extends: [
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
  ],

让错误消失了。

【讨论】：