0

I'm trying to edit HTML in a Javascript file using template string literals but I'm unable to get all the same features like I would in an HTML file.

return (template string quotes) <p>Hello World</p> (template string quotes)

I've tried using extensions and the syntax highlighting works but formatting with prettier and emmet snippets doesn't work:

div#idName or div.className or ul>li*3 all don't work.

WebStorm has syntax highlighting and emmet snippets but no formatting. However, I'd prefer using VS Code. If anyone knows a solution I'd be extremely grateful!

Edit: I'm using Vanilla Javascript.

Gama11
  • 31,714
  • 9
  • 78
  • 100
Moody
  • 164
  • 2
  • 10
  • Is this actually a react file? – Teemu Jun 24 '21 at 04:48
  • @Teemu No, Vanilla Javascript. – Moody Jun 24 '21 at 05:05
  • Then you've to wrap everything outside of the templates in quotes, or maybe rather create a single template string. If you'd just show a real code ... Also, you say it's vanilla JS, "html" is not a keyword in JS. – Teemu Jun 24 '21 at 05:06
  • 1
    Does this answer your question? [How to interpolate variables in strings in JavaScript, without concatenation?](https://stackoverflow.com/questions/3304014/how-to-interpolate-variables-in-strings-in-javascript-without-concatenation) – JΛYDΞV Jun 24 '21 at 05:34
  • Take a look at the link above, it should help. – JΛYDΞV Jun 24 '21 at 05:34
  • @Teemu VS Code has a built-in option to see syntax highlighting when you add the keyword "html" before a template literal string in JS. I've added my code example. – Moody Jun 24 '21 at 05:41
  • @JayDev Unfortunately not. I'm looking to get syntax highlighting, emmet snippets and possibly formatting for HTML template string literals in Javascript. The template string literal works perfectly fine however, writing HTML in a JS file is extremely slow and annoying without the features I mentioned. That's what I'm trying to solve. I've tried extensions but they only solve the syntax highlighting part. If I could get at least emmet snippets as well to work then that would be perfect. – Moody Jun 24 '21 at 05:44
  • I've never seen such a "keyword" in VSCode. Anyway, the object structure is off, you can't just put `let = ...` in an object literal. – Teemu Jun 24 '21 at 05:46
  • @Teemu Oops. Yes, you're right I just added that let = for the example afterwards. Also, you're right again about there not being a built-in keyword. I think I got that from another SO question lol. I think the only way to do what I want is through an extension however the extensions such as lit-html only have syntax highlighting, none of them have emmet snippets or html formatting. – Moody Jun 24 '21 at 05:54
  • The reason prettier is throwing errors, and your not getting highlighting is because your code is so far from JavaScript the editor doesn't know what you are trying to do. You need to learn how to return string templates correctly. – JΛYDΞV Jun 24 '21 at 06:03

1 Answers1

2

I've solved emmet snippets in JS by editing the VS Code Emmet Include Languages settings.

YouTube: Enable emmet abbreviations in any language

Using an extension for syntax highlighting (lit-html or es6-string). Only thing I couldn't figure out is code formatting with Prettier for the html inside JS. Will update if I do.

Gama11
  • 31,714
  • 9
  • 78
  • 100
Moody
  • 164
  • 2
  • 10