Prevent Prettier from converting single line object declarations into multi line in Visual Studio Code?

Question

I'd installed prettier extensions and my json object definitions are now breaking lines after formatting. How can I avoid it? I want to keep inline object declarations.

for instance, before formatting:

  "properties": {
    "d0":  {"type":"boolean","default":false},
    "d1":  {"type":"boolean","default":false},
    "d2":  {"type":"boolean","default":false},
    "d3":  {"type":"boolean","default":false},
    "d4":  {"type":"boolean","default":false},
    "d5":  {"type":"boolean","default":false},
    "d6":  {"type":"boolean","default":false},
    "d7":  {"type":"boolean","default":false},
    "d8":  {"type":"boolean","default":false},
    "d9":  {"type":"boolean","default":false}
  }

after formatting:

  "properties": {
    "d0": {
      "type": "boolean",
      "default": false
    },
    "d1": {
      "type": "boolean",
      "default": false
    },
    "d2": {
      "type": "boolean",
      "default": false
    },
    "d3": {
      "type": "boolean",
      "default": false
    },
    "d4": {
      "type": "boolean",
      "default": false
    },
    "d5": {
      "type": "boolean",
      "default": false
    },
    "d6": {
      "type": "boolean",
      "default": false
    },
    "d7": {
      "type": "boolean",
      "default": false
    },
    "d8": {
      "type": "boolean",
      "default": false
    },
    "d9": {
      "type": "boolean",
      "default": false
    }
  }

Answer 1

Why this behaviour happens:

Prettier breaks lines after a certain amount of characters specified by the Print Width config option.
This option can be changed but it should be noted that

Prettier recommends setting this option to < 80 to improve readability, (source)

For readability we recommend against using more than 80 characters:

In code styleguides, maximum line length rules are often set to 100 or 120. However, when humans write code, they don’t strive to reach the maximum number of columns on every line. Developers often use whitespace to break up long lines for readability. In practice, the average line length often ends up well below the maximum.

Prettier’s printWidth option does not work the same way. It is not the hard upper allowed line length limit. It is a way to say to Prettier roughly how long you’d like lines to be. Prettier will make both shorter and longer lines, but generally strive to meet the specified printWidth.

How to prevent this behaviour:

I'll go over some of the ways you can stop auto-wrapping:

• Stopping auto-wrapping globally
• Stopping auto-wrapping locally
• Stopping auto-wrapping for a particular group of code

---

Stopping auto-wrapping globally

If you use the Visual Studio Code editor and the esbenp.prettier-vscode extension all you need to do to stop auto-wrapping is modify your global settings.json file. These are the steps that you need to follow.

1. Open settings.json

• Use Ctrl+Shift+P to open the command palette.

• From here type and select: > Preferences: Open Settings (JSON)

2. Set the option in settings.json

Appending this line to the end of your settings.json file means Prettier will only wrap the line when it exceeds 1000 characters (essentially never). You can change this number to preference, for reference the default is 80.

{
  "prettier.printWidth": 1000
}

Just make sure to save changes to the file and you are done!

---

Stopping auto-wrapping locally

This method works regardless of your IDE, we can create a .prettierrc file in the root of our project, and set the printWidth for our local project.

1. Create the .prettierrc file

Some older operating systems might try to prevent you from creating an extension only file. So when in the root of your project you can use this command to create your file.

Linux:

touch .prettierrc

Windows:

echo "" > .prettierrc

2. Set the printWidth

Add these lines to your .prettierrc file.

{
  "printWidth": 1000
}

Save the file and you're good to go,

Once again:

Appending this line to the end of your .prettierc file means Prettier will only wrap the line when it exceeds 1000 characters (essentially never). You can change this number to preference, for reference the default is 80.

---

Stopping auto-wrapping for a particular group of code

You can use a prettier-ignore comment to tell prettier not to format the following block of code, here are some examples from the prettier docs for JavaScript, HTML and CSS.

JavaScript

// prettier-ignore
matrix(
 1, 0, 0,
 0, 1, 0,
 0, 0, 1
)

This would otherwise be formatted to:

matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);

HTML

<!-- prettier-ignore -->
<div         class="x"       >hello world</div            >

This would otherwise be formatted to:

<div class="x">hello world</div>

CSS

/* prettier-ignore */
.my    ugly rule
{

}

This would otherwise be formatted to:

.my ugly rule {
}

You can see the full list of language specific ignore strings here, as well as the options for ignoring a certain range of a file.

---

Note: Local settings in the .prettierrc file will override global settings in the settings.json file.

Answer 2

Prettier should only break lines up when they go beyond the print width that you have set (defaults to 80).

Assuming you're using this extension, experiment with the following setting:

{
  "prettier.printWidth": 80
}

If that doesn't work, go through and make sure you don't have any other code formatting extensions installed that might be taking precedence.