CODEWITHSUNDEEP
javascriptvisual-studio-codecode-formatting
Script47
Script47

Reputation: 14540

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

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?

Upvotes: 8

Views: 6066

Answers (4)

defend orca
defend orca

Reputation: 743

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.

Upvotes: 1

janat08
janat08

Reputation: 1777

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".

Upvotes: 0

Script47
Script47

Reputation: 14540

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.

Upvotes: 3

Namaskar
Namaskar

Reputation: 2109

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

enter image description here

Upvotes: 2

Related Questions