stylelint-prettier

5.0.3 verified Sat Apr 25 auth: no javascript

Runs Prettier as a Stylelint rule and reports formatting differences as individual Stylelint issues. Version 5.0.3 is current, requiring Node >=18.12.0, Prettier >=3.0.0, and Stylelint >=16.0.0. It integrates Prettier's opinionated formatting directly into the Stylelint linting workflow, allowing developers to catch formatting inconsistencies as lint errors during development or in CI. Unlike standalone Prettier checks, this plugin formats the output as Stylelint violations with precise line/column positions. It is maintained by the Prettier organization and follows the same release cadence as its peer dependencies. Key differentiator: it eliminates the need for separate Prettier CI checks and provides uniform reporting with other Stylelint rules.

Common errors

error Error: Cannot find module 'prettier' ↓

cause Prettier is a peer dependency and is not installed automatically.

fix

Run 'npm install --save-dev prettier' or ensure version >=3.0.0 is present.

error Configuration for rule "prettier/prettier" is invalid: Value false should be an object or boolean. ↓

cause Stylelint expects array or boolean, but string 'error' is ESLint-style.

fix

Change to true or [true, {...}] in your .stylelintrc rules.

error Unknown rule: prettier/prettier ↓

cause The plugin is not loaded in the 'plugins' array.

fix

Add 'stylelint-prettier' to the plugins array or extend 'stylelint-prettier/recommended'.

error Parsing errors in your CSS file / unexpected token ↓

cause Prettier cannot parse the file; either invalid CSS or unsupported syntax.

fix

Check the CSS file for syntax errors. Consider adding a .prettierignore for files that Prettier cannot parse.

Warnings

deprecated stylelint-config-prettier is no longer needed for Stylelint v15+ because stylistic rules are deprecated and removed in v16. ↓

fix If using Stylelint >=15, remove stylelint-config-prettier dependency and extends entry.

breaking Version 5.0.0 dropped support for Stylelint <16 and Prettier <3. Existing configs may break after upgrade. ↓

fix Update Prettier to >=3.0.0 and Stylelint to >=16.0.0. Remove any deprecated stylistic rules.

gotcha Passing options via Stylelint rule overrides .prettierrc for Prettier <1.7.0 but merges for newer versions. ↓

fix Prefer configuring in .prettierrc and avoid options in Stylelint config to ensure editor extensions consistency.

gotcha The rule name is 'prettier/prettier', not 'stylelint-prettier/prettier'. ↓

fix Use 'prettier/prettier' in the rules object of .stylelintrc.

deprecated Stylelint v15 deprecated all stylistic rules that conflict with Prettier. The plugin may still work but expects those rules to be disabled. ↓

fix Upgrade to Stylelint v16 where those rules are removed. For v15, use stylelint-config-prettier to disable them.

Install

npm install stylelint-prettier

yarn add stylelint-prettier

pnpm add stylelint-prettier

Imports

stylelint-prettier

wrong

const sp = require('stylelint-prettier') (not a Node module to require at runtime)

correct

import 'stylelint-prettier' (in plugins array) or use extends: ['stylelint-prettier/recommended']

Configure in .stylelintrc; do not import in source code.

prettier/prettier

wrong

{"rules": {"prettier/prettier": "error"}} (Stylelint uses true/false or severity options, not ESLint-style)

correct

"plugin": ["stylelint-prettier"] and "rules": { "prettier/prettier": true }

The rule is named 'prettier/prettier' and is enabled via the 'prettier/prettier' key.

stylelint-config-prettier

wrong

Extending stylelint-config-prettier without also adding stylelint-prettier (conflicts won't be overridden)

correct

npm install stylelint-config-prettier --save-dev; extends: [..., 'stylelint-config-prettier']

Only needed if you use deprecated stylistic rules from Stylelint <16.

Quickstart

Configures stylelint-prettier with recommended preset and custom Prettier options (single quotes, 2-space tabs).

// .stylelintrc
{
  "extends": ["stylelint-prettier/recommended"],
  "rules": {
    "prettier/prettier": [true, {
      "singleQuote": true,
      "tabWidth": 2
    }]
  }
}