Prettier Formatter for Visual Studio Code
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.
Install through VS Code extensions. Search for
Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
To ensure that this extension is used over other extensions you may have installed, be sure to set it as the default formatter in your VS Code settings. This setting can be set for all languages or by a specific language.
This extension will use prettier from your project's local dependencies (recommended). Should prettier not be installed locally with your project's dependencies, a copy will be bundled with the extension.
To install prettier in your project run:
This extension supports Prettier plugins when you are using a locally resolved version of prettier. If you have Prettier and a plugin registered in your
This extension uses Prettier Configuration files to set formatting options. Options are searched recurisevly down from the file being formatted so if you want to apply prettier settings to your entire project simply set a configuration in the root.
Configuring Default Options
Some users may not wish to create a new Prettier config for every project. Because Prettier searches recursively up the filepath, you can place a global prettier config at
You can also use the setting
Migrating from Versions 2.x
Version 3.0 has a number of breaking changes. The main thing to be aware of is that this extension no longer supports adding prettier specific settings to the VS Code configuration. If you previously had settings like
Finnaly, there are a few smaller breaking changes, including removal of support for older versions of prettier. See the CHANGELOG for details.
Using Command Palette (CMD/CTRL + Shift + P)
If you don't like the defaults, you can rebind
Format On Save
You can turn on format-on-save on a per-language basis by scoping the setting:
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:
Prettier Linter Integration (advanced)
The advanced option for integrating linters with Prettier is to use
This extension will automatically detect when you have these extensions installed and use them instead of
Settings will be read from (listed by priority):
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.
prettier.requireConfig (default: false)
Require a 'prettierconfig' to format
Supply the path to an ignore file such as
Supply a custom path to the prettier configuration file.
Supply a custom path to the prettier module.
A list of languages IDs to disable this extension on. Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run
You have legacy settings in your VS Code config. They are being ignored Would you like to migrate them to '.prettierrc'?.
If you recieve this error message it means that one of the following settings were found in your VS Code config. Either in your global or workspace settings.
Remove any of the following configurations by moving them to the Prettier Configuration.
You have legacy linter settings in your VS Code config. They are no longer being used.
If you recieve this error message it means that one of the following settings were found in your VS Code config. Either in your global or workspace settings. These configuration options should be deleted. See these instructions for linter configuration.
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.