无法从节点模块自动导入反应组件答案

【问题标题】：not able to auto import react components from node modules无法从节点模块自动导入反应组件
【发布时间】：2019-02-27 01:05:07
【问题描述】：

我最近开始使用 vs 代码。我正在使用带有反应和类型脚本的材料 ui。但我无法使用 alt(option) + enter 快捷方式导入材质 ui 的组件。我正在使用 mac，我使用的 typescript 版本是 3.0.3。但是，我明确创建的反应组件，我能够使用上述快捷方式导入的组件。以下是我正在使用的 package.json：

{
  "name": "portfolio",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "ahujru",
  "license": "ISC",
  "dependencies": {
    "@material-ui/core": "3.0.3",
    "@material-ui/icons": "3.0.1",
    "@types/material-ui": "0.21.5",
    "@types/react": "16.4.14",
    "@types/react-dom": "16.0.7",
    "awesome-typescript-loader": "5.2.1",
    "css-loader": "1.0.0",
    "node-sass": "4.9.3",
    "react": "16.5.1",
    "react-dom": "16.5.1",
    "sass": "1.13.4",
    "sass-loader": "7.1.0",
    "source-map-loader": "0.2.4",
    "style-loader": "0.23.0",
    "typeface-roboto": "0.0.54",
    "typescript": "3.0.3",
    "webpack": "4.19.0",
    "webpack-cli": "3.1.0",
    "webpack-dev-server": "3.1.8"
  }
}

和 tsconfig.json：

{
    "compilerOptions": {
        "baseUrl": ".",
        "module": "commonjs",
        "watch": true,
        "sourceMap": true,
        "outDir": "target",
        "target": "es6",
        "jsx": "react",
        "noImplicitAny": true,
        "moduleResolution": "node"
    },
    "include": [
        "./src/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

我已经安装了 npm intellisense、intellij 键绑定和自动导入等插件，但似乎仍然没有任何反应。有人可以告诉我我在这里缺少什么。

【问题讨论】：

标签： reactjs typescript visual-studio-code material-ui

【解决方案1】：

我相信我可以重现您看到的问题。根据我的测试，VS Code 中内置的自动导入功能仅适用于在文件中定义的符号，这些符号已经作为项目的一部分加载，因为它们匹配，或者由以下文件直接或间接导入匹配，tsconfig.json 中的 include 设置。（有关背景信息，请参阅 this thread。）

我从您的配置文件和一个空白源文件开始，但删除了@types/material-ui，因为它用于旧的material-ui 包（您尚未安装）并且只是混淆了问题。此时，如果我使用 Ctrl-Space 调用代码完成，我不会提供 Material UI 组件（AppBar、Avatar、...）。但是，如果我添加一个导入，例如 import { AppBar } from "@material-ui/core";，它会强制 TypeScript 服务器加载 @material-ui/core，所以现在如果我再次调用代码完成，我将获得其余的 Material UI 组件。如果您需要自动导入以在没有现有导入的情况下工作，那么您可以将适当的.d.ts 文件添加到tsconfig.json 中的include 列表中，但您可能希望使用单独的tsconfig.json 文件进行批量编译这样您就不会尝试覆盖 @material-ui/core 包中的 JavaScript 文件。

我没有测试过任何第三方自动导入插件，也无法谈论它们的行为。

【讨论】：