Prettier 02 🎨 Installation — Local vs. global install & editor integration - KandZ

⏱️ Estimated read: 13 min | |

Prettier is a single npm package. Installing it is one command. The decision that matters is where it gets installed and how editors find it. A local install locks the version per project, ensures every contributor formats with the same printer, and lets CI run the exact same binary as the developer’s editor. A global install puts one prettier binary on the PATH and makes it available everywhere, but it introduces version drift between projects and between machines.

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 →

This chapter covers the installation boundary: local versus global, the exact commands for each, why Prettier’s documentation insists on local installation as the default, and how editor integrations—VS Code, JetBrains IDEs, and others—resolve the Prettier binary. It also covers the config and ignore files that make a project recognizable to both the CLI and the editor, and the verification steps that confirm the setup works before you write a single line of code.

Key point: Install Prettier locally in every project. Editor extensions are designed to pick up the local version, and the CLI in CI must match the editor on the developer’s machine. A global install is a convenience for ad-hoc formatting, not a substitute for a project dependency.

Why the install location matters

Version pinning is formatting stability. Prettier changes how it formats code between major releases. The documentation states this explicitly: “we change how code is formatted in each release” . A global install updates whenever the user runs npm update -g, which means a developer’s editor and the project’s CI can silently disagree about formatting. A local install with --save-exact pins the version in package.json and package-lock.json, so every environment resolves the same binary .

Editors follow the local install. The Prettier editor integration documentation warns: “It’s important to install Prettier locally in every project, so each project gets the correct Prettier version” . VS Code’s Prettier extension, JetBrains’ built-in support, and most other integrations resolve the local node_modules/prettier before falling back to a global binary. If no local install exists, the editor either refuses to format or uses a bundled version that may not match the project’s configuration.

The npx fallback is not a substitute. Running npx prettier without a local install causes npx to download the latest version temporarily . The result is a one-off format with a version the project does not control. This is acceptable for inspecting what Prettier would do, but unacceptable for committing formatted code. The version that produced the output is not recorded anywhere.

Global installs have a narrow use case. A global install is useful for formatting a file outside any project context—a standalone script, a configuration file in a home directory, or a quick experiment. It is not useful for team projects, because the version is not shared, not pinned, and not reproducible in CI.

a. Local installation

The local install adds Prettier to the project’s devDependencies. The --save-exact flag (or --exact for yarn and pnpm) records the precise version in package.json without a caret range .

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

# yarn
yarn add --dev --exact prettier

# pnpm
pnpm add --save-dev --save-exact prettier

# bun
bun add --dev --exact prettier

After installation, node_modules/.bin/prettier exists. Running it through the package manager’s exec mechanism uses that local binary:

# npm
npx prettier . --write

# yarn
yarn exec prettier . --write

# pnpm
pnpm exec prettier . --write

# bun
bunx prettier . --write

The --write flag reformats files in place. The --check flag reports which files are not formatted without modifying them . Both are common: --write during development, --check in CI.

b. Global installation

A global install places the prettier binary in the Node.js global prefix, typically /usr/local/bin/prettier or ~/.npm-global/bin/prettier. It becomes available in any directory without a project context.

# npm
npm install --global prettier

# yarn
yarn global add prettier

# pnpm
pnpm add --global prettier

The global binary can be invoked directly:

prettier --check .
prettier --write src/

JetBrains documentation lists both local and global install commands, but the Prettier project’s own guidance prioritizes the local install . The global install does not read the project’s package.json to determine a version; it uses whatever version was installed globally. If the global version is 3.x and the project depends on 2.x, the formatting output will differ.

c. Editor integration and version resolution

Editor extensions are the primary way most developers interact with Prettier. The extension does not bundle its own formatter; it looks for the project’s local Prettier installation first. This is deliberate: the editor should format with the same version that CI will check.

VS Code

The extension is called “Prettier – Code formatter” (publisher esbenp) . After installing the extension, configure it as the default formatter for the relevant languages:

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

With formatOnSave enabled, every save triggers the extension to run the local Prettier binary against the file . The extension resolves Prettier from the workspace’s node_modules; if no local install exists, it either uses a bundled version or prompts to install one, depending on the extension version.

JetBrains IDEs (IntelliJ, WebStorm, Rider, PhpStorm)

JetBrains IDEs have built-in Prettier support. The IDE settings under Languages & Frameworks → JavaScript → Prettier allow specifying the Prettier package path. By default, the IDE auto-detects the local node_modules/prettier . The JetBrains documentation lists both npm install --save-dev --save-exact prettier and npm install --global prettier as installation options, but the IDE’s auto-detection prioritizes the local package when present .

Other editors

Vim, Emacs, Sublime Text, and Helix all have Prettier integrations. The pattern is the same: the integration runs a Prettier binary, and the recommended configuration points it at the local install . File watchers are a fallback for editors without native support: a watcher runs prettier --write on file changes, using the local binary.

d. Config and ignore files

The local install creates the binary. The config files tell Prettier and editors what to do with it.

An empty .prettierrc file is sufficient to signal that a directory is a Prettier project. The documentation recommends creating it with a cross-platform Node command to avoid shell-specific quoting issues :

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

Options can be added later. The minimal set that teams commonly configure includes semi, singleQuote, printWidth, and trailingComma. The .prettierignore file lists paths that should not be formatted—build output, coverage reports, generated files:

node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"

Prettier also respects .gitignore rules if the files are in the same directory . This means node_modules/ and dist/ are ignored automatically in most setups, but an explicit .prettierignore makes the exclusions visible and reviewable.

Complete Example Session

# ============================================
# PART 1: LOCAL INSTALL WITH EXACT VERSION
# ============================================
# Install Prettier as a dev dependency, pinning the version
npm install --save-dev --save-exact prettier

# Verify the version in package.json
grep prettier package.json
# "prettier": "3.9.4" (no caret)

# ============================================
# PART 2: CREATE CONFIG AND IGNORE FILES
# ============================================
# Empty config signals a Prettier project
node --eval "fs.writeFileSync('.prettierrc','{}\n')"

# Ignore build artifacts and dependencies
node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\ndist\n')"

# ============================================
# PART 3: RUN THE LOCAL BINARY
# ============================================
# Format all files using the local install
npx prettier . --write

# Check formatting without modifying files
npx prettier . --check

# ============================================
# PART 4: CONFIGURE VS CODE
# ============================================
# Install "Prettier - Code formatter" from the marketplace
# Add to settings.json:
# {
#   "editor.defaultFormatter": "esbenp.prettier-vscode",
#   "editor.formatOnSave": true
# }

# The extension resolves the local node_modules/prettier
# and formats on save with the pinned version.

# ============================================
# PART 5: CONFIGURE JETBRAINS IDE
# ============================================
# Settings → Languages & Frameworks → JavaScript → Prettier
# Set "Prettier package" to <project>/node_modules/prettier
# Enable "On save" under "Run for files"

# The IDE uses the same local binary as the CLI and VS Code.

# ============================================
# PART 6: ADD A FORMAT SCRIPT
# ============================================
# Add to package.json scripts:
# "format": "prettier --write .",
# "format:check": "prettier --check ."

# Run with npm
npm run format
npm run format:check

# ============================================
# PART 7: CI CHECK
# ============================================
# In CI, run the check script after install
# npm ci
# npm run format:check
#
# This fails the build if any file is unformatted,
# using the exact version from package-lock.json.

# ============================================
# PART 8: GLOBAL INSTALL (OPTIONAL)
# ============================================
# For formatting files outside any project
npm install --global prettier

# The global binary is available anywhere
prettier --check ~/scripts/standalone.js

# Do not use the global binary inside a project
# that has a local install; use npx instead.

# ============================================
# PART 9: VERIFY THE SETUP
# ============================================
# Confirm the local binary resolves
npx prettier --version
# Output: 3.9.4

# Confirm the config is recognized
npx prettier --find-config-path src/index.js
# Output: /path/to/project/.prettierrc

# ============================================
# PART 10: CLEAN UP A GLOBAL-ONLY SETUP
# ============================================
# If a project relied on a global install, add the local one
npm install --save-dev --save-exact prettier

# Remove the global if it is no longer needed
npm uninstall --global prettier

# Verify the project uses the local binary
npx prettier --version

The ten parts covered local installation with exact versioning, config and ignore file creation, running the local binary, VS Code configuration, JetBrains configuration, npm scripts, CI checking, optional global install, setup verification, and migrating away from a global-only setup.

Quick Reference

Installation commands

Method	Command	Use case
Local (npm)	`npm install --save-dev --save-exact prettier`	Team projects
Local (yarn)	`yarn add --dev --exact prettier`	Team projects
Local (pnpm)	`pnpm add --save-dev --save-exact prettier`	Team projects
Global (npm)	`npm install --global prettier`	Ad-hoc files outside projects

Running Prettier

Context	Command
Local (npm)	`npx prettier . --write`
Local (yarn)	`yarn exec prettier . --write`
Local (pnpm)	`pnpm exec prettier . --write`
Global	`prettier . --write`
CI check	`npx prettier . --check`

Editor integrations

Editor	Extension/Plugin	Resolution
VS Code	Prettier – Code formatter (`esbenp`)	Local `node_modules/prettier`
JetBrains	Built-in	Auto-detects local package
Vim	`vim-prettier`	Configurable path
Emacs	`prettier.el`	Configurable path
Sublime Text	`JsPrettier`	Configurable path

Config files

File	Purpose	Creation
`.prettierrc`	Formatting options	`node --eval "fs.writeFileSync('.prettierrc','{}\n')"`
`.prettierignore`	Files to exclude	`node --eval "fs.writeFileSync('.prettierignore','build\ncoverage\n')"`

Best Practices

✅ Do This:

# Install locally with exact versioning in every project
npm install --save-dev --save-exact prettier          # ✅

# Create an empty .prettierrc to signal project config
node --eval "fs.writeFileSync('.prettierrc','{}\n')"  # ✅

# Configure the editor to use the local Prettier binary
"editor.defaultFormatter": "esbenp.prettier-vscode"   # ✅

# Add format scripts to package.json
"format": "prettier --write ."                        # ✅

# Run --check in CI with the locked version
npm ci && npx prettier . --check                      # ✅

❌ Don’t Do This:

# Rely on a global install for project formatting
prettier --write .                                    # ❌ (version not pinned)

# Skip the local install and let npx download a temporary version
npx prettier . --write                                # ❌ (unpinned version)

# Install globally and expect editors to use it
npm install --global prettier                         # ❌ (editors prefer local)

# Commit without a .prettierignore
# node_modules may be formatted accidentally                 # ❌

# Use different Prettier versions in editor and CI
# Formatting conflicts and failed checks follow              # ❌

Common Pitfalls

Pitfall	Why It Happens	Fix
Editor formats differently than CLI	Editor uses a global or bundled Prettier version	Install locally and point the editor at `node_modules/prettier`
CI fails with formatting differences	Developer’s global version differs from project version	Use local install and `--save-exact`; run CI with `npm ci`
`npx prettier` downloads a version unexpectedly	No local install exists	Run `npm install --save-dev --save-exact prettier` first
Editor does not format on save	Default formatter not set	Configure `editor.defaultFormatter` in VS Code settings
`node_modules` gets formatted	No `.prettierignore` and no `.gitignore`	Create `.prettierignore` with `node_modules/`
Config changes have no effect	Prettier is not finding the `.prettierrc`	Run `npx prettier --find-config-path <file>` to verify

Real-World Examples

1. Local install with exact version

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

2. Format all files with local binary

npx prettier . --write

3. Check formatting in CI

npx prettier . --check

4. VS Code format-on-save

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

5. JetBrains auto-detect local package

Settings → Languages & Frameworks → JavaScript → Prettier
Package: <project>/node_modules/prettier

6. Empty config file

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

7. Ignore file with build output

node --eval "fs.writeFileSync('.prettierignore','build\ncoverage\ndist\n')"

8. Format script in package.json

{ "scripts": { "format": "prettier --write .", "format:check": "prettier --check ." } }

9. Global install for ad-hoc use

npm install --global prettier && prettier --check ~/notes/script.js

10. Verify config resolution

npx prettier --find-config-path src/index.js

Visual

Local vs. global resolution

┌─────────────────────────────────────────────────────────────┐
│  HOW PRETTIER IS RESOLVED                                    │
│                                                              │
│  Editor (VS Code, JetBrains)                                 │
│       │                                                      │
│       ├── Look for local node_modules/prettier ──► found?    │
│       │       │                                              │
│       │       ├── yes ──► use it (project version)           │
│       │       │                                              │
│       │       └── no ──► use bundled/global fallback        │
│       │                                                      │
│  CLI (npx)                                                   │
│       │                                                      │
│       ├── Look for local node_modules/.bin/prettier ──► found?│
│       │       │                                              │
│       │       ├── yes ──► run it (project version)           │
│       │       │                                              │
│       │       └── no ──► npx downloads latest temporarily    │
│       │                                                      │
│  The local install is the anchor. Everything else is fallback.│
└─────────────────────────────────────────────────────────────┘

The three installation outcomes

┌─────────────────────────────────────────────────────────────┐
│  INSTALLATION OUTCOMES                                       │
│                                                              │
│  LOCAL + EXACT                                               │
│    package.json: "prettier": "3.9.4"                         │
│    Editor: uses 3.9.4                                        │
│    CI: uses 3.9.4                                            │
│    Result: identical formatting everywhere                   │
│                                                              │
│  LOCAL, NO EXACT                                             │
│    package.json: "prettier": "^3.9.4"                        │
│    npm install: may resolve 3.10.0                           │
│    CI with npm ci: uses lockfile version                     │
│    Result: mostly consistent, but lockfile drift risk        │
│                                                              │
│  GLOBAL ONLY                                                 │
│    package.json: no prettier                                 │
│    Editor: bundled or global version                         │
│    CI: npx downloads latest                                  │
│    Result: version drift, formatting conflicts               │
└─────────────────────────────────────────────────────────────┘

Editor resolution flow

┌─────────────────────────────────────────────────────────────┐
│  EDITOR PRETTIER RESOLUTION                                  │
│                                                              │
│  VS Code / JetBrains                                         │
│       │                                                      │
│       ▼                                                      │
│  Check workspace node_modules/prettier                       │
│       │                                                      │
│       ├── Found ──► Use that binary                          │
│       │                                                      │
│       └── Not found ──► Check global install                 │
│                              │                               │
│                              ├── Found ──► Use global        │
│                              │                               │
│                              └── Not found ──► Error/prompt  │
│                                                              │
│  The local install wins. Always.                             │
└─────────────────────────────────────────────────────────────┘

Project structure after local install

┌─────────────────────────────────────────────────────────────┐
│  PROJECT ROOT                                                │
│                                                              │
│  package.json          ← "prettier": "3.9.4" (exact)        │
│  package-lock.json     ← locked resolution                   │
│  .prettierrc           ← {} (formatting options)             │
│  .prettierignore       ← build, coverage, dist               │
│  node_modules/                                               │
│    └── .bin/                                                 │
│        └── prettier    ← local binary                        │
│                                                              │
│  Editor reads .prettierrc, runs node_modules/.bin/prettier. │
│  CI runs npx prettier, same binary, same config.             │
└─────────────────────────────────────────────────────────────┘

Summary

Item	Value
Recommended install	Local, with `--save-exact`
Local install command (npm)	`npm install --save-dev --save-exact prettier`
Global install command	`npm install --global prettier`
Local run command	`npx prettier . --write`
CI check command	`npx prettier . --check`
Config file	`.prettierrc` (empty `{}` is valid)
Ignore file	`.prettierignore`
VS Code extension	`esbenp.prettier-vscode`
Editor resolution priority	Local `node_modules/prettier` first
Version stability mechanism	`--save-exact` + `package-lock.json`

Key takeaways:

Local installs are the default for a reason. They pin the version per project, ensure editor and CI use the same binary, and make formatting reproducible across machines.
--save-exact prevents version drift. A caret range (^3.9.4) allows minor updates that may change formatting output. The exact version in package.json is the contract.
Editors resolve the local binary first. VS Code and JetBrains both look for node_modules/prettier before falling back to a global install. The local install is what the editor formats with.
Global installs are for ad-hoc use only. They do not read project configuration, do not respect the project’s pinned version, and should not be used inside a project that has a local install.
The npx fallback is a warning sign. If npx prettier downloads a version instead of running the local one, the local install is missing. Fix it before committing formatted code.
Config and ignore files make the project recognizable. An empty .prettierrc signals that Prettier is configured. A .prettierignore prevents build artifacts from being formatted and committed.

Remember: The installation decision is not about convenience; it is about reproducibility. A global Prettier formats code. A local Prettier formats code with the version the project agreed on. The difference only becomes visible when a formatting change lands in a minor release and the global install updates while the project stays pinned. By then, the formatted code is already in the repository, and the CI check is failing for reasons that have nothing to do with the developer’s changes. Install locally, pin exactly, configure the editor to use the local binary, and let the global install remain a tool for files that live outside any project.

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!