全局注册的Vue组件高亮-WebStorm\PhpStorm

Question

我想知道是否有人知道是否可以以任何方式突出显示 Vue\Nuxt 项目中全局注册的组件？

我读过有关这件事的内容

https://github.com/JetBrains/web-types

。现在的问题是组件被突出显示，但当我单击它们时没有任何反应。 （不过应该重定向到源）

或者也许还有其他方法来突出显示全局注册的组件？

请帮忙，我很绝望

---

编辑

通过突出显示，我的意思是，每当我在任何其他地方使用组件时，我都希望它是“可点击的”。换句话说，我想让IDE知道该组件是在哪个文件中实现的。

在打印屏幕上，您可以看到标记了两个组件

FormField

和

FormInput

。 IDE 告诉我这些是

unknown HTML tags

。 FormInput 和 FormField 是全局注册的 Vue 组件

VueButton

虽然工作得很好，因为我将它导入到这个特定的文件中。

我只需单击

VueButton

标签即可直接进入其声明。我想要全局注册的组件完全相同

Answer 1

这个解决方案（受 bootstrap-vue-3 启发）对我有用：

import Skeleton from "@/components/ui/skeleton/Skeleton.vue";
import type { DefineComponent } from "vue";

declare module "@vue/runtime-core" {
  export interface GlobalComponents {
    // Define component and it's props here
    Skeleton: DefineComponent<{ class: string; show: boolean }>;
  }
}

app.component("Skeleton", Skeleton);