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
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!
