JavaScript Prettier

Prettier is an opinionated JavaScript formatter inspired by refmt with advanced support for language features from ES2017, JSX, and Flow. It removes all original styling and ensures that all outputted JavaScript conforms to a consistent style.

See the change log for changes and road map.

Features

• Prettifies JavaScript
• Uses prettier node module
• Reads the standard prettier configuration file

Prettify

This extension calls the prettier node module behind the scenes to format any JavaScript document to its standards.

For example, take the following code:

foo(arg1, arg2, arg3, arg4);

That looks like the right way to format it. However, we've all run into this situation:

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

Suddenly our previous format for calling function breaks down because this is too long. What you would probably do is this instead:

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

Invoke the command from the context menu in the JavaScript editor.

FAQ

Updating from 1.1 to 2.0

Depending on your Visual Studio Configuration, you might experience that 2.0's output differs from the one you got with 1.1.
Most likely it is the tab size that has been changed from 4 spaces to 2. Please read the configuration section below on details how to get 4 spaces as tabsize.

Configuration

It is quite easy to setup Prettier to format alittle bit different. Like having 4 spaces instead of 2 spaces. The easiest way is to create a .prettierrc in your project root. Here is an example containing the two most common settings that people want to change: tabWidth is how many spaces it uses for indentation, and printWidth is how long a line can be before it breaks down:

  {
    "tabWidth": 4,
    "printWidth": 100
  }

Read more about the configuration file here

Can it use my bundled version of prettier?

Sorry not yet - but you are welcome to help out implementing this feature :)