Prettier 13 🎨 Editor Integration — VS Code, JetBrains & format-on-save - KandZ

⏱️ Estimated read: 9 min | |

Prettier’s command-line interface is the foundation, but the editor integration is where the formatter becomes invisible. The goal is not to remember to run prettier --write; it is to save a file and have the formatting happen automatically. The Prettier documentation states the recommendation directly: “To get the most out of Prettier, it’s recommended to run it from your editor” . The two dominant editor ecosystems—VS Code and the JetBrains family—have different integration models. VS Code relies on an extension that must be installed and configured. The JetBrains IDEs have built-in support that activates as soon as Prettier is installed as a project dependency.

Quick How-To Guides & Fast FixesNeed a quick fix or step-by-step solution? Browse our fast answers on HowTo.KandZ.me:

Operating Systems CLI →Dev Environment Languages →Web Network Tools →Security Accounts →Security Access Tech →Device Phone Basics →Social Messaging →Digital Files Media →

Key point: The editor integration resolves the Prettier binary from the project’s local node_modules first. The Prettier documentation warns that it is “important to install Prettier locally in every project, so each project gets the correct Prettier version” . A global install is the fallback, not the default.

Why editor integration matters

The consistency problem. A developer who runs prettier --write manually will forget. A pre-commit hook catches the forgotten file, but only after the commit is attempted. The editor integration formats on save, which means the file is never saved in an unformatted state in the first place. The Prettier homepage lists “Your code is formatted on save” as the first benefit of the tool .

The version problem. The VS Code extension and the JetBrains built-in support both resolve the local Prettier package before the global one. The JetBrains documentation describes the resolution explicitly: “IntelliJ IDEA uses the Prettier package from the closest node_modules folder that is located in the same folder as the file to reformat or in one of its parent folders” . The VS Code extension behaves the same way. This is why the local install is the prerequisite for the editor integration to work correctly.

The multi-module problem. A monorepo can have different Prettier configurations in different packages. The JetBrains “Automatic Prettier configuration” mode detects the closest .prettierrc file and applies it, so each module uses its own rules . The VS Code extension also resolves the configuration per file, but the setup is less explicit about the monorepo case.

a. VS Code integration

The VS Code integration is the esbenp.prettier-vscode extension. It is installed from the Extensions sidebar, and it is configured through settings.json.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

The editor.defaultFormatter setting makes Prettier the formatter for every file type it supports. The editor.formatOnSave setting triggers the formatting on every save. The two settings together are the standard configuration .

A more granular configuration applies Prettier only to specific languages. The [css] block in the example applies the formatter and the format-on-save setting only to CSS files .

{
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

The extension resolves the local Prettier package from the workspace’s node_modules. If the project has no local install, the extension may use a bundled version or prompt to install one, depending on the extension version. The Prettier documentation’s installation page warns against relying on npx without a local install, because npx will “temporarily download the latest version” and the version is not pinned .

A troubleshooting note from a community tutorial: if the save does not trigger the formatting, the likely cause is that multiple formatters are installed. The fix is to run “Format Document” from the Command Palette and select Prettier explicitly, which sets it as the default for that file type .

b. JetBrains integration

The JetBrains IDEs (IntelliJ IDEA, WebStorm, PhpStorm, PyCharm, Rider) have built-in Prettier support. The “JavaScript and TypeScript” and “Prettier” plugins are bundled and enabled by default . The IDE adds the “Reformat with Prettier” action as soon as Prettier is installed as a project dependency.

The integration has two configuration modes. The Automatic Prettier configuration mode is the default for a new project that has a Prettier dependency and a configuration file. In this mode, the IDE resolves the closest node_modules folder, detects the closest .prettierrc file, and searches upward for a .prettierignore file . The Manual Prettier configuration mode lets the developer select a specific Prettier package and configure the scope manually, including the option to apply Prettier to files outside the dependency scope .

The format-on-save behavior is configured with the Run on save checkbox in the Prettier settings. The Run for files field controls which file patterns trigger the formatting. The default pattern covers JavaScript, TypeScript, JSX, TSX, HTML, Vue, and Astro files . A project that uses Prettier for YAML or Markdown must add those extensions to the pattern.

The JetBrains documentation lists the supported configuration file formats. The .prettierrc variants (JSON, YAML, JS, TS) and the prettier.config.* variants are all recognized . The documentation notes that a TypeScript configuration file requires Node.js 22.6.0 or later .

Complete Example Session

// ============================================
// PART 1: THE VS CODE SETTINGS
// ============================================
// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

// ============================================
// PART 2: THE LANGUAGE-SPECIFIC SETTINGS
// ============================================
{
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

# ============================================
# PART 3: THE LOCAL INSTALL
# ============================================
npm install --save-dev --save-exact prettier

# The editor resolves this local package.

// ============================================
// PART 4: THE JETBRAINS SETTINGS PATH
// ============================================
Settings → Languages & Frameworks → JavaScript → Prettier

// ============================================
// PART 5: THE AUTOMATIC CONFIGURATION
// ============================================
- Automatic Prettier configuration: selected
- Run on save: checked
- Run for files: **/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro}

// ============================================
// PART 6: THE MANUAL CONFIGURATION
// ============================================
- Manual Prettier configuration: selected
- Prettier package: <project>/node_modules/prettier
- Run on 'Reformat Code' action: checked

// ============================================
// PART 7: THE CONFIGURATION FILE
// ============================================
// .prettierrc
{
  "semi": false,
  "singleQuote": true
}

// Both editors detect this file and apply it.

// ============================================
// PART 8: THE IGNORE FILE
// ============================================
// .prettierignore
build
coverage
dist

// The editor skips these paths.

// ============================================
// PART 9: THE TROUBLESHOOTING
// ============================================
# VS Code: Command Palette → Format Document
# Select Prettier if prompted.
#
# JetBrains: check the Prettier settings page.
# Verify the package path and the run-for-files pattern.

// ============================================
// PART 10: THE DECISION
// ============================================
# VS Code → install extension + settings.json
# JetBrains → built-in, no extension needed
# Both → local install, .prettierrc, .prettierignore

The ten parts covered the VS Code settings, the language-specific settings, the local install, the JetBrains settings path, the automatic configuration, the manual configuration, the configuration file, the ignore file, the troubleshooting, and the decision.

Quick Reference

VS Code

Item	Value
Extension	`esbenp.prettier-vscode`
Default formatter setting	`editor.defaultFormatter`
Format on save	`editor.formatOnSave`
Resolution	Local `node_modules` first
Troubleshooting	Command Palette → Format Document

JetBrains

Item	Value
Plugin	JavaScript and TypeScript + Prettier (bundled)
Settings path	Languages & Frameworks → JavaScript → Prettier
Automatic mode	Resolves closest `node_modules` and config
Run on save	Checkbox in the Prettier settings
Default pattern	`*/.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro}`

Configuration files

File	Purpose
`.prettierrc`	Formatting options
`.prettierignore`	Files to skip
`package.json`	Local Prettier dependency

The resolution order

Order	Source
1	Closest `node_modules/prettier`
2	Parent `node_modules/prettier`
3	Global Prettier (fallback)

Best Practices

✅ Do This:

# Install Prettier locally in the project
npm install --save-dev --save-exact prettier                 # ✅

// Set the default formatter in VS Code
"editor.defaultFormatter": "esbenp.prettier-vscode"          // ✅

// Enable format on save
"editor.formatOnSave": true                                  // ✅

// Enable Run on save in JetBrains
Settings → Prettier → Run on save                            // ✅

❌ Don’t Do This:

# Rely on the global Prettier only
npm install --global prettier                                // ❌ (version drift)

// Omit the default formatter setting
"editor.formatOnSave": true  // may use a different formatter // ❌

// Ignore the local install
// The editor falls back to a bundled version                 // ❌

Common Pitfalls

Pitfall	Why It Happens	Fix
Format on save does nothing	Multiple formatters installed	Set `editor.defaultFormatter`
Editor uses a different version	No local install	`npm install --save-dev prettier`
JetBrains does not format	Prettier plugin disabled	Enable in Settings → Plugins
Monorepo uses the wrong config	Automatic mode not enabled	Check the Prettier settings
`.prettierignore` not respected	Wrong file location	Place at the project root

Real-World Examples

1. VS Code settings

{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true }

2. Language-specific settings

{ "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true } }

3. Local install

npm install --save-dev --save-exact prettier

4. JetBrains settings path

Settings → Languages & Frameworks → JavaScript → Prettier

5. JetBrains automatic mode

Automatic Prettier configuration + Run on save

6. The run-for-files pattern

**/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro}

7. The configuration file

// .prettierrc
{ "semi": false, "singleQuote": true }

8. The ignore file

// .prettierignore
build
coverage

9. The troubleshooting

Command Palette → Format Document → select Prettier

10. The decision

VS Code → extension; JetBrains → built-in; both → local install

Visual

The VS Code flow

┌─────────────────────────────────────────────────────────────┐
│  Save file                                                   │
│       │                                                      │
│       ▼                                                      │
│  editor.formatOnSave triggers                                │
│       │                                                      │
│       ▼                                                      │
│  Prettier extension resolves local binary                    │
│       │                                                      │
│       ▼                                                      │
│  File is formatted                                           │
└─────────────────────────────────────────────────────────────┘

The JetBrains flow

┌─────────────────────────────────────────────────────────────┐
│  Save file                                                   │
│       │                                                      │
│       ▼                                                      │
│  Run on save triggers                                        │
│       │                                                      │
│       ▼                                                      │
│  IDE resolves closest node_modules and config                │
│       │                                                      │
│       ▼                                                      │
│  File is formatted                                           │
└─────────────────────────────────────────────────────────────┘

The resolution order

┌─────────────────────────────────────────────────────────────┐
│  1. Closest node_modules/prettier                            │
│  2. Parent node_modules/prettier                             │
│  3. Global prettier (fallback)                               │
│                                                              │
│  The local install wins.                                     │
└─────────────────────────────────────────────────────────────┘

The configuration detection

┌─────────────────────────────────────────────────────────────┐
│  .prettierrc (closest) ──► applied                           │
│  .prettierignore (closest) ──► applied                       │
│                                                              │
│  Monorepo modules use their own configs.                     │
└─────────────────────────────────────────────────────────────┘

Summary

Item	Value
VS Code extension	`esbenp.prettier-vscode`
VS Code settings	`editor.defaultFormatter`, `editor.formatOnSave`
JetBrains plugin	Bundled with the IDE
JetBrains settings	Languages & Frameworks → JavaScript → Prettier
JetBrains format on save	Run on save checkbox
Resolution	Local `node_modules` first
Prerequisite	Local Prettier install
Config file	`.prettierrc`
Ignore file	`.prettierignore`

Key takeaways:

The editor integration is the primary way to use Prettier. The command line is the foundation, but the format-on-save behavior is what makes the formatter invisible and consistent. The Prettier documentation recommends running Prettier from the editor for the best experience .
The local install is the prerequisite. The VS Code extension and the JetBrains built-in support both resolve the local node_modules/prettier before the global one. The documentation warns against relying on a global install or npx without a local install, because the version is not pinned .
VS Code requires an extension and two settings. The esbenp.prettier-vscode extension provides the formatter, and the editor.defaultFormatter and editor.formatOnSave settings enable the automatic behavior. The extension can be configured globally or per language .
JetBrains has built-in support. The Prettier plugin is bundled, and the IDE adds the reformat action as soon as Prettier is installed. The Automatic Prettier configuration mode resolves the closest node_modules and config file, which makes it suitable for monorepos .
The Run on save checkbox is the JetBrains equivalent of editor.formatOnSave. The Run for files pattern controls which file types trigger the formatting. The default pattern covers the common web languages, and a project that uses Prettier for other types must add them .
The troubleshooting step is to check the default formatter. If VS Code’s format-on-save does nothing, the likely cause is that multiple formatters are installed. The Command Palette’s “Format Document” command lets the developer select Prettier explicitly .

Remember: The editor integration is what turns Prettier from a command you run into a behavior you forget about. Install Prettier locally, configure the editor to use it as the default formatter, and enable format-on-save. In VS Code, that is an extension and two settings. In JetBrains, it is a built-in plugin and a checkbox. The local install is the anchor; the editor resolves it first, and the version is pinned by the project, not by the machine.

Was this helpful?

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!