WebStorm 2021.3 在从组件访问 Nuxt.js 插件时显示 "Unresolved variable $sdk"

Question

我正在尝试在我的项目中使用 Nuxt.js 插件，但 WebStorm 无法正确识别插件公开的内容。

就我而言，它是一个 OpenAPI 客户端，在 WebStorm 中没有自动完成功能，如果不手动查找每个端点，我几乎无法使用它。

为了使问题可视化，我创建了一个新项目作为复制器。

https://github.com/mklueh/nuxt-plugin-webstorm-autocomplete-reproducer

该插件只是公开了一个演示函数，我尝试从组件访问它。

my.plugin.js

export default async ({app}, inject) => {
  inject("sdk", {
    "thisIsATestMethodThatShouldBeRecognized": function () {
      return "hello from plugin";
    }
  })
}

组件

出于某种原因，I cannot enable Node.js coding assistance 在这个复制器项目中，但在我的真实项目中，它是启用的。所以我不确定这是否相关以及问题的原因。

我如何确保 WebStorm 找到 Nuxt.js 插件公开的内容？

Answer 1

事实证明你必须使用 Vue.prototype 显式地将 $sdk 注册到全局 Vue 上下文。

将我的插件改成这样就可以了

import Vue from "vue";

export default async ({app}, inject) => {
  const plugin = {
    "thisIsATestMethodThatShouldBeRecognized": function () {
      return "hello from plugin";
    }
  };

  Vue.prototype.$sdk = plugin;

  inject("sdk", plugin);
}

Answer 2

我刚遇到这个问题，真的很烦人。我查看了 .nuxt 文件夹以查看插件是如何注入的，这是我发现的：

export default async ({app}, inject) => {
  const sdk = {
    "thisIsATestMethodThatShouldBeRecognized": function () {
      return "hello from plugin";
    }
  }

  app.$sdk = sdk
  inject("sdk", sdk)
}

在 WebStorm 2021.3.1 上测试

WebStorm 2021.3 在从组件访问 Nuxt.js 插件时显示 "Unresolved variable $sdk"

WebStorm 2021.3 shows "Unresolved variable $sdk" when accessing Nuxt.js plugin from component

autocomplete

nuxt.js

webstorm

nuxt-plugin