vs code wrap multiple line in quote

Question

I am new to vscode and and hardly get bothered by one thing.

 var template = "<div> <input type="text" class="input"> <input type="text" class="input"> <input type="text" class="input"> <input type="text" class="input"> <input type="text" class="input"> </div> "

I have no clue why vscode is not wrapping all those line in quote. It just throws a syntax error. It reads when they aligned in one line but when I break the line to make it look good, the code is not working. Any idea?

Answer 1

You can do like this:

 var template = ` <div> <input type="text" class="input"> <input type="text" class="input"> <input type="text" class="input"> <input type="text" class="input"> <input type="text" class="input"> </div> `; document.body.innerHTML = template;

If you aren't familiar with template strings here is the MDN documentation .

Answer 2

You can try this way. Just use single quotes to surround the variable string, and use backslashes to change lines.

 var template = '<div>\ <input type="text" class="input"> \ <input type="text" class="input"> \ <input type="text" class="input"> \ <input type="text" class="input"> \ <input type="text" class="input"> \ </div>'; document.body.innerHTML = template;

Answer 3

It fails because of multiple reasons:

1. You use double-quotes both to open and closing the variable aswell as the attributes. The opening double-quote of the first attribute already closes the variable therefor.
2. A JS variable is not allowed to have linebreaks.
3. you do not close the variable with a semicolon or comma (in case more variables follow)

The only way you can fix it is like in the example below. You have to open and close the variable and use a + to continue the variable in the next line:

 var template = '<div>' + '<input type="text" class="input">' + '<input type="text" class="input">' + '<input type="text" class="input">' + '<input type="text" class="input">' + '<input type="text" class="input">' + '</div>'; document.body.innerHTML = template;

Answer 4

or you can

var template = '<div>\
                  <input type="text" class="input">\
                  <input type="text" class="input">\
                  <input type="text" class="input">\
                  <input type="text" class="input">\
                  <input type="text" class="input">\
                </div>'