How to get syntax highlighting for Vue templates (where HTML is in JS string literals) in Visual Studio?

Question

I'm developing a web app in Vue 3, with components described in Javascript files, containing HTML templates in Javascript string literals, for example:

app.component('my-alert', {
    props: {
        status: String,
        content: String,
    },
    template:
        `<div class="alert" :class="'alert-'+status" role="alert">
          {{content}}
        </div>`
})

My IDE is Visual Studio 2019. I'm aware of plugins for Visual Studio Code which enable that IDE to highlight HTML syntax in JS string literals like the above. (See this question and this other question for example.) What I want to know is, are there any similar plugins for Visual Studio 2019? If there are more than one, are any of them especially designed for Vue.js development?

@tauzN The back-end of our app is ASP.NET MVC and our team is used to Visual Studio. VS Code is a separate product and we don't want to run two different IDEs. — workerjoe
– workerjoe, Commented Apr 5, 2021 at 18:49
Fair enough. Unfortunately, I don't think you will find anything as good, or even close to VS Code. You might be able to just open the respective files in VS Code, and compile/build in VS as usual. — tauzN
– tauzN, Commented Apr 5, 2021 at 18:52
This might not be the answer you want, but if you really want this when most people use VSCode... it is not hard to create a Visual Studio extension. You need to create a Grammar folder with a JSON file (can reuse the ones from here) and a tmTheme file, plus some other files. I have done this for another language. If there is more interest I can provide a complete answer. — Zhe
– Zhe, Commented Dec 18, 2022 at 15:08

streetsummit · Accepted Answer · 2022-02-24 10:14:18Z

1

Try es6-string-html extension for Visual Studio Code

Comment /*html*/ before your string

edited Feb 24, 2022 at 10:14

answered Feb 15, 2022 at 9:26

streetsummit

213 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mbuechmann Over a year ago

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

Roger · Accepted Answer · 2024-10-08 08:17:56Z

0

as a complementary information from @streetsummit. I add an example.

export default {
    template: /*html*/`        
        <form @submit.prevent="add">
                <div class="border-gray-600 text-black">
                    <input v-model="NewTask" placeholder="new task" type="text" class="p-2"/>
                    <button type="submit" class="p-2 border-l bg-white">Add</button>
                </div>
        </form>
    `
}

answered Oct 8, 2024 at 8:17

Roger

1011 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to get syntax highlighting for Vue templates (where HTML is in JS string literals) in Visual Studio?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related