Add html syntax support for template strings

[bahrus]

Great work! I would love it if you added this feature:

Like Webstorm, when you type and open and closed html tag inside a template string, the editor provides syntax highlighting, autocomplete, same as a regular html page.

Ideally, it would also recognize custom element tag names, and like WebStorm (Polymer plug-in), you would be able to jump to the place where the custom element is registered, with a single click.

(Same with editing a regular html file).

[basarat]

Highly recommend you take a look at JSX and the TypeScript experience around it. E.g. with React : https://www.youtube.com/watch?v=-oEa6UueHsk

the editor provides syntax highlighting, autocomplete, same as a regular html page.

We have a super special grammar handling : https://basarat.gitbooks.io/alm/content/features/typescript.html#syntax-highlighting that works by using the TypeScript compiler directly (technical details https://basarat.gitbooks.io/alm/content/contributing/syntax.html). That means it is exactly as accurate as TypeScript with detecting bugs. Sadly Angular HTML is not something that the TypeScript compiler has in its brain. I does have JSX / TSX so that is what is supported first class + much loved by this IDE.

For Angular HTML it will turn up once TypeScript / Angular team supports html analysis (JSX is not HTML. Its true JavaScript with just a fancy new object notation ... that is around React.createElement).

More on angular template analysis if you want to follow along : microsoft/TypeScript#5470 ❤️

Thanks for your interest and appreciation 🌹.

[bahrus]

Thanks for the explanation.

I actually am more interested in general web component support, not "Angular HTML", and to be able to benefit from some of the niceties of JSX / TSX, without some of what I consider the baggage. Template strings are more appealing to me than JSX / TSX, but I respect that many great coders such as yourself disagree. I just haven't "seen the light", sorry. I would find them more appealing, for starters, if I could easily convert them to a string, at a whim, without requiring a compiler. Is that possible?

Webstorm has a concept of "language injection", so that you can specify patterns, and within those patterns, the "Markup DSL" could change. Not just to HTML, but SQL, CSS, etc. It would be nice to see a feature like that in one of the lightweight editors, like Atom, VSCode or ALM. Whichever gets there first will have my allegiance.

Oh well, thanks anyway.

[basarat]

I just used Angular as an example of a framework that encourages template in-lining. Sorry if any offence was taken ❤️. Highly curious which framework (if any) are you using / trying out 🌹

It would be nice to see a feature like that in one of the lightweight editors, like Atom, VSCode or ALM. Whichever gets there first will have my allegiance.

You can get good color highlighting in atom already e.g. for Angular : TypeStrong/atom-typescript#798
Thats cause it uses textmate grammers which are easier to compose compared to code based grammars. However no good JavaScript aware autocomplete due to reasons mentioned above.

the "Markup DSL" could change

Would not be as good as having true code intelligence about the HTML which is what I was discussing. Some HTML framework might get there but none's there yet. Webstorm definitely tries its best to support it but that support is very much like its JavaScript (without TypeScript) support i.e. any token in your code is considered valid but with different certainties (unlike TS where something is Ok or Not).

[bahrus]

Hi basarat

No offence taken, just a bit disappointed. But your latest comments give me hope that you are interested in helping non-ReactJS developers :-). You are correct that Webstorm's Polymer intellisense / navigation support, and their support for other Template based frameworks like Angular2, probably isn't as air tight as what you get with the compile time checks of TSX. But it's close enough for me. I'll be exploring this atom plug-in next. I should also mention that I wonder if incorporating something like PolyLint would work, and maybe even be as air tight as TSX?

My interest in template strings was coming more from PolymerTS, and I was also dabbling in trying to define a "universal" component definition for simple components, that could be transformed into one of many competing component web component ergonomic layers, including Polymer, Aurelia, SkateJS, Preact, etc.

Thanks again and keep up the great work on this and your other projects (typescript book, atom plug-in, etc). Very much appreciated.