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
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.
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}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:
npm install prettier -D
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 package.json, this extension will attempt to register the language and provide automatic code formatting for the built-in and plugin languages.
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 prettier.tabWidth or anthing else from the Prettier Configuration those VS Code settings will be ignored. Version 3.0 of the extension will attempt to find and warn you if it detects those settings as well as help you migrate to a .prettierrc file. See also Error Messages
Additionally, the settings for Linters have been removed. Linters are still supported, but the settings are no longer needed. See the documentation on linters below. See also Error Messages
Finnaly, there are a few smaller breaking changes, including removal of support for older versions of prettier. See the CHANGELOG for details.
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
}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,
"editor.codeActionsOnSave": {
"source.fixAll.tslint": 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.
Prettier Linter Integration (advanced)
WARNING: Due to a bug in the
prettier-eslintlibrary, this extension is NOT compatible with ESLint version 6.
The advanced option for integrating linters with Prettier is to use prettier-eslint, prettier-tslint, or prettier-stylelint. In order to use these integrations you MUST install these modules in your project's package.json along with dependancies like prettier, eslint, tslint, etc.
This extension will automatically detect when you have these extensions installed and use them instead of prettier by itself. For configuration of these linter integrations, see their respective documentation.
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):
- Prettier configuration file
.editorconfig
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.
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.
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. Restart required. 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.
prettier.printWidth
prettier.tabWidth
prettier.singleQuote
prettier.trailingComma
prettier.bracketSpacing
prettier.jsxBracketSameLine
prettier.semi
prettier.useTabs
prettier.proseWrap
prettier.arrowParens
prettier.jsxSingleQuote
prettier.htmlWhitespaceSensitivity
prettier.endOfLine
prettier.quoteProps
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.
prettier.eslintIntegration
prettier.tslintIntegration
prettier.stylelintIntegration