让 WebStorm 了解全局注册了哪些 vue 组件 [英] Make WebStorm to understand which vue components are registered globally

问题描述

如果我在全局注册了一些 vue 组件，我如何让 WebStorm 理解它并帮助我自动完成?我从主 js 文件全局注册了一些自定义 ui 组件，如下所示:

If I have some of my vue components registered globally, how can I make WebStorm to understand it and help me with autocomplete? I have some custom ui components registered globally from main js file like this:

  const requireComponent = require.context(
    './components',
    true,
    /^\.\/ui-kit\/global\/.*ui-.*\.vue$/
  )

  requireComponent.keys().forEach(function(fileName) {
    let baseComponentConfig = requireComponent(fileName)
    baseComponentConfig = baseComponentConfig.default || baseComponentConfig

    let baseComponentName =
      baseComponentConfig.name ||
      fileName.replace(/^.+\//, '').replace(/\.\w+$/, '')

    Vue.component(baseComponentName, baseComponentConfig)
  })

所以我想在没有任何导入的情况下使用这样的组件.我可以，但唯一的问题是我对 WS 的此类组件没有任何认可.

So I want to use such components without any imports. And I can, but the only issue here I haven't any recognition of such components from WS.

WebStorm 也将此标签标记为

WebStorm also marks this tag as

未知的 html 标签 ui-input

Unknown html tag ui-input

此检查突出显示未知的 HTML 标签，并让我们将此类标签标记为自定义以避免将来将它们突出显示为未知

This inspection highlights unknown HTML tags, and lets mark such tags as Custom to avoid highlighting them as unknown in future

当然，如果我手动导入了该组件，来自 WebStorm 的建议可以正常工作.

Sure if I've imported that component manually, suggestions from WebStorm work fine.

推荐答案

对于那些来到这里的人，这是解决方案:

For those coming here, this is the solution:

1. 在您的项目中安装 vue-docgen-web-types(docs):npm i vue-docgen-web-types
2. 将以下内容添加到 package.json

    "scripts": {
        "update-web-types": "vue-docgen-web-types"
    },
    "web-types": "./web-types.json",

1. 运行 update-web-types npm 命令.

1. Run the update-web-types npm command.

如果您还希望能够单击自定义组件以导航到源文件，那么您必须执行以下操作，因为当前存在路径错误:

If you also want to be able to click on your custom components to navigate to the source file, then you have to do the following since there is currently a pathing bug:

这是您当前在生成的 web-types.json 文件中获得的内容:

This is what you currently get in the generated web-types.json file:

          "source": {
            "module": "./src\\components\\General\\Page.vue",
            "symbol": "default"
          }

但是如果您将路径修复为:

But if you fix the pathing to:

          "source": {
            "module": "./src/components/General/Page.vue",
            "symbol": "default"
          }

一切正常！

所以只需替换所有的//"；用\";运行 update-web-types npm 命令后.

So just replace all "//" with "\" after you run the update-web-types npm command.

Jetbrains 问题:

Jetbrains issues:

• Vue + TypeScript:无法识别全局注册组件
• Vue:改进对全局组件的检测

这篇关于让 WebStorm 了解全局注册了哪些 vue 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！