How to set VSC / ESlint not to move css classes to new line?

EDIT: [24th of May 2021]

The author of this question notified me that it was required that they reset there catch in order to get the default VSCode HTML Language Features Formatter to format their code properly. After some research I found that this is often caused by VSCode extensions that format HTML. Its important to use extensions that have an active developer that responds to GitHub issues, and/or extensions that are reputable.

Original Post: [22nd of May 2021]

You can safely say its not ESLint formatting your class tags, because its not a formatter, and its not for Markup/HTML. I went into my VSCode editor to try and reproduce the formatting that your images showed -- I already had a project open so I just .gitignore'd a test HTML file and wrote a long class attribute inside of a header tag, right away it formatted the class attribute the same as your example. This was a bit bizar because when I write html, I don't get this result, but the project I had open was a Node.js Project. Right away I knew it had to do with the formatter I was using. I reconfigured VSCode to use its default formatter with settings that I have typed an example of below. This will fix your problem if you understand what you are doing and do it correctly.

Bellow is a list of settings that configure the default HTML formatter that comes with VSCode:

    
{
    // local settings.json @ _projectroot/.vscode/settings.json
    

    "html.format.wrapLineLength": 200,
    "html.format.wrapAttributesIndentSize": 4,
    "html.format.wrapAttributes": "auto",
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features",
        "editor.formatOnSave": true
    }
}

The above sets the html defaultFormatter editor to its default setting which is the VSCode HTML formatter, but just incase you should probably also do the following.

1. Open the HTML file you want to format, and press the [F1] Key.

2. When the quick-input above drops open type Format Document and select the Format Document With... option.

3. Select Configure Default Formatter at the very bottom.

4. And choose HTML Language Features

VSCode does not split the attribute tags up, as shown in your example, under any configuration that I could find. What was causing it my VSCode editor was PRETTIER which you can use, but you have to set a special language options setting to using the html parser for html files, however, even if you are using a formatter for your JavaScript the above solution I offered should be the most straight forward & robust solution.

In my case, I am working on Vue project so I have Vetur extension which uses prettier for formatting html.

Prettier wraps the html attributes into new lines. To prevent that,

Add "printWidth": 300 in .prettierrc file. On save, this will format multiple css classes into same line.