Make WebStorm to understand which vue components are registered globally

user_2670121 0
Viewed 2211

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)
  })

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.

No auto-completion screenshot

WebStorm also marks this tag as

Unknown html tag ui-input

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

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

vue.js webstorm
1 Answers

For those coming here, this is the solution:

  1. Install vue-docgen-web-types in your project (docs): npm i vue-docgen-web-types
  2. Add the following to package.json
    "scripts": {
        "update-web-types": "vue-docgen-web-types"
    },
    "web-types": "./web-types.json",
  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:

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"
          }

The everything works!

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

Jetbrains issues:

user_82054970
Related