HTML highlighting inside JS strings


#1

Hi.

I think, it’s a common issue for frontend developers these days. In frameworks like Angular or Vue.js templates are usually declared inside JS files. So we have something like this:

Vue.component('test', {
	data: () => {
		return $testService
	},
	template:
`
<div v-on:click="hello">{{user.name}}</div>
`
})

This template property may contain a lot of HTML code. But there is no syntax highlighting nor autocompletion. In Angular we can use external templates, but in Vue.js, for instance, we can’t do that. Should this be a core feature of Atom or some 3rd party packages already implement it?


#2

I think you’re talking about something like this. This package highlights html templates within coffee files.

I’m not really sure about putting such feature in the core, but my first guess would be no, this is a pretty specific case (to create a template within code applies mainly for frameworks).
Best thing to do? Fork that package and create a similar one for JavaScript (actually, a generic package could be better, something similar to web-mode for Emacs).


#3

Yes, that’s almost exactly what I’m looking for. I will try to make something similar for JavaScript.


#4

Ok, instead of improving the highlighting I’ve wrote a deadly simple gulp extension that converts a very basic subset of .vue files to regular .js files, merging code and template. Works for me - now I can use existing packages for .vue files.