How can I disable Visual Studio Code auto trimming whitespace of my HTML classes?

Question

<ul{{attributes.addClass('container container-desktop')}}>

when I press Command + / (autoformat), all my classes are without whitespace:

<ul{{attributes.addClass('containercontainer-desktop')}}>

I searched in the settings of Visual Studio Code for a setting. But did not found a solution to disable it.

Answer 1

That's a correct behavior from your IDE, because addClass with a string parameter is meant to add one class.

For multiple classes, refer to this documentation:

{%
  set classes = [
    'red',
    'green',
  ]
%}
<div{{ attributes.addClass(classes) }}></div>

Answer 2

Try this and see if it solves the problem for you.

Open Visual Studio Code and:

• Click menu File → Preferences → *Settings.
• Click {} at the top
• It leads you to a settings.json file were you'll add: "files.trimTrailingWhitespace": true
• Save your file.