小编典典

无法自动从节点模块导入React组件

reactjs

我最近开始使用vs代码。我正在使用带有反应和类型脚本的材料ui。但是我无法使用alt(option)+输入快捷方式来导入材料ui的组件。我正在使用Mac,而我正在使用的打字稿版本是3.0.3。但是,我正在显式创建的react组件,我能够使用上述快捷方式导入的组件。以下是我正在使用的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键盘绑定和自动导入之类的插件,但似乎什么也没发生。有人可以告诉我我在这里想念什么。


阅读 299

收藏
2020-07-22

共1个答案

小编典典

我相信我可以重现您所遇到的问题。根据我的测试,VS Code内置的自动导入功能仅适用于在文件中定义的符号,这些符号 已经
匹配到或已由项目中的include设置直接或间接导入,这些文件
作为项目的一部分加载到项目中tsconfig.json。(有关某些背景,请参见此线程。)

我从您的配置文件和空白的源文件开始,但@types/material-ui由于它是用于旧material- ui软件包(您尚未安装)的,所以将其删除了,这只会使您感到困惑。在这一点上,如果我调用代码完成用Ctrl-Space键,我
提供的材料UI组件(AppBarAvatar,…)。但是,如果添加了一个导入(例如)import { AppBar } from "@material-ui/core";,它会强制TypeScript服务器加载@material- ui/core,那么现在,如果再次调用代码完成功能,我将获得其余的Material
UI组件。如果您需要自动导入才能在没有现有导入的情况下正常工作,则可以将适当的.d.ts文件添加到中的include列表中tsconfig.json,尽管那样您想使用一个单独的tsconfig.json文件进行批量编译,这样您就不会覆盖@material- ui/core包中的JavaScript文件。

我尚未测试任何第三方自动导入插件,也无法谈论它们的行为。

2020-07-22