Vetur completion: tag casing and child component attributes

[rickyruiz]

Vetur 0.16.1 introduced a setting called vetur.completion.tagCasing :

        "vetur.completion.tagCasing": {
          "type": "string",
          "default": "kebab",
          "enum": [
            "initial",
            "kebab"
          ],
          "enumDescriptions": [
            "use the key in `components: {...}` as is for tag completion and do not force any casing",
            "kebab-case completion for <my-tag>"
          ],
          "description": "Casing conversion for tag completion"
        },

Since this boilerplate recommends using PascalCase for component names, settings.json in .vscode most probably should include "vetur.completion.tagCasing": "initial". This will make tag completion and child component attribute completion work.

Tag completion in PascalCase:

Child component attribute completion:

[chrisvfritz]

Hm, the autocompletion still doesn't seem to be working with that change. 😕

[rickyruiz]

I could not make it work yesterday, but I found the issue in less than 1 min today, literally 😢. I thought the problem was with some settings that you have in the workspace, which is not the case.

The problem is that in JS we do not need to use the .vue extension when importing a Vue file. We opt-out of type-checking and the any type is used.

If we add the .vue extension that changes:

And now it works as expected:

---

This will not work with components registered globally though. This means all the _base components completion will not work because Vetur uses the keys in the components property.

I'll submit an issue to Vetur about the .vue extension problem and maybe one about the components registered globally. I'll keep you posted.

[rickyruiz]

Apparently you need to add the .vue extension for completion to work.

The last sentence of this comment https://github.com/vuejs/vetur/issues/1107#issuecomment-46579116 references this link https://github.com/vuejs/vetur/blob/master/docs/FAQ.md#vetur-cannot-recognize-my-vue-component-import-such-as-import-comp-from-comp

[chrisvfritz]

Thanks for this research. 🙂

[chrisvfritz]

I decided to start forcing .vue extensions, so this is resolved now.