i use template literal in javaScript
let innerHTML = `<div><span>like this</span></div>`;
is it possible to automatically indent or prettier like jsx in intellij?
when i press [ ctrl + alt + l ] change nothing
i want to make this format automatically
let innerHTML = `<div>
<span>
like this
</span>
</div>`;
is it possible?
i use template literal in javaScript
let innerHTML = `<div><span>like this</span></div>`;
is it possible to automatically indent or prettier like jsx in intellij?
when i press [ ctrl + alt + l ] change nothing
i want to make this format automatically
let innerHTML = `<div>
<span>
like this
</span>
</div>`;
is it possible?
Share Improve this question asked Aug 25, 2021 at 8:20 187 Dodo187 Dodo 311 silver badge3 bronze badges 2- Is such an HTML fragment formatted correctly if pasted in HTML file? In JSX file is it highlighted as HTML (are tags recognized?)? Does it help if you add //language=HTML ment before the declaration? – Oksana Commented Aug 25, 2021 at 12:25
- "//language=HTML" is very suitable solution , thank you for your ment. – 187 Dodo Commented Aug 26, 2021 at 2:13
4 Answers
Reset to default 8You can simply add a ment before your template string and Prettier will pick it up:
function vanillaComponent() {
return /* HTML */ `
<div>
<h1>Hello</h1>
</div>
`
}
At the moment the ment has to be uppercase or it doesn't work. Tested using VSCode.
If you're using Prettier, you should use a template literal tag to mark it as HTML, otherwise it doesn't know that that string contains HTML.
Prettier calls this embedded language, you can see below that this also enables various syntax highlighters.
This line:
let innerHTML = html`
<div><span> This is a very long line that should be wrapped 123456789 123456789 123456789 </span></div>
`;
Is wrapped as
let innerHTML = html`
<div>
<span>
This is a very long line that should be wrapped 123456789 123456789
123456789
</span>
</div>
`;
You can get this html
function and others from code-tag
:
npm install code-tag
import { html } from 'code-tag';
html`<div>this is page "${document.title}"`
If you are using Visual Studio Code you can use this extension: https://marketplace.visualstudio./items?itemName=Tobermory.es6-string-html
(I'm sure there is equivalent extension for others IDE)
You can use Tagged templates;
const innerHtml = html`
<img src=${Icon} id="content-logo" />
`;
If you faced this kind of error: ReferenceError: html is not defined
. You can define html
function by your own;
const html = (strings, ...values) =>
String.raw({ raw: strings }, ...values);
https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Template_literals#raw_strings