Skip to content
Visual Studio Code extension for Prettier
TypeScript JavaScript Other
Branch: master
Clone or download
dependabot-preview and ntotten Bump sinon from 8.0.2 to 8.0.4 (#1186)
Bumps [sinon](https://github.com/sinonjs/sinon) from 8.0.2 to 8.0.4.
- [Release notes](https://github.com/sinonjs/sinon/releases)
- [Changelog](https://github.com/sinonjs/sinon/blob/master/CHANGELOG.md)
- [Commits](sinonjs/sinon@v8.0.2...v8.0.4)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>
Latest commit 700f1df Jan 15, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.azure-pipelines updated readme formatting Dec 19, 2019
.github Delete issue-close-app.yml Nov 28, 2019
.vscode Added support for global module resolution Dec 14, 2019
samples added tslint and eslint samples Dec 15, 2019
scripts fixed clean script Nov 11, 2019
src fixed issue with opening output Dec 22, 2019
test-fixtures updated dependancies in tslint test Dec 19, 2019
.gitattributes Test cleanup Nov 19, 2019
.gitignore use webpack to build extension Oct 26, 2019
.prettierignore Prettier, precommit hooks, linting Aug 24, 2019
.prettierrc added prettierrc Oct 22, 2019
.vscodeignore updated vscodeignore Nov 19, 2019
CHANGELOG.md fixed issue with opening output Dec 22, 2019
CODE_OF_CONDUCT.md Prettier, precommit hooks, linting Aug 24, 2019
CONTRIBUTING.md Prettier, precommit hooks, linting Aug 24, 2019
CONTRIBUTORS.md Prettier, precommit hooks, linting Aug 24, 2019
LICENSE Add License Jan 11, 2017
README.md Update stylelint plugin integration docs (#1171) Jan 3, 2020
icon.png Added prettier dark icon. (#90) Jul 1, 2017
package-json-schema.json Prettier, precommit hooks, linting Aug 24, 2019
package.json Bump sinon from 8.0.2 to 8.0.4 (#1186) Jan 15, 2020
package.nls.json config description cleanup Dec 19, 2019
package.nls.zh-cn.json Removed unused localization code Nov 25, 2019
package.nls.zh-tw.json Remove linter support Aug 24, 2019
tsconfig.json removed unneeded tslint config value Dec 18, 2019
tslint.json refactoring how config is resolved, removed vscode config options, be… Oct 21, 2019
webpack.config.js spell check Nov 19, 2019
yarn.lock Bump sinon from 8.0.2 to 8.0.4 (#1186) Jan 15, 2020

README.md

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.

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

Azure Pipelines Build Status VS Code Marketplace Downloads VS Code Marketplace Installs code style: prettier Follow Prettier on Twitter

Installation

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

Default Formatter

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"
  }
}

Prettier Resolution

This extension will use prettier from your project's local dependencies (recommended). When the prettier.resolveGlobalModules is set to true the extension can also attempt to resolve global modules. Should prettier not be installed locally with your project's dependencies or globally on the machine, the version of prettier that is bundled with the extension will be used.

To install prettier in your project run:

npm install prettier -D

Plugins

This extension supports Prettier plugins when you are using a locally or globally 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.

Configuration

There are multiple options for configuring Prettier with this extension. You can use VS Code settings, prettier configuration files, or an .editorconfig file. The VS Code settings are meant to be used as a fallback and are generally intended only for use on non-project files. It is recommended that you always include a prettier configuration file in your project specifying all settings for your project. This will ensure that no matter how you run prettier - from this extension, from the CLI, or from another IDE with Prettier, the same settings will get applied.

Using Prettier Configuration files to set formatting options is the recommended approach. Options are searched recursively 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. Settings can also be configured through VS Code - however, these settings will only apply while running the extension, not when running prettier through the command line.

Configuring Default Options

Some users may not wish to create a new Prettier config for every project or use the VS Code settings. Because Prettier searches recursively up the file path, you can place a global prettier config at ~/.prettierrc to be used as a fallback.

You can also use the setting prettier.configPath to provide a global configuration. However, be careful, if this is set this value will always be used and local configuration files will be ignored.

Visual Studio Code Settings

You can use VS Code settings to configure prettier. Settings will be read from (listed by priority):

  1. Prettier configuration file
  2. .editorconfig
  3. Visual Studio Code Settings (Ignored if any other configuration is present)

NOTE: If any local configuration file is present (i.e. .prettierrc) the VS Code settings will NOT be used.

Migrating from Versions 2.x

Version 3.0 has a number of breaking changes. 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

NOTE: If you are seeing messages about legacy configuration settings, double check that you don't have any settings for the linters in your workspace or global settings. You must remove these. See also Error Messages

Finally, there are a few smaller breaking changes, including removal of support for older versions of prettier. See the CHANGELOG for details.

Usage

Using Command Palette (CMD/CTRL + Shift + P)

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

Keyboard Shortcuts

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.

Format On Save

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
}

Format Selection

Format selection works on several languages depending on what Prettier itself supports. The following languages currently are supported:

javascript
javascriptreact
typescript
typescriptreact
json
graphql

Linter Integration

The preferred 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, TSLint or Stylelint extensions directly.

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

"editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true,
    // For TSLint
    "source.fixAll.tslint": true,
    // For Stylelint
    "source.fixAll.stylelint": 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-eslint library, 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 dependencies like prettier, eslint, tslint, stylelint, 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.

Settings

Prettier's Settings

All prettier options can be configured directly in this extension. These settings are used as a fallback when no configuration file is present in your project, see the configuration section of this document for more details. For reference on the options see the prettier documentation.

prettier.arrowParens
prettier.bracketSpacing
prettier.endOfLine
prettier.htmlWhitespaceSensitivity
prettier.insertPragma
prettier.jsxBracketSameLine
prettier.jsxSingleQuote
prettier.printWidth
prettier.proseWrap
prettier.quoteProps
prettier.requirePragma
prettier.semi
prettier.singleQuote
prettier.tabWidth
prettier.trailingComma
prettier.useTabs
prettier.vueIndentScriptAndStyle

Extension Settings

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 prettier configuration file to format files. Untitled files will still be formatted using the VS Code Prettier configuration even with this option set to true.

prettier.ignorePath (default: .prettierignore)

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.

Note, if this is set, this value will always be used and local ignore files will be ignored.

prettier.configPath

Supply a custom path to the prettier configuration file.

Note, if this is set, this value will always be used and local configuration files will be ignored. A better option for global defaults is to put a ~/.prettierrc file in your home directory.

prettier.prettierPath

Supply a custom path to the prettier module.

prettier.packageManager

Controls the package manager to be used to resolve modules. This has only an influence if the prettier.resolveGlobalModules setting is true and modules are resolved globally. Valid values are "npm" or "yarn" or "pnpm".

prettier.resolveGlobalModules (default: false)

When enabled, this extension will attempt to use global npm or yarn modules if local modules cannot be resolved.

NOTE: This setting can have a negative performance impact, particularly on Windows when you have attached network drives. Only enable this if you must use global modules. It is recommended that you always use local modules when possible.

prettier.disableLanguages

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

prettier.useEditorConfig (default: true)

Whether or not to take .editorconfig into account when parsing configuration. See the prettier.resolveConfig docs for details.

Error Messages

Failed to load module. If you have prettier or plugins referenced in package.json, ensure you have run npm install

When a package.json is present in your project and it contains prettier, plugins, or linter libraries this extension will attempt to load these modules from your node_module folder. If you see this error, it most likely means you need to run npm install or yarn install to install the packages in your package.json.

Your project is configured to use an outdated version of prettier that cannot be used by this extension. Upgrade to the latest version of prettier.

You must upgrade to a newer version of prettier.

You have legacy linter settings in your VS Code config. They are no longer being used.

If you receive 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 as they are no longer used for anything. See these instructions for linter configuration.

prettier.eslintIntegration
prettier.tslintIntegration
prettier.stylelintIntegration

Telemetry

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.

You can’t perform that action at this time.