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

2023-12-05

我最近开始使用 VS Code。我正在使用带有 React 和 Type 脚本的 Material ui。但我无法使用 alt(option) + Enter 快捷方式导入 Material 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 keybindings 和 auto import 等插件,但似乎仍然没有发生任何事情。有人可以告诉我我在这里缺少什么吗?


我相信我可以重现您所看到的问题。根据我的测试,VS Code 中内置的自动导入功能仅适用于以下文件中定义的符号:already作为项目的一部分加载,因为它们匹配,或者由匹配的文件直接或间接导入include设置在tsconfig.json. (See 这个线程一些背景。)

我从您的配置文件和空白源文件开始,但已删除@types/material-ui因为这是给老的material-ui包(您尚未安装)并且只是令人困惑的事情。此时,如果我使用 Ctrl-Space 调用代码完成,我会not提供了 Material UI 组件(AppBar, Avatar,...)。但是如果我添加一个导入,例如import { AppBar } from "@material-ui/core";,强制 TypeScript 服务器加载@material-ui/core,所以现在如果我再次调用代码完成,则会向我提供其余的 Material UI 组件。如果您需要自动导入在没有现有导入的情况下工作,那么您可以添加适当的.d.ts文件到include列出在tsconfig.json,尽管那样你会想使用一个单独的tsconfig.json文件进行批量编译,这样你就不会尝试覆盖文件中的JavaScript文件@material-ui/core包裹。

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

无法从节点模块自动导入反应组件 的相关文章

随机推荐

  • 如何制作 jQuery 倒计时

    我想要一个 jQuery 倒计时 页面下载完成后开始计数 数到 0 后重定向到一个 url 我怎样才能做到这一点 我想我应该稍微分解一下并提供一些既可以倒计时又可以重定向的东西 毕竟 明天您可能想要倒计时并操作 DOM 因此 我提出了以下
  • BottomNavigationView 与导航图再次加载片段

    我在用BottomNavigationView with nav graph下面是我的代码 InMainActivity class navController Navigation findNavController this R id
  • 当 'type = "norm" 时如何计算 ggplot stat_ellipse() 的面积?

    类似这个问题 当 type norm 时 有什么方法可以计算这个椭圆的面积吗 默认为type t type norm 显示不同的椭圆 因为它假设多元正态分布而不是多元 t 分布 这是代码和情节 使用与其他帖子类似的代码 library gg
  • 页面加载后jquery加载div

    实际上我正在寻找的加载是首先加载页面 然后加载包含大量数据的 div 所以 我想首先加载主页 然后使用 jQuery 函数加载正文 div 内容 但有一些延迟 实现这个的简单方法是什么 div div navigation div div
  • 如何使用 Lombok 访问 getter 和 setter 方法? [复制]

    这个问题在这里已经有答案了 我已经在我的项目中添加了 Lombok maven 存储库 并成功使用了 Lombok 注释 我尝试从另一个类访问 setter 和 getter 方法 但无法访问这些方法 我正在使用 spring Boot 版
  • SQL Server - 有没有办法批量解决排序规则冲突

    我们遇到的情况是 开发和生产 SQL Server 之间的数据库 表和某些列的排序规则不同 这对开发造成了严重破坏 事情会在开发上工作 然后由于升级时的排序规则冲突而中断 数据和结构将从产品复制到开发 这又会因为冲突等而破坏开发上的查询 我
  • 执行Python程序

    我已经在网上搜索答案很长一段时间了 但这让我非常头疼 我使用的是 Ubuntu 12 04 我想从终端执行 Python 脚本而不使用完整路径 因此 我通过将以下内容添加到 bashrc 中 将 home kyril python scri
  • 嵌入式 Jetty 找不到带注释的 Servlet

    短的 我有一个提供 war 工件的项目 其中包含带有注释的 servlet 但没有 web xml 如果我尝试在 jetty 中使用 war 我总是只能得到 war 内容的目录列表 而不是 servlet 执行 任何想法 很长的故事 我的
  • SQL 按最近日期选择具有两个唯一列的行

    使用以下查询和结果 我正在查找 ChargeId 和 ChargeType 唯一的最新条目 select chargeId chargeType serviceMonth from invoice CHARGEID CHARGETYPE S
  • Hindley-Milner 的哪一部分是你不明白的?

    I swear曾经有一个T shirt出售带有不朽文字的 哪一部分 do you not理解 就我而言 答案是 全部 特别是 我经常在 Haskell 论文中看到这样的符号 但我不知道它的含义 我不知道它应该是数学的哪个分支 我当然认识希腊
  • 在Interceptor.intercept()内部,我如何知道Action是否已经被执行?

    我正在使用拦截器在基于 Struts 的应用程序中实现一些内容 但我对它们的生命周期如何工作感到困惑 根据 Struts 文档 拦截者 编写拦截器 and 大图景 它应该像这样工作 FirstInterceptor NextIntercep
  • Boost::解析字符串时的精神斗争

    我正在尝试用 Boost Spirit 解析字符串 但我无法让它工作 从今天起我就没有使用 Boost Spirit 的经验了 该字符串由用 分隔的命令组成 命令是 INC 一些整数 BOMB 第一个整数 第二个整数 MOVE 第一个整数
  • Typescript:重写超类方法而不需要知道超类方法签名

    以下是我如何可靠地重写 vanilla JS 中的方法 而不关心名称或参数数量或返回值 import EventEmitter from events console log event arguments every time this
  • 结合使用 Bootstrap for Angular 和 Material design for Angular

    我正在做一个与此相关的项目template 该模板是使用 AngularJs 和 Bootstrap UI 角度引导 编写的 我想包含一些材料设计元素 例如卡片等 可以这样做吗 推荐吗 我的事情是 我们已经喜欢这个模板及其许多元素的方式 但
  • 单引号和双引号一起作为 HTML 属性值?

    我们有这样的代码 echo
  • 输出 JSON 对象中的所有直接邻居

    是否可以在 Cypher 中编写查询以将以下查询的输出格式化为 JSON 对象 MATCH n Artist name Metallica r gt m Album RETURN node n neighbours type r colle
  • 检索 ListView asp.net 中选定单选按钮的值

    我想发送一个 Guid 当用户单击结账时 该 Guid 应作为 eventargs 与每个单选按钮关联 我只用 RadioButtonList 就可以实现此功能 但我不能在这里使用它 因为其余字段是从数据库中提取的 有很多涉及此类主题的问题
  • JavaScript - 在内部函数中引用“this”

    考虑以下代码 MyClass prototype my func function this x 10 ajax success function data alert this x 它不起作用 因为显然this没有绑定到闭包的执行上下文中
  • ORDER BY RAND() 似乎不是随机的

    我有一个相当简单的 SQL MySQL SELECT foo FROM bar ORDER BY rank RAND 我注意到 当我刷新结果时 随机性很弱 目前的样本数据中有六个具有相同排名的结果 整数零 有很多随机性测试 但这里有一个简单
  • 无法从节点模块自动导入反应组件

    我最近开始使用 VS Code 我正在使用带有 React 和 Type 脚本的 Material ui 但我无法使用 alt option Enter 快捷方式导入 Material ui 的组件 我使用的是mac 我使用的typescr