Question

0

86

Views

vs code wrap multiple line in quote

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?

about 4 years ago · Juan Pablo Isaza

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T19:24:34.960Z

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 · 2022-07-03T19:24:34.986Z

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 · 2022-07-03T19:24:34.993Z

It fails because of multiple reasons:

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.
A JS variable is not allowed to have linebreaks.
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;

0

86

vs code wrap multiple line in quote

3 answers

0

0

0

Find remote jobs

Andres GPT