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.
- 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
Added support for GraphQL and CSS files with PostCSS syntax.
New options jsxSingleQuote, spaceBeforeParen, alignObjectProperties. breakBeforeElse should now break properly.
Added support for TypeScript, CSS, LESS and SASS files.
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.
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
Set editor.formatOnSave
to true
in settings to automatically format files on save.
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 !
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
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 commases5 - 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 |
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 filesjavascriptreact - JSX filesYou 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 filestypescriptreact - TSX filesYou 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 filesless - LESS filesscss - SASS filespostcss - CSS files with PostCSS syntaxYou 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 filesYou 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 filesYou can now try to add other languages IDs that have GraphQL syntax but result is not guaranteed. No restart is required. |
["graphql"] |
- 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).
Feel free to open issue or PRs Here!