coc-prettier

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 HANDLEBARS · Ember · Glimmer
GraphQL · Markdown · YAML
Your favorite language?

Installation

Run vim command:

:CocInstall coc-prettier

Debug log

Add "prettier.enableDebugLogs": true to coc-settings.json opened by : CocConfig.
Checkout output by :CocCommand prettier.openOutput.

New feature of 11.0.0

Added configuration properties: prettier.singleAttributePerLine, prettier.jsxBracketSameLine and prettier.experimentalTernaries.

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 and pin its version as recommended, run:

npm install prettier -D --save-exact

NOTE: You will be prompted to confirm that you want the extension to load a Prettier module. This is done to ensure that you are not loading a module or script that is not trusted.

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.

Usage

Range format

Remap keys for range format in your init.vim or .vimrc

vmap <leader>f  <Plug>(coc-format-selected)
nmap <leader>f  <Plug>(coc-format-selected)

Then you can <leader>f for range format.

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

javascript
javascriptreact
typescript
typescriptreact
json
graphql
handlebars

Format On Save.

Open settings file with:

:CocConfig

Add:

  "coc.preferences.formatOnSaveFiletypes": ["css", "markdown"],

to setup the languages which you want to format on save.

Note: if prettier extension have lower priority, and document have other registered document format provider, prettier will be ignored.

To disable coc-prettier for specific files, you can create .prettierignore file. Or use "prettier.disableLanguages" configuration, or "prettier.formatterPriority": -1 configuration to make it not override format provider from other coc.nvim extensions.

To check the format is done by prettier, check out the output message after format, which should contains Formatted by prettier.

Other useful commands:

:CocCommand prettier.formatFile: force prettier to format the current buffer, even if another format provider exists.
:noa w: save the current buffer without formatting.
:CocCommand prettier.createConfigFile: Create .prettierrc for current document.

Format Document (Forced)

If you would like to format a document that is configured to be ignored by Prettier either because it is in a .prettierignore file or part of a normally excluded location like node_modules, you can run the command Format Document (Forced) to force the document to be formatted. Forced mode will also ignore any config for requirePragma allowing you to format files without the pragma comment present.

Linter Integration

The recommended way of integrating with linters is to let Prettier do the formatting and configure the linter to not deal with formatting rules. You can find instructions on how to configure each linter on the Prettier docs site. You can then use each of the linting extensions as you normally would. For details refer to the Prettier documentation.

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 have to upgrade to a newer version of prettier.

Contribute

Feel free to open issues or PRs!

Read the complete README

Prettier extension for coc.nvim

Activation Events

Developer Resources

Want to build, test, or contribute to coc.nvim extensions? Explore our official SDK and testing toolkits.

Open Developer Guide

Published with coc-prettier@11.0.1 as CHANGELOG.md.

Open source file

[9.3.2]

Fix issue with prettier v3.

[9.3.0]

Added additional debug logs.
Create minimal textEdit.

[9.2.0]

Removed support for legacy linter integration. See documentation on how to configure linters.
Removed prettier.disableSuccessMessage, no success message any more.
Removed support for Prettier versions older than 1.13.0.
No longer bundling linters with extension - to use install them in your package.json.
Use Prettier to determine if a file is ignored or not instead of custom logic.
Support for formatting of untitled files when the language is set by vim.
Set file path config on format to assist with parser resolution.
Less fallbacks - if you have local prettier installed it will always use that. Before if your local prettier didn't support things we would fall back to bundled prettier - this caused many errors and inconsistent behavior.
Enhanced logging.
Memoize package path lookup to improve perf of repeated calls to same file.
Shows error message when outdated versions of prettier are used.
Refreshes modules without restart for cases where prettier version or plugins are installed locally.
Registers .graphql files as graphql language in order to provide formatting.
Ignore files are only read from the workspace folder to behave the same as prettier.
Added configuration option prettier.prettierPath to override module resolution.
Added configuration option prettier.configPath to override configuration file resolution.
Add command Prettier: Create Configuration File to create a basic .prettierrc file
Sets resolveConfig: true to allow parser overrides on Prettier 1.19+. #1067
Added setting prettier.useEditorConfig (defaults to true) to allow disabling resolving .editorconfig for Prettier config
Added pattern filter to formatter registrations to avoid registering incorrectly on multi-workspace projects
Added support for global module resolution, due to performance issues, global module resolution is now off by default. Enable by setting prettier.resolveGlobalModules to true
Added setting packageManager to determine which package manager to use for global module resolution
Show error when prettier configuration file is invalid
Change default configuration for trailingComma to es5 to match Prettier 2.0
Change default configuration for arrowParens to always to match Prettier 2.0
Change default configuration for endOfLine to lf to match Prettier 2.0
Added configuration option withNodeModules to enable processing of files in the node_modules folder
Update loading implicit Prettier dep from node_modules to only occur if explicit package.json dep is not found in a parent directory
Support for additional configuration file extensions (toml, cls).
Added support for custom document selectors to provide formatting on custom languages/extensions.
Added Embedded Language Formatting option.
Added enable setting.
Automatically detect package manager
Prompt to allow Prettier module to load
Added debug mode for logging
Handlebars support (@lifeart)

[1.1.13]

Just bumping minor version to accommodate yarn upgrade to fix issue reported by yarn audit.

[1.1.0]

Prettier 1.16
prettier-tslint 0.4.2
Validate the "prettier" key in package.json using the prettier settings schema
Prettier 1.15
New options: jsxSingleQuote, htmlWhitespaceSensitivity and endOfLine (More info in readme).

All contributes.commands entries from the published package manifest for coc-prettier@11.0.1.

Command (:CocCommand)	Description
prettier.createConfigFile	Prettier: Create Configuration File
prettier.forceFormatDocument	Format Document (Forced)

All contributes.configuration entries from the published package manifest, including each raw property schema for coc-settings.json.

prettier.semiboolean

Whether to add a semicolon at the end of every line

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "scope": "resource",
  "default": true,
  "description": "Whether to add a semicolon at the end of every line"
}

prettier.enableboolean

Controls whether prettier is enabled or not.

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "scope": "resource",
  "default": true,
  "markdownDescription": "Controls whether prettier is enabled or not."
}

prettier.useTabsboolean

Indent lines with tabs

Default: false

Raw JSON Schema

{
  "type": "boolean",
  "scope": "resource",
  "default": false,
  "description": "Indent lines with tabs"
}

prettier.tabWidthinteger

Number of spaces it should use per tab

Default: 2

Raw JSON Schema

{
  "type": "integer",
  "scope": "resource",
  "default": 2,
  "description": "Number of spaces it should use per tab"
}

prettier.endOfLinestring

Specify the end of line used by prettier

Default: "lf"

Raw JSON Schema

{
  "enum": [
    "auto",
    "lf",
    "crlf",
    "cr"
  ],
  "type": "string",
  "default": "lf",
  "description": "Specify the end of line used by prettier"
}

prettier.proseWrapstring

(Markdown) wrap prose over multiple lines

Default: "preserve"

Raw JSON Schema

{
  "enum": [
    "preserve",
    "always",
    "never"
  ],
  "type": "string",
  "default": "preserve",
  "description": "(Markdown) wrap prose over multiple lines"
}

prettier.configPathstring

Path to the prettier configuration file

Raw JSON Schema

{
  "type": "string",
  "scope": "resource",
  "markdownDescription": "Path to the prettier configuration file"
}

prettier.ignorePathstring

Path to a .prettierignore or similar file

Default: ".prettierignore"

Raw JSON Schema

{
  "type": "string",
  "scope": "resource",
  "default": ".prettierignore",
  "description": "Path to a .prettierignore or similar file"
}

prettier.printWidthinteger

Fit code within this line limit

Default: 80

Raw JSON Schema

{
  "type": "integer",
  "scope": "resource",
  "default": 80,
  "description": "Fit code within this line limit"
}

prettier.quotePropsstring

Change when properties in objects are quoted

Default: "as-needed"

Raw JSON Schema

{
  "enum": [
    "as-needed",
    "consistent",
    "preserve"
  ],
  "type": "string",
  "scope": "resource",
  "default": "as-needed",
  "markdownDescription": "Change when properties in objects are quoted"
}

prettier.arrowParensstring

Include parentheses around a sole arrow function parameter

Default: "always"

Raw JSON Schema

{
  "enum": [
    "avoid",
    "always"
  ],
  "type": "string",
  "scope": "resource",
  "default": "always",
  "description": "Include parentheses around a sole arrow function parameter"
}

prettier.singleQuoteboolean

If true, will use single instead of double quotes

Default: false

Raw JSON Schema

{
  "type": "boolean",
  "scope": "resource",
  "default": false,
  "description": "If true, will use single instead of double quotes"
}

prettier.insertPragmaboolean

Prettier can insert a special @format marker at the top of files specifying that the file has been formatted with prettier. This works well when used in tandem with the `--require-pragma` option. If there is already a docblock at the top of the file then this option will add a newline to it with the @format marker.

Default: false

Raw JSON Schema

{
  "type": "boolean",
  "scope": "resource",
  "default": false,
  "markdownDescription": "Prettier can insert a special @format marker at the top of files specifying that the file has been formatted with prettier. This works well when used in tandem with the `--require-pragma` option. If there is already a docblock at the top of the file then this option will add a newline to it with the @format marker."
}

prettier.prettierPathstring

Path to the prettier module

Raw JSON Schema

{
  "type": "string",
  "scope": "resource",
  "markdownDescription": "Path to the prettier module"
}

prettier.requireConfigboolean

Require a prettier configuration file to format. See [documentation for valid configuration files](https://prettier.io/docs/en/configuration.html). > _Note, untitled files will still be formatted using the coc-prettier settings even when this setting is set._

Default: false

Raw JSON Schema

{
  "type": "boolean",
  "scope": "resource",
  "default": false,
  "markdownDescription": "Require a prettier configuration file to format. See [documentation for valid configuration files](https://prettier.io/docs/en/configuration.html).\n\n> _Note, untitled files will still be formatted using the coc-prettier settings even when this setting is set._"
}

prettier.requirePragmaboolean

Prettier can restrict itself to only format files that contain a special comment, called a pragma, at the top of the file. This is very useful when gradually transitioning large, unformatted codebases to prettier.

Default: false

Raw JSON Schema

{
  "type": "boolean",
  "scope": "resource",
  "default": false,
  "markdownDescription": "Prettier can restrict itself to only format files that contain a special comment, called a pragma, at the top of the file. This is very useful when gradually transitioning large, unformatted codebases to prettier."
}

prettier.trailingCommastring

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)

Default: "all"

Raw JSON Schema

{
  "enum": [
    "none",
    "es5",
    "all"
  ],
  "type": "string",
  "scope": "resource",
  "default": "all",
  "description": "Controls the printing of trailing commas wherever possible.\n Valid options:\n    'none' - No trailing commas\n    'es5' - Trailing commas where valid in ES5 (objects, arrays, etc)\n    'all' - Trailing commas wherever possible (function arguments)"
}

prettier.bracketSpacingboolean

Controls the printing of spaces inside object literals

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "scope": "resource",
  "default": true,
  "description": "Controls the printing of spaces inside object literals"
}

prettier.jsxSingleQuoteboolean

Use single quotes instead of double quotes in JSX

Default: false

Raw JSON Schema

{
  "type": "boolean",
  "default": false,
  "description": "Use single quotes instead of double quotes in JSX"
}

prettier.packageManagerstring

The package manager you use to install node modules.

Default: "npm"

Deprecated: Package manager is now automatically detected by coc-prettier. This setting is no longer used.

Raw JSON Schema

{
  "enum": [
    "npm",
    "yarn",
    "pnpm"
  ],
  "type": "string",
  "scope": "resource",
  "default": "npm",
  "deprecationMessage": "Package manager is now automatically detected by coc-prettier. This setting is no longer used.",
  "markdownDescription": "The package manager you use to install node modules."
}

prettier.statusItemTextstring

Text shown in status item.

Default: "Prettier"

Raw JSON Schema

{
  "type": "string",
  "scope": "resource",
  "default": "Prettier",
  "description": "Text shown in status item."
}

prettier.bracketSameLineboolean

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

Default: false

Raw JSON Schema

{
  "type": "boolean",
  "scope": "resource",
  "default": false,
  "markdownDescription": "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"
}

prettier.enableDebugLogsboolean

Enable debug logs for troubleshooting.

Default: false

Raw JSON Schema

{
  "type": "boolean",
  "scope": "resource",
  "default": false,
  "markdownDescription": "Enable debug logs for troubleshooting."
}

prettier.useEditorConfigboolean

Whether or not to take `.editorconfig` into account when parsing configuration. See the [prettier.resolveConfig](https://prettier.io/docs/en/api.html) docs for details.

Default: true

Raw JSON Schema

{
  "type": "boolean",
  "scope": "resource",
  "default": true,
  "markdownDescription": "Whether or not to take `.editorconfig` into account when parsing configuration. See the [prettier.resolveConfig](https://prettier.io/docs/en/api.html) docs for details."
}

prettier.withNodeModulesboolean

If true, this extension will process files in node_modules

Default: false

Raw JSON Schema

{
  "type": "boolean",
  "scope": "resource",
  "default": false,
  "markdownDescription": "If true, this extension will process files in node_modules"
}

prettier.disableLanguagesarray

A list of languages IDs to disable this extension on

Default: []

Raw JSON Schema

{
  "type": "array",
  "items": {
    "type": "string"
  },
  "scope": "window",
  "default": [],
  "description": "A list of languages IDs to disable this extension on"
}

prettier.documentSelectorsarray

A list of [glob patterns](https://code.visualstudio.com/api/references/vscode-api#GlobPattern) to register Prettier formatter

Default: []

Raw JSON Schema

{
  "type": "array",
  "items": {
    "type": "string"
  },
  "scope": "window",
  "default": [],
  "markdownDescription": "A list of [glob patterns](https://code.visualstudio.com/api/references/vscode-api#GlobPattern) to register Prettier formatter"
}

prettier.formatterPrioritynumber

Priority of format provider, default to 1 that higher than other languageserver formatter, change to -1 to make it lower priority.

Default: 1

Raw JSON Schema

{
  "type": "number",
  "default": 1,
  "description": "Priority of format provider, default to 1 that higher than other languageserver formatter, change to -1 to make it lower priority."
}

prettier.jsxBracketSameLineboolean

%ext.config.jsxBracketSameLine%

Default: false

Deprecated: %ext.config.jsxBracketSameLineDeprecation%

Raw JSON Schema

{
  "type": "boolean",
  "scope": "language-overridable",
  "default": false,
  "deprecationMessage": "%ext.config.jsxBracketSameLineDeprecation%",
  "markdownDescription": "%ext.config.jsxBracketSameLine%"
}

prettier.onlyUseLocalVersionboolean

Only use the version of prettier installed by the client, ignoring the version bundled with coc-prettier

Default: false

Raw JSON Schema

{
  "type": "boolean",
  "scope": "resource",
  "default": false,
  "description": "Only use the version of prettier installed by the client, ignoring the version bundled with coc-prettier"
}

prettier.resolveGlobalModulesboolean

When enabled, this extension will attempt to use global npm or yarn modules if local modules cannot be resolved. > _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._

Default: false

Raw JSON Schema

{
  "type": "boolean",
  "scope": "resource",
  "default": false,
  "markdownDescription": "When enabled, this extension will attempt to use global npm or yarn modules if local modules cannot be resolved.\n> _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._"
}

prettier.experimentalTernariesboolean

%ext.config.experimentalTernaries%

Default: false

Raw JSON Schema

{
  "type": "boolean",
  "scope": "language-overridable",
  "default": false,
  "markdownDescription": "%ext.config.experimentalTernaries%"
}

prettier.singleAttributePerLineboolean

%ext.config.singleAttributePerLine%

Default: false

Raw JSON Schema

{
  "type": "boolean",
  "scope": "language-overridable",
  "default": false,
  "markdownDescription": "%ext.config.singleAttributePerLine%"
}

prettier.vueIndentScriptAndStyleboolean

Whether or not to indent the code inside `<script>` and `<style>` tags in Vue files. Some people (like the creator of Vue) don’t indent to save an indentation level, but this might break code folding in your editor.

Default: false

Raw JSON Schema

{
  "type": "boolean",
  "scope": "resource",
  "default": false,
  "markdownDescription": "Whether or not to indent the code inside `<script>` and `<style>` tags in Vue files. Some people (like the creator of Vue) don’t indent to save an indentation level, but this might break code folding in your editor."
}

prettier.htmlWhitespaceSensitivitystring

Specify the global whitespace sensitivity for HTML files. Valid options: 'css' - Respect the default value of CSS display property. 'strict' - Whitespaces are considered sensitive. 'ignore' - Whitespaces are considered insensitive.

Default: "css"

Raw JSON Schema

{
  "enum": [
    "css",
    "strict",
    "ignore"
  ],
  "type": "string",
  "default": "css",
  "description": "Specify the global whitespace sensitivity for HTML files.\n Valid options: \n'css' - Respect the default value of CSS display property. \n'strict' - Whitespaces are considered sensitive. \n'ignore' - Whitespaces are considered insensitive."
}

prettier.embeddedLanguageFormattingstring

Control whether Prettier formats quoted code embedded in the file.

Default: "auto"

Raw JSON Schema

{
  "enum": [
    "auto",
    "off"
  ],
  "type": "string",
  "scope": "resource",
  "default": "auto",
  "markdownDescription": "Control whether Prettier formats quoted code embedded in the file."
}

coc-prettier

Published Package Summary

Prettier formatter for coc.nvim

Installation

Debug log

New feature of 11.0.0

Prettier Resolution

Plugins

Usage

Range format

Format On Save.

Format Document (Forced)

Linter Integration

Error Messages

Contribute

Version History

[9.3.2]

[9.3.0]

[9.2.0]

[1.1.13]

[1.1.0]

Contributed Commands

Configuration Schema