Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

JavaScript · TypeScript · Flow · JSX · JSON
CSS · SCSS · Less
HTML · Vue · Angular
GraphQL · Markdown · YAML
Your favorite language?

Install through VS Code extensions. Search for Prettier - Code formatter

Visual Studio Code Market Place: Prettier - Code formatter

Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

ext install esbenp.prettier-vscode

⚠ A word of warning-if you have any other code formatting extensions installed such as for example hugely popular HookyQR.beautify or taichi.react-beautify they might take precedence and format your code instead of Prettier leading to unexpected results.

1. CMD + Shift + P -> Format Document
OR
1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection

Visual Studio Code provides default keyboard shortcuts for code formatting. You can learn about these for each platform in the VS Code documentation.

If you don't like the defaults, you can rebind editor.action.formatDocument and editor.action.formatSelection in the keyboard shortcuts menu of vscode.

Respects editor.formatOnSave setting.

You can turn on format-on-save on a per-language basis by scoping the setting:

// Set the default
"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
    "editor.formatOnSave": true
}

This extension support Prettier plugins when you are using a locally resolved version of prettier. If you have Prettier and a plugin registered in your package.json, this extension will attempt to register the language and provide automatic code formatting for the built-in and plugin languages.

The prefered way of integrating with linters is to let Prettier do the formatting and configure the linter to not deal with formatting rules. You can see how this is done here. To continue to use Prettier and your linter we recommend you use the ESLint or TSLint extensions directly.

You can enable Auto-Fix on Save for either TSLint or ESLint and still have formatting and quick fixes:

"eslint.autoFixOnSave": true,
"tslint.autoFixOnSave": true,

NOTE: If you are seeing conflicts between Prettier and ESLint this is because you don't have the right ESLint or TSLint rules set as explained in the Prettier documentation.

Legacy Configuration

WARNING: Due to a bug in the prettier-eslint library, this extension is NOT compatible with ESLint version 6.

The legacy approach is to use the linters bundled in this project. prettier-eslint and prettier-tslint are included with the installation of this extension. There is no need for a separate local or global install of either for functionality.

eslint, tslint, and all peer dependencies required by your specific configuration must be installed locally. Global installations will not be recognized.

If you have both "prettier.tslintIntegration" and "prettier.eslintIntegration" enabled in your Visual Studio Code settings, then TSLint will be used to lint your TypeScript code. If you would rather use ESLint, disable the TSLint integration by setting "prettier.tslintIntegration" to false.

This extension uses Application Insights to track anonymous feature usage and version info. We don't record IP addresses or any other personally identifiable information. The reason we track this data is simply to help with prioritization of features.

This extension respects the VS Code telemetry setting so if you have telemetry disabled in VS Code we will also not collect telemetry. See the Visual Studio Code docs for information on how to disable telemetry.

Settings will be read from (listed by priority):

1. Prettier configuration file
2. .editorconfig

Or if no prettier configuration file exist

1. .editorconfig
2. VS Code prettier's settings (described below with their default)

Fit code within this line limit

Number of spaces it should use per tab

If true, will use single instead of double quotes

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)

Controls the printing of spaces inside object literals

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

Which parser to use. Valid options are 'flow' and 'babylon'.

Whether to add a semicolon at the end of every line (semi: true), or only at the beginning of lines that may introduce ASI failures (semi: false)

If true, indent lines with tabs

(Markdown) wrap prose over multiple lines.

Include parentheses around a sole arrow function parameter

Use single quotes instead of double quotes in JSX.

Specify the global whitespace sensitivity for HTML files. Learn more here

Specify the end of line used by prettier. Learn more here

Change when properties in objects are quoted. Learn more here

These settings are specific to VS Code and need to be set in the VS Code settings file. See the documentation for how to do that.

Use prettier-eslint instead of prettier. Other settings will only be fallbacks in case they could not be inferred from ESLint rules.

Use prettier-tslint instead of prettier. Other settings will only be fallbacks in case they could not be inferred from TSLint rules.

Use prettier-stylelint instead of prettier. Other settings will only be fallbacks in case they could not be inferred from stylelint rules.

Require a 'prettierconfig' to format

Supply the path to an ignore file such as .gitignore or .prettierignore. Files which match will not be formatted. Set to null to not read ignore files. Restart required.

A list of languages IDs to disable this extension on. Restart required. Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run

This extension will use prettier from your project's local dependencies. Should prettier not be installed locally with your project's dependencies, a copy will be bundled with the extension.