I'm new to frontend tooling. I started using Vite and I'm wondering why the main.js file has html code in it. It seems like a bad idea to put html in ticks and not have autocomplete, syntax highlighting, and such. I'm used to having an HTML file, or multiple, a CSS file, and a JS file. Is there a way to restructure the files to look like that without losing functionality? If not, should I have a .js file for each page? If so, is there a way to have the html colored and not always look orange?

There's got to be a better way than this:

document.querySelector('#app').innerHTML = `
  


logo" alt="Vite logo" />
    



Hello Dave!




      Click on the Vite logo to learn more
    

`

Not the same question as What is the purpose ...