How do you stop prettier or beautify breaking JS objects onto multiple lines?

Question

I need this:

    var short_sleeve = {
        type: "Short Sleeve",
        id: this.item.epos_code,
    };

To look like this:

var short_sleeve = { type: "Short Sleeve", id: this.item.epos_code, };

Here is my prettierrc.json:

{
    "bracketSpacing": false,
    "endOfLine": "auto",
    "printWidth": 300,
    "proseWrap": "never",
    "tabWidth": 4,
    "trailingComma": "all",
    "useTabs": true
}

and here is my vs code settings.json

{
    "prettier.singleQuote": true,
    "prettier.tabWidth": 4,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.printWidth": 300,
    "editor.formatOnSave": true,
    "files.trimTrailingWhitespace": true,
    "diffEditor.ignoreTrimWhitespace": false,
    "prettier.proseWrap": "never",
    "materialTheme.accent": "Acid Lime",
    "twig-language.wrap": 100
}

I have tried the solutions here: Prevent Prettier from converting single line object declarations into multi line in Visual Studio Code? . Nothing

This is solution isn't relevant as HTML is working fine: How do you stop Prettier in VS code splitting attributes onto multiple lines?

I have played with printWidth, setting this to 1000. Nothing. I have checked to see no other formatters are installed and running. Still Nothing.

No idea why it won't condense smaller objects onto one line.

score 1 · Answer 1 · answered Nov 13 '22 at 01:22

If you want prettier to make an object into single line you need to remove the newline after {.

This means that the object should look like this, before you run Prettier:

var short_sleeve = { type: "Short Sleeve",
  id: this.item.epos_code,
};

And to go back to multiline from singleline, just add newline after { like so:

var short_sleeve = { 
type: "Short Sleeve", id: this.item.epos_code, };

Other than that, there does not seem to be a config option to make objects under certain characters singleline and above multiline.

score 0 · Answer 2 · answered Jan 17 '22 at 15:21

0

This is probably caused because your printWidth value is really large ("printWidth": 300)

printWidth specifies the line length that the printer will wrap on. Try decrementing the value to something like "printWidth": 160 instead (the default value is actually 80)

You can read more about it at the prettier documentation option page

answered Jan 17 '22 at 15:21

Ran Turner

14,906
5
47
53

nop, printWidth works fine. I put 2000 and some breakline has gone but still args (3 args, short strings) are breaking line. I tried 100, 120, 140, 160, 180, 200 but nothing – Maximiliano Bertiaux Jun 29 '22 at 21:35

How do you stop prettier or beautify breaking JS objects onto multiple lines?

2 Answers2