Help with formatting of my HTML files in VS Code

For some reason, the paragraph content in my HTML files is breaking into multiple lines in VS Code. I made the mistake of making changes to my settings based on a video I watched. I thought I undid the changes I made, but maybe I missed something. And that is assuming the change in the editor is from those settings changes.

Anyway, here is a screenshot of what I am talking about. Any help solving this would be much appreciated. FYI, it does not affect the output on the page:

I’m assuming those are just line breaks in your text. Have you tried googling for “remove line breaks in vscode”? I just did and the first result I got back seemed to have some good suggestions. Hopefully something there will work for you.

They weren’t line breaks in the text I pasted in. It recently started happening. Let me try googling that phrase - thanks!

a. what do you have installed regarding formatting?
b. what have you adjusted regarding when formatting is applied?

Because I’m assuming this is Prettier or similar, and one of the key things that the formatter will try to do is ensure consistent line length. But if you’ve got plain text (like you have within the tags), then it’s going to get confused.

For example, if I forget to set things up properly when I’m using Prettier, it’ll take something like

console.log(`log for a specific part of the program thats a very very very long line I don't want broken up`)

And produce

console.log(
  `
    log for a specific part 
of the program thats a very 
very very long line I don't 
want broken up
  `
)

There’s normally a setting to handle these common situations, but without knowing how you’ve set it up it’s a bit hard to tell you how to fix it.

I do have Prettier enabled but I’ve disabled it in the past. Do you think I should remove it and reload VS Code?

You could do, but it’s really useful, so if it’s that doing it, just fix that. There’ll be a section in “settings” for Prettier, and in that some HTML format settings, so that’s where you look.

Edit: you can disable the plugin. So disable it and see if you get the same behaviour (you shouldn’t, but doesn’t hurt to check). Then if it is Prettier doing it, then enable and go to the settings

It’s disabled and still doing it. Plus I’ve had Prettier installed for well over a year. This just started happening a year or so ago. Is there a way to reset VS Code? I could make a note of my extensions and JSON settings, then set it back to default.

Yeah just delete all the settings in the JSON settings file then save. But that’ll wipe everything, if you haven’t I stalled another plugin that’s affecting things then the only ones that are likely to have any bearing are these: HTML Programming with Visual Studio Code

Oh, you know what - I made two changes for HTML files because I got sick and tired of the auto-suggestions popping up and accidentally clicking on them which would open MDN docs. I added these two:

  "html.hover.references": false,
  "html.hover.documentation": false,

Nope, it’s not that. I removed those rules then restarted VS and it still happens.

Is there a way to tell when an extension was installed? I know I recently added D3,js snippets and I have Bracket Pair Colorizer but I thought I recently added that one after removing a similarly named one. What extension do you use for brackets?

I also recently took a course on MySQL where I installed Workbench and I see workbench rules in my settings file. But they are not at the end. Would adding an extension edit settings.json, and if so would it push the setting onto the end of the settings? Here is a setting that looks odd:

    "workbench.editorAssociations": {
        "*.ipynb": "jupyter.notebook.ipynb"
    },

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.