VSCode Prettier 不再在 JS 中换行

Question

I was using basic JS and HTML for coding practice and have installed Prettier extension. I assigned Ctrl+Shift+L to use auto formatting. I used this extension before and I can clearly remember that it was wrapping long code lines and object into multiple logical lines, for example:

const someObj = {name: 'MyName', surname: 'MySurname'};

To this:

const someObj = {
  name: 'MyName',
  surname: 'MySurname'
};

Any suggestions what options should I play with to get this formatting?

Answer 1

That is the default (one line) formatting, but if you press enter immediately after your opening curly brace it should be formatted like in your second snippet.

Answer 2

Per Prettier's documentation:

By default, Prettier's printing algorithm prints expressions on a single line if they fit. Objects are used for a lot of different things in JavaScript, though, and sometimes it really helps readability if they stay multiline. See object lists, nested configs, stylesheets and keyed methods, for example. We haven't been able to find a good rule for all those cases, so Prettier instead keeps objects multiline if there's a newline between the { and the first key in the original source code. A consequence of this is that long singleline objects are automatically expanded, but short multiline objects are never collapsed.

You can find some workarounds in their docs here: https://prettier.io/docs/en/rationale.html#multi-line-objects