Proper formatting / indentation inside backticks containing HTML (template literals)

Answered

Hi everyone 👋

When I write HTML inside JavaScript/TypeScript template literals (backticks), IntelliJ doesn’t format or indent the HTML correctly:

const html = `
<div class="wrapper">
<p>Hello ${clientName}</p>
<a href="${url}">Click here</a>
</div>
`;

Is there a way (settings, plugin, language injection, etc.) to make IntelliJ:

  • auto-indent HTML inside backticks,
  • apply HTML formatting on Ctrl+Alt+L,
  • and keep proper syntax highlighting?

Any solution or recommended setup?

Thanks!🙌

0
1 comment

Hi Sonwen 

Thanks for reporting this issue, I was able to reproduce your problem on my end with the latest version of the IDE and created a new bug in our tracker, IJPL-220197, and assigned it to the appropriate team for further investigation.

Please subscribe for further updates and upvote to give more visibility to the ticket. Also please review the workaround section to implement a temporary solution until the problem is fixed.

1

Please sign in to leave a comment.