How to prevent Visual Studio Code from pushing chained functions on to new line?

Question

How do I prevent Visual Studio Code from pushing chained JavaScript functions on to a new line as can be seen illustrated by the GIF below:

As you can see, it makes the code extremely hard to view and extends a simple if check in to multiple lines. I am using the extension called Prettier - Code Formatter and I have looked through the preferences and found the following:

// Format a file on save. A formatter must be available, the file must not be 
//auto-saved, and editor must not be shutting down.
"editor.formatOnSave": false

Which stops it formatting completely when you hit save. I have looked through the other options and couldn't find a setting for this.

Does the above process have a name?

How can I retain formatOnSave but prevent it from formatting it in the way that it is?

Counteraccusation

I'm quite sure this is not a native VScode behavior. and you just made me download a new plugin. ontopic though: why not ask on their git page github.com/prettier/prettier/issues – Magdala

Answer 1

It seems that this isn't configurable (unsure if it ever will be), this is a direct copy of an Github post from this issue:

The suggested behavior of this feature has been:

• Wrap after hitting the line length limit
• Wrap after 3 chained methods
• Wrap after a configurable number of chained methods
• Wrap when one of two conditions is met:
  • The line length limit is reached
  • The user opts into it by manually inserting a newline, like object literals

The initial implementation was (1).

The current implementation is (2).

(3) is unlikely to happen since prettier tries to avoid configuration.

The consensus is against (4) due to wanting to minimize user input influence in prettier's output.

I think the current implementation (2) makes sense in the majority of cases, but I find myself wanting (4) often enough that I no longer use prettier for JS.

Based on that, there isn't currently a way to modify this behaviour and neither is there any plans for this (as of writing this).

Definitely not the answer I'd like, but it is what is given.

Counteraccusation

Answer 2

Since it's on their GitHub as a feature, it makes sense there wouldn't be an option to change it from the configuration. There is a way to achieve what you want, given you add // prettier-ignore

Tragedienne

This seems like an option, though, considering I wouldn't want this to happen anywhere it might add a lot unwanted 'noise' to the code. Would it work if I simply put it at the start of the file or would I have to do this at a block level? Also, would it stop all formatting or just that type of format? The key being, I'd prefer to have it so it does all other formatting except that. – Counteraccusation

No I realize it's not a good solution. It will only affect the following node from the AST, so no not from the start of the file. And no, it will prevent any formatting. However there are configurations to turn it off per file. – Tragedienne

Answer 3

don/t use prettier, try beautify + ESlint

this is serious answer, because i try to solute it for a long time. but it really can not be fix.

Aristocracy

For the record nowadays beautify is deprecated, but there's a fork: marketplace.visualstudio.com/… – Adinaadine

Answer 4

VSCode doesn't actually use prettier, and it likely slipped through as one of your extensions, or enabled as eslint or hint setting. Had this occur to me. Try this in terminal: "code --disable-extensions".

Latreshia