Prettier Now

Code Formatter for Visual Studio Code

VS Code package to format your Javascript using Prettier Miscellaneous. Based on Esben Petersen's extension and Bastian Kistner's extension. Prettier Miscellaneous is a fork of Prettier and allows more customization of the output.
This extension is a wrapper around Prettier Miscellaneous, please report issues regarding the output on Prettier Now or Prettier Miscellaneous.

---

Changelog

Update 1.4.0

• Added Prettier in status bar
• Added output to show parsing errors
• Added options to toggle Prettier in status bar / toggle automatic opening of Prettier output / toggle auto scroll to detected error
• Disabled parser option (selecting parser is handled automatically)
• Added missing option to disable JSON formatting
• Disabling a language should now work as expected

Update 1.3.0

Added support for GraphQL and CSS files with PostCSS syntax.

Update 1.2.0

New options jsxSingleQuote, spaceBeforeParen, alignObjectProperties. breakBeforeElse should now break properly.

Update 1.1.0

Added support for TypeScript, CSS, LESS and SASS files.

---

What does prettier do?

Prettier takes your code and reprints it from scratch by taking into account the line length.

For example, take the following code:

foo(arg1, arg2, arg3, arg4);

It fits in a single line so it's going to stay as is. 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. Prettier is going to do the painstaking work of reprinting it like that for you:

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

Prettier enforces a consistent code style (i.e. code formatting that won't affect the AST) across your entire codebase because it disregards the original styling by parsing it away and re-printing the parsed AST with its own rules that take the maximum line length into account, wrapping code when necessary.

---

Installation

Install through VS Code extensions. Search for Prettier Now.

Visual Studio Code Market Place: Prettier Now

Can also be installed using

ext install prettier-now

---

Usage

Format On Save

Set editor.formatOnSave to true in settings to automatically format files on save.

Or using Command Palette (CMD + Shift + P)

CMD + Shift + P -> Format Document

If you are using the Prettier output option, it is recommanded to use the Output Colorizer extension to get some syntactic coloring in the logs.

In order to run Prettier on your file, make sure VSCode recognises it as a filetype supported by Prettier Now. The filetype currently recognized is shown in the status bar. (e.g: JavaScript for .js files, Sass for .scss files, etc...). If for some reasons Prettier isn't applied on some filetype and you think it should, please let me know and report it here !

---

Settings

Extension settings are specified within VSCode Settings. Example config:

"prettier.jsxSingleQuote": true,
"prettier.useTabs": false,
"prettier.jsonEnable": [] // Will disable Prettier Misc on JSON files
"prettier.openOutput": false

Prettier Misc options

Option	Description	Default
printWidth	Fit code within this line limit.	120
tabWidth	Number of spaces it should use per tab.	4
useTabs	Use tabs instead of spaces.	true
singleQuote	If true, will use single instead of double quotes. Notes: • Quotes in JSX will always be double and ignore this setting. • If the number of quotes outweighs the other quote, the quote which is less used will be used to format the string - Example: "I'm double quoted" results in "I'm double quoted" and "This \"example\" is single quoted" results in 'This "example" is single quoted'.	true
jsxSingleQuote	If true, will use single instead of double quotes in JSX.	false
trailingComma	Controls the printing of trailing commas wherever possible. Valid options: none - No trailing commas es5 - Trailing commas where valid in ES5 (objects, arrays, etc) all - Trailing commas wherever possible (function arguments)	"none"
bracketSpacing	Print spaces between brackets in array literals. Valid options: true - Example: [ foo: bar ] false - Example: [foo: bar].	true
bracesSpacing	Print spaces between brackets in object literals Valid options: true - Example: { foo: bar } false - Example: {foo: bar}.	true
breakProperty	Allow object properties to break lines between the property name and its value.	false
arrowParens	Always put parentheses on arrow function arguments.	true
arrayExpand	Expand arrays into one item per line.	false
flattenTernaries	Format ternaries in a flat style. (UNSTABLE)	false
breakBeforeElse	Put else clause in a new line.	false
spaceBeforeParen	Put a space before function parenthesis.	false
alignObjectProperties	Align colons in multiline object literals. Does nothing if object has computed property names.	false
semi	Print semicolons at the ends of statements. Valid options: true - Add a semicolon at the end of every statement. false - Only add semicolons at the beginning of lines that may introduce ASI failures.	true
jsxBracketSameLine	If true, puts the > of a multi-line jsx element at the end of the last line instead of being alone on the next line.	false
groupFirstArg	Print functions like setTimeout in a more compact form.	false
noSpaceEmptyFn	Omit space before empty anonymous function body.	false

Extension options

Option	Description	Default
statusBar	Display Prettier status in the bottom bar	true
openOutput	Automatically opens Prettier output when an error is detected	true
autoScroll	Scroll automatically to line where error has been detected	true
javascriptEnable	Will apply Prettier Misc using JavaScript parser. Supported options: javascript - JavaScript files javascriptreact - JSX files You can now try to add other languages IDs that have JavaScript syntax but result is not guaranteed. No restart is required.	["javascript","javascriptreact"]
typescriptEnable	Will apply Prettier Misc using TypeScript parser. Supported options: typescript - TypeScript files typescriptreact - TSX files You can now try to add other languages IDs that have TypeScript syntax but result is not guaranteed. No restart is required.	["typescript","typescriptreact"]
cssEnable	Will apply Prettier Misc using PostCSS parser. Supported options: css - CSS files less - LESS files scss - SASS files postcss - CSS files with PostCSS syntax You can now try to add other languages IDs that have CSS syntax but result is not guaranteed. No restart is required.	["css","less","scss","postcss"]
jsonEnable	Will apply Prettier Misc using JSON parser. Supported options: json - JSON files You can now try to add other languages IDs that have JSON syntax but result is not guaranteed. No restart is required.	["json"]
graphqlEnable	Will apply Prettier Misc using GraphQL parser. Supported options: graphql - GQL and GraphQL files You can now try to add other languages IDs that have GraphQL syntax but result is not guaranteed. No restart is required.	["graphql"]

---

Know issues

• Prettier JSON parser doesn't tolerate comments as they're not part of JSON spec. It is cumbersome since it will trigger an error on document save and more and more projects make use of comments in JSON files (included VSCode configuration files). This will get fixed in upcoming versions of Prettier (see this issue).

---

Contribute

Feel free to open issue or PRs Here!