Add template literal (jsx) support

[dansullivan86]

Is it possible to add syntax highlighting support to template literals when not using .vue files.

{
    template: `
    <div :class="['loading', {'loading-dark': dark, 'loading-small': small}]">
        <i class="fa fa-spinner fa-pulse"></i>
    </div>
    `,
    props: {
        dark: {
            type: Boolean,
            default: false
        },
        small: {
            type: Boolean,
            default: false
        }
    }
};

[octref]

It's possible by modding the js grammar that comes with VSCode, so it embeds html grammar.

I'll look into that a bit later. One question: is there anyway to tell whether the js file is a vue component? For react support in VSCode, VSCode uses jsx/tsx to denote support for jsx literal.

[dansullivan86]

Unfortunately Vue components are exported as standard js objects in standard js files.

Could this be opt in for all js files?

Thanks

[octref]

Even if it's opt-in, I can't just mark everything in backtick as html, right?

[dansullivan86]

Template literals can contain plain strings, variables wrapped in ${} and html; https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals

I don't know anything about how the VSCode grammar stuff works to answer whether that would cause an issue.

[octref]

How to know stuff between backstick is html but not plain string? If there is no way to check, I can't blindly mark everything between backstick as html.

[dansullivan86]

Since HTML itself supports plain strings I'm not sure I see the issue?

If it helps Vue components are required to have a single root element so ignoring whitespace they would always start and finish with a tag e.g <div></div>

[octref]

This will take a lot of time to get right. I'll take a look after #26.

[octref]

Taking my words back -- this seems to be an interesting addition, and can be reused for other framework support, like how people in React is doing inlining CSS with string literals.

I'll try to have it by May for 1.0 release.

[octref]

Bookmark: https://github.com/angular/vscode-ng-language-service

[octref]

Alright, I thought angular already have this so I was bookmarking their LS. Turns out they have neither syntax highlighting nor intelligent completion for inline html template.

This is a hard feature to support.

[HerringtonDarkholme]

We can hard code

/template:\s*`/

as the start of template literal. So only specific string literal is highlighted.

Angular has implemented template completion by Angular Language Service as a tsserver plugin. While it is doable, I don't think it is easy to implement well, if it worth implementing at all.

[yozman]

hey guys, when will we get this feature? @HerringtonDarkholme @octref I just want highlight

[octref]

That's blocked by an upstream issue: https://github.com/Microsoft/vscode/issues/44056

[segphault]

I modified a sample vscode plugin and made it look for the template: property so that I could get highlighting on my Vue templates:

"html-tagged-template": {
    "begin": "(?<=template: `)", "end": "(?=`)",
    "contentName": "meta.embedded.html",            
    "patterns": [
        {
            "include": "#html-template-body"
        }
    ]
}

It's a quick-and-dirty solution that probably doesn't address every edge case, but I've been pretty happy with it so far.

[thedamon]

I have this working in javascript files using commenting.. either through https://github.com/mjbvz/vscode-comment-tagged-templates or (this is a bit more specific to lit-html) https://github.com/mjbvz/vscode-lit-html

Both require marking up your template literal.. which honestly I think makes sense. You could have template literals not meant to be HTML for sure.. but the notion of placing a comment in front of the backtick to denote the intended syntax is (to me) a reasonable standard:

const template = /* html */`
   <div class="template"></div>
`

I just added the first plugin (comment-tagged-templates) but found it doesn't work in Vue files... but wondered if there's a way to configure it to work through Vetur.

@segphault how did you set your "workingness" up exactly? Was it a matter of forking/cloning that repo and editing it specifically with the options you posted and then installing it as a VSCode plugin?

[yarnball]

I'm very keen to get this working in Sublime- has anyone had success?

[frankdugan3]

It's common in GraphQL-land to hint tooling by tagging the literals. Perhaps Something like:

export default {
  template: vue`...`
}

May need to import a lib that defines the vue tag to make this work, but I'd be happy to add that to my components. I already do it for my GraphQL files.

[octref]

@Patcher56 Would you be interested in taking this issue?

[p-kuen]

I'm very busy atm but I am very interested. If I have more time, I will do that for sure!

[arpadgabor]

Any other news on this issue? One use case for this feature is writing Vue stories in Storybook. Tried using es6-string-html but it has no autocompletion, not even for basic html tags. styled-components has an extension for CSS rules with highlighting and intellisense, maybe it can be used as inspiration.

[iFrozenPhoenix]

A workaround for people which are still interested could be to use the vscode extension https://marketplace.visualstudio.com/items?itemName=plievone.vscode-template-literal-editor. You can select the template literal, press ctrl + enter and a second editor opens. In this window you have syntax highlighting and autocompletion.

Remarks: I'm not the author of this extension nor affiliated.