VS Code Prettier Cheat Sheet

Sidebar

Programming · VS Code Prettier Cheat Sheet

The Prettier extension's settings, Prettier's own options with their defaults, config files, and ignore comments. Checked against extension 12.4.0 (bundling Prettier 3.7.4) on this machine and Prettier's documentation. Sheet 16 in the VS Code series. The option names in the cards below are the same in a config file and, with a prettier. prefix, in VS Code settings.

Setting Up & Running

Extension IDesbenp.prettier-vscode (version 12.4.0 here, bundling Prettier 3.7.4)

editor.defaultFormatter"esbenp.prettier-vscode", set globally or inside a [language] block

editor.formatOnSavetrue to format whenever you save

Shift+Alt+FFormat the whole document (Windows/Linux)

Ctrl+K Ctrl+FFormat only the selection

Format Document With…Command Palette: choose a formatter for this one run

Format Document (Forced)Command from the extension: format a file that is in .prettierignore or in a skipped place such as node_modules, and ignore requirePragma

Prettier: Create Configuration FileCommand from the extension: writes a starter config file in the project

Extension Settings (prettier.*)

prettier.enableTurn the extension on or off; reload required (default true)

prettier.requireConfigFormat only if a Prettier config file exists (default false)

prettier.configPathPath to one specific config file (default none)

prettier.ignorePathPath to the ignore file (default .prettierignore)

prettier.useEditorConfigRead .editorconfig as well (default true)

prettier.prettierPathUse a Prettier install at this path, e.g. ./node_modules/prettier (default: the one in your project, else the bundled one)

prettier.resolveGlobalModulesFall back to globally installed modules (default false)

prettier.withNodeModulesAlso format files inside node_modules (default false)

prettier.documentSelectorsExtra glob patterns of files to register the formatter for (for example for plugin-supported languages)

prettier.enableDebugLogsVerbose logging in the Prettier output channel (default false)

prettier.disableLanguages / packageManager / parserDeprecated or no longer used: configure through VS Code's default formatters and a config file instead

Layout Options

printWidthLine length Prettier tries to stay within (default 80)

tabWidthSpaces per indent level (default 2)

useTabsIndent with tab characters (default false)

endOfLinelf (default), crlf, cr, auto

proseWrapMarkdown text: preserve (default), always, never

objectWrappreserve (default): keep objects as multi-line if the first key is on its own line; collapse: fit on one line if possible

experimentalOperatorPositionWhere to break around operators: end (default) or start

experimentalTernariesTry the new ternary layout (default false)

Quotes & Punctuation

semiSemicolons at the ends of statements (default true)

singleQuoteSingle instead of double quotes (default false)

jsxSingleQuoteSingle quotes in JSX attributes (default false)

quotePropsas-needed (default), consistent, preserve: quotes around object keys

trailingCommaall (default since Prettier 3), es5, none

bracketSpacingSpaces inside { } in objects (default true)

arrowParensalways (default) or avoid: (x) => x vs x => x

HTML, JSX & Vue

bracketSameLinePut the closing > of a multi-line tag on the last attribute's line (default false)

jsxBracketSameLineDeprecated older name for bracketSameLine

singleAttributePerLineOne attribute per line in HTML, JSX, Vue and Angular (default false)

htmlWhitespaceSensitivitycss (default), strict, ignore: how careful to be with spaces in HTML

vueIndentScriptAndStyleIndent code inside Vue <script> and <style> (default false)

embeddedLanguageFormattingauto (default) or off: format code embedded in other code, such as CSS in JavaScript

Pragmas & Ranges

requirePragmaFormat only files that start with a special comment (default false)

insertPragmaAdd that comment to files Prettier formats (default false)

/** @format */The pragma comment; @prettier also works

rangeStart / rangeEndFormat only part of a file (set by the editor when you format a selection)

Config Files (first match wins, in this order)

"prettier" keyIn package.json or package.yaml

.prettierrcJSON or YAML, no extension

.prettierrc.json / .yml / .yaml / .json5The same, with an extension

.prettierrc.js, prettier.config.js, .tsJavaScript or TypeScript export of the options

.prettierrc.mjs / prettier.config.mjsES module version

.prettierrc.cjs / prettier.config.cjsCommonJS version

.prettierrc.tomlTOML version

.editorconfigindent_style, indent_size / tab_width, max_line_length and end_of_line are mapped to Prettier options

overrides{ "overrides": [{ "files": "*.md", "options": { "proseWrap": "always" } }] }; also excludeFiles

plugins"plugins": ["prettier-plugin-tailwindcss"]: add formatting for more languages or rules

Ignoring Code

.prettierignoreGitignore-style patterns for files Prettier must skip; .git-style folders and node_modules are skipped by default

// prettier-ignoreJavaScript, TypeScript, JSX: skip the next node

HTML and Markdown: skip the next element or block

 … HTML and Markdown: skip everything between (blank lines required around the markers in Markdown)

HTML: leave an element's attributes alone

/* prettier-ignore */CSS: skip the next rule

# prettier-ignoreYAML and GraphQL

{{! prettier-ignore }}Handlebars

Command Line (npx prettier …)

--write .Format every supported file under the current folder

--check .Report files that are not formatted, without changing them (useful in CI)

--list-different (-l)List the files that would change

--config pathUse a specific config file

--ignore-path pathUse a specific ignore file

--find-config-path fileShow which config file applies to a file

npm i -D prettierInstall Prettier in a project (recommended so everyone uses the same version)

Common Companions (my knowledge)

prettier-plugin-tailwindcssSorts Tailwind CSS classes; list it last in plugins

prettier-plugin-astroFormats .astro files

@prettier/plugin-phpFormats PHP

eslint-config-prettierTurns off ESLint rules that clash with Prettier

A Reasonable Starter Set (my suggestions, not defaults)

"editor.defaultFormatter": "esbenp.prettier-vscode"Choose Prettier once, globally

"editor.formatOnSave": trueFormat whenever you save

"prettier.requireConfig": trueOnly format projects that opt in with a config file

.prettierrc: { "singleQuote": true, "printWidth": 100 }A typical team config; commit it to the repository

"[markdown]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }Be explicit for Markdown, and consider proseWrap in an override

Formatting does nothing? Work down this list

1) Is Prettier the default formatter for this language (editor.defaultFormatter)? 2) Is prettier.enable on, and is the file in .prettierignore? 3) Do you have prettier.requireConfig on without a config file? 4) Open View > Output and choose Prettier in the drop-down: errors such as a syntax error in the file or in your config appear there. Turn on prettier.enableDebugLogs for more detail.

Which setting wins?

The extension reads, in priority order: a Prettier config file, then .editorconfig, then VS Code settings, and the VS Code prettier.* settings are ignored if any local configuration is present. They are only the fallback for projects with no config. Per-language [language] overrides apply to that fallback. For a team, commit a config file so everyone formats the same way whatever their editor settings.