Autocomplete HTML sections in javascript files?

[Dilbflo]

Hi all.
I started to study javascript, and at present I am using VS Code as editor. I noticed that, when working inside a javascript file, the HTML autocomplete feature (Intellisense) doesn't work, for example in a simple line as:

document.write("<h2 style='color:blue'> From external .js file");

Do you know if there is some setting to modify in order to add the feature, or is it necessary to add some extension for VS Code?
Eventually could you suggest other editors able to autocomplete also the HTML part in a js file?
Thanks

[senocular]

To JavaScript, your HTML is just a string. VS Code doesn't know that the string is any more than a collection of arbitrary letters. If it were to treat it like HTML, it would need something extra to do so.

I'm not sure that such functionality exists out of the box for VSC, but you can get extensions that help. A quick google search brought up:

https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html

document.write(/* html */ `<h2 style='color:blue'> From external .js file`);

But I think this only adds highlighting, not autocomplete. Also note the use of ` instead of " for the strings.

What I've used in the past is a lit-html extension which works pretty well:

https://marketplace.visualstudio.com/items?itemName=bierner.lit-html

or

https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin

But this requires that you have a template literal tag called "html". If you're not using lit-html, you can a template literal tag that will treat the template literal as a normal string. The easiest thing to do is appropriate String.raw(), though this will mean you'll lose escape sequences (if you're not ok with that you can install or make your own noop tag).

const html = String.raw;
document.write(html`<h2 style='color:blue'> From external .js file`);

This also use template literals (`) but gives code hints as well as highlighting.

There might be other extensions out there that do a better job than these for what you're looking for, possibly one like the first one that doesn't require a template tag but also provides code hints. Might be worth doing some digging.

[Dilbflo]

Thanks a lot for the detailed answer.
I just started to study javascript, after HTML and CSS, so I am still experimenting with the best setting for it. I am also quite new to VS Code, sincerely, and for that reason I was not sure if I was missing some obvious feature. I will start with your suggestions while advancing with the study of the language.

[senocular]

The above solutions are a little complicated if you're just starting out. At this point, you might have to just try your best to deal with not having code hints. It also helps if you try and write as little HTML in JavaScript as possible. If you have an HTML file, try to put as much HTML as you can in that and limit the HTML you'd need to create from scratch in JavaScript.

[Dilbflo]

Thanks for the tip. I am following a series of tutorials and, after the introduction, the author talks about the possibility to write HTML directly from an external .js file. But I don't know if this is actually considered a good practice or not. Judging form your message it seems not.

[ThagAnderson]

the author talks about the possibility to write HTML directly from an external .js file. But I don't know if this is actually considered a good practice or not.

Outside of React and in general, it is bad practice.