Automate Prettier and ESLint formatting in WebStorm with Actions on Save

Stop manual formatting churn by letting Prettier and ESLint own save

The problem is not missing tools. WebStorm already ships with Prettier and ESLint support. The problem is conflicting ownership: the IDE code style, Prettier, and ESLint all try to reformat on save, causing code to jump back and forth and slowing large files. The useful takeaway is to make Prettier the sole formatter for JavaScript and TypeScript, let ESLint handle lint fixes, and centralize both in WebStorm Actions on Save driven by project-root config files.

Desired outcome

Save triggers automatic formatting with Prettier and automatic lint fixes with ESLint. Formatting rules are defined in .prettierrc and .eslintrc at the project root so the behavior is identical for teammates using other editors. Test files can use a different scope if needed.

Prerequisites

Node.js interpreter configured in WebStorm so the IDE can run Prettier and ESLint binaries. Project-root configuration files must exist: .prettierrc for formatting rules and .eslintrc for lint rules. If the project uses npm, install dev dependencies in the project root terminal with write permission to the project folder.

npm install --save-dev prettier eslint

Risk: adding dev dependencies changes package.json. Incorrect Node interpreter path will prevent plugins from executing.

Make Prettier the primary formatter

Open Settings > Languages & Frameworks > JavaScript > Prettier. Enable Prettier code formatter. Set Prettier package to "Use project settings" so WebStorm reads the local binary.

Disable the built-in IDE code style for JavaScript and TypeScript to avoid fighting. Settings > Editor > Code Style > JavaScript. Uncheck "Enable code style" or set Prettier as the formatter in the right-click menu. Fighting appears as formatting reverting immediately after save.

Example project-root .prettierrc:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

WebStorm will pick up this file automatically when it is under the project root.

Enable ESLint real-time analysis and fix on save

Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint. Enable ESLint. Set ESLint package to "Use project settings". Point the Node interpreter to the Node.js installation used by the project.

Enable "Automatic ESLint configuration" if the project contains a configuration file. Ensure the ESLint rules file is discoverable from the project root.

Orchestrate with Actions on Save

Settings > Tools > Actions on Save. Enable "Reformat with Prettier" and "Run ESLint --fix". Enable "Save files automatically if application is idle" only if desired.

This centralizes the orchestration. Prettier runs first for formatting, ESLint runs for lint fixes. Scope overrides are possible: click the scope selector next to each action to apply different rules to test files versus source files.

Scope override example

Create a scope for tests, e.g., file:*test*.ts. In Actions on Save, assign a different Prettier profile or disable certain ESLint rules for that scope. This keeps test assertions readable without changing source formatting.

Verify the setup

Create a file with intentional indentation errors and mixed quotes. Save the file. Formatting should correct indentation and quotes per .prettierrc.

Introduce a linting violation such as an unused variable. WebStorm should highlight the error and offer a quick-fix. With Actions on Save enabled, the violation should be fixed on save.

Check the Event Log or Notifications panel for plugin execution errors if formatting fails to trigger. Common causes are missing Node interpreter or missing local Prettier binary.

Limitations and recovery

Conflicting rules between IDE code style and Prettier cause fighting. Recovery is to disable IDE code style for JavaScript and TypeScript and rely on Prettier.

Running both Prettier and ESLint on save may degrade performance in extremely large monolithic files. Recovery is to limit Actions on Save to specific scopes or disable automatic reformatting for very large files.

Incorrect Node interpreter paths prevent plugins from executing. Recovery is to re-select the interpreter in Settings > Languages & Frameworks > Node.js and npm and re-enable the tools.

Rollback: if changes are unwanted, disable "Reformat with Prettier" and "Run ESLint --fix" in Actions on Save and re-enable IDE code style. No project files are modified by the IDE settings change.