New: Support Vue single file components #2890

[arturmiz]

Pull request checklist

Make sure you:

• Signed the Contributor License Agreement
• Followed the commit message guidelines

For non-trivial changes, please make sure you also:

• Added/Updated related documentation.
• Added/Updated related tests.

Short description of the change(s)

Closes #2890

[antross]

@arturmiz Awesome to see this progressing!

As always, feel free to ask if you have any questions - we're happy to help.

[arturmiz]

@antross I'll ask for tips for sure ;) I had some issues to build the extension locally, that's why I decided to try to build it via a pipeline to verify how it goes. I'll do my best to implement this one :)

[antross]

I had some issues to build the extension locally

Sorry about that. I'd love to help you get that working locally too if you can share more about what you ran into. Was this the extension-vscode package that was giving you trouble or extension-browser (or something else entirely)?

[antross]

I think we'll want to have this emit parse::start::html and parse::end::html events similar to what we did for parser-jsx. This will allow existing hints written for HTML content to pick this up automatically. From what I've seen of single-file components, this shouldn't require much (if any) translation to be suitable-enough for hint consumption.

On a related note, I should mention we now have built-in support for recognizing when documents are fragments to avoid applying guidance for things like meta tags, etc. I suspect this should "just work" if you use a similar approach to parser-html to parse the content of the component file.

[arturmiz]

Hi again! 😉
I got back to this and I think I'm missing some place to reference the parser-vue package as when I build it and try to run the extension-code, I open .vue file inside new VSC window but nothing gets logged. I checked the dist folder inside extension-code package, but the only thing matching vue is onLanguage:vue I put in package.json.
How to debug specific parser code then? 🤔

[antross]

I think this may be because .vue is not recognized by VS Code out-of-the-box so the file never gets passed to our extension.

Here's the list of built-in supported languages (and instructions for adding new ones):
https://code.visualstudio.com/docs/languages/identifiers

Because of this, registering for onLanguage:vue won't do anything unless we define the language as well, or until another extension that declares the vue language is installed.

We probably don't want to be in the business of declaring the language configuration, but at least from the samples it doesn't look like that's a required field. So in this case we'd probably need to either need to declare the language using something like (a):

    "languages": [{
        "id": "vue",
        "extensions": [ ".vue" ],
        "aliases": [ "Vue", "vue" ]
    }]

Or (b) require vetur to also be installed before we start analyzing .vue files: https://marketplace.visualstudio.com/items?itemName=octref.vetur&WT.mc_id=marketplace-pack-sdras

The former seems to be a potentially better user experience, but I don't know how multiple definitions are resolved by VS Code. If we go that route, we'd need to ensure it still works properly if a user already has the vetur extension installed.

[arturmiz]

I did add it to package.json under contributes but still doesn't work. However, the much weirder part is that when I run Debugger, the extension is not loaded on the extensions list... I guess it should be listed there, right? 🤔

[antross]

That is weird. Apart from the debugger you can check for signs of life from the extension by going to "View > Output" which opens a panel in the same area as the Terminal. In the "Output" panel there's a drop-down to the right which you should be able to switch to "webhint" to see debugging logs. (Note: Do all this in the new instance of VS Code launched when you start debugging)

I'd say try this first with something like a .html file we know should get activated. If that doesn't work then something's not getting attached/started...

[StEvUgnIn]

The author has defintely some issue with merge.

Can you help him to merge his last commit into master:
2f6ef06