reactjs - Typescript 路径别名找不到图像、样式和其他文件扩展名

问题描述

我目前有一些反应打字稿项目，每个项目都使用路径别名，但我面临一个烦人的问题，即当使用路径别名导入时，在路径自动完成中找不到像,和许多其他.png文件的自动完成。（导入时工作正常，问题只是烦人的自动完成功能无法正常工作，迫使我检查文件夹以获取文件名）.jpg.scss

当我使用import File from '../../../styles/...';自动完成等相对路径时，效果很好。我不确定我需要用这个错误搜索什么，我试过了，但没有成功。

我正在使用带有Path Intellisense扩展的vscode，但由于问题发生在 typescript 路径别名上，我不相信它可能意味着什么。

在职的：

不工作：

不显示任何内容，如果我点击ctrl+enter它会显示几个无用的自动完成，但不会显示文件夹内的文件

tsconfig

{
  "compilerOptions": {
    "target": "es2020",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "downlevelIteration": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": "./src",
    "types": ["cypress"]
  },
  "include": [
    "src"
  ]
}

标签： reactjstypescriptvisual-studio-codecreate-react-app

我对 CRA v4 和绝对导入有同样的问题。我最终工作的唯一方法：

安装Path Intellisense + 添加"baseUrl": "src"到您的tsconfig.json
不要设置"typescript.suggest.paths": false为建议扩展自述文件，让它作为true
将以下内容添加到您的 VSCode 中settings.json：

    "path-intellisense.mappings": {
        "/": "${workspaceFolder}",
        "assets": "${workspaceFolder}/src/assets",
        "pages": "${workspaceFolder}/src/pages",
        ... as many lines as folders you have under src, or order paths too
    }

reactjs - Typescript 路径别名找不到图像、样式和其他文件扩展名

问题描述

解决方案

推荐阅读