Bringing HTML Syntax Back on JavaScript Files

Image Title

posted by Khoa Quach
on May 11, 2020

It is pretty common nowadays to write HTML template(s) in JavaScript files. The rapid adoption of JavaScript frameworks such as React, Vue, Angular made life a lot easier for web application developers to ship custom and complex solutions by shifting our mentality on the front-end rendering engine.

However, for an old-timer like me, viewing HTML in JavaScript file without the syntax as always been strange. Getting that big block of orange code was disturbing.

I use VS Code as my main editor and after a quick search, I realize that the community came up with extension that would allow a nice rendering of the HTML code in JavaScript file.

So, to get the nicely formatted HTML:

  1. Launch VS Code
  2. Go to the extension tab and search for “es6-string-html”
  3. Install and activate the extension
  4. Relaunch VS Code
  5. Now, before the opening string literal, add the following /*html*/
  6. You are done, this will look a lot nicer

I am sure similar extension exists for Atom and other code editors. Let me know in the comments below.

Read more: Managing Site Hierarchy with SharePoint Hub Sites

Here at NIFTIT, we can handle projects of any size and difficulty; from Microsoft 365 to SharePoint solutions, we do it all! We are happy to share our digital offerings with you, so reach out here to learn more about how we can best support you.