PhpStorm does not see web-types and does not offer hints

[PurpleTape]

Hello!

I want to use web-types locally in my Vue 3 project so that I can use PhpStorm hints in development.

To do this, I did the following:

1. Filled in the web-types property in package.json
2. I created a web-types structure in which I specified the testProp attribute for the HelloWorld component
3. Used the HelloWorld component in App.vue

However, when trying to specify the testProp attribute in the arguments of the component, PhpStorm does not give me a hint about the presence of such an argument. At the same time, PhpStorm gives a hint only about the arguments that I defined in HelloWorld.vue (testPropTwo)

May you tell me, is everything done correctly? If so, how do I make web-types work?

Here is a link to my repository: https://github.com/PurpleTape/phpstorm-web-types-issue

PhpStorm 2022.1.4 macOS 12.4

Thanks!

[piotrtomiak]

@PurpleTape At this moment Web-types does not work well with imports, there is no merging of the information if the component comes from the source code and web-types. I know it's a problem and I want to implement support ASAP.

[piotrtomiak]

@PurpleTape I've just finished the implementation and support will be present in the first EAP of 2022.3. Please note that in the newest version of Web Types, Vue components are contributed as follows:

"contributions": {
  "html": {
    "vue-components": [
      {
        "name": "HelloWorld",
        "description": "**HelloWorld** component",
        "props": [
          {
            "name": "testProp",
            "type": "string",
            "default": "testPropVal"
          }
        ],
        "source": {
          "module": "./src/components/HelloWorld.vue",
          "symbol": "default"
        }
      }
    ]
  }
}