stylelint-prettier

What is stylelint-prettier?

The stylelint-prettier package integrates Prettier with Stylelint, allowing you to use Prettier as a Stylelint rule. This ensures that your styles are formatted according to Prettier's rules while also being linted by Stylelint.

What are stylelint-prettier's main functionalities?

Integrate Prettier with Stylelint

This configuration in your .stylelintrc file extends the recommended settings for integrating Prettier with Stylelint. It ensures that your styles are formatted according to Prettier's rules and also linted by Stylelint.

{
  "extends": [
    "stylelint-prettier/recommended"
  ]
}

Run Prettier as a Stylelint rule

This configuration in your .stylelintrc file sets up Prettier as a Stylelint rule. You can customize Prettier's options, such as using single quotes and adding trailing commas, directly within your Stylelint configuration.

{
  "rules": {
    "prettier/prettier": [
      true,
      {
        "singleQuote": true,
        "trailingComma": "all"
      }
    ]
  }
}

Other packages similar to stylelint-prettier

eslint-plugin-prettier

eslint-plugin-prettier integrates Prettier with ESLint, allowing you to use Prettier as an ESLint rule. This package is similar to stylelint-prettier but is used for JavaScript and other languages supported by ESLint instead of CSS.

stylelint-config-prettier

stylelint-config-prettier is a configuration package that turns off all Stylelint rules that are unnecessary or might conflict with Prettier. Unlike stylelint-prettier, it does not run Prettier as a Stylelint rule but ensures that the two tools do not conflict.

README

stylelint-prettier

Runs Prettier as a Stylelint rule and reports differences as individual Stylelint issues.

Sample

Given the input file style.css:

.insert {
  display: block
}

.alter:after {color: red; content: 'example'}

.delete {
  display: block;;
}

Running ./node_modules/.bin/stylelint style.css shall output:

style.css
 2:17  ✖  Insert ";"                                          prettier/prettier
 5:15  ✖  Replace "color:·red;·content:·'example'" with       prettier/prettier
          "⏎··color:·red;⏎··content:·"example";⏎"
 8:17  ✖  Delete ";"                                          prettier/prettier

Installation

npm install --save-dev eslint-plugin-prettier
npm install --save-dev --save-exact prettier

stylelint-prettier does not install Prettier or Stylelint for you. You must install these yourself.

Then, in your .stylelintrc:

{
  "plugins": ["stylelint-prettier"],
  "rules": {
    "prettier/prettier": true
  }
}

Recommended Configuration

This plugin works best if you disable all other Stylelint rules relating to code formatting, and only enable rules that detect patterns in the AST. (If another active Stylelint rule disagrees with prettier about how code should be formatted, it will be impossible to avoid lint errors.) You can use stylelint-config-prettier to disable all formatting-related Stylelint rules.

If your desired formatting does not match the prettier output, you should use a different tool such as prettier-stylelint instead.

To integrate this plugin with stylelint-config-prettier, you can use the "recommended" configuration:

1. In addition to the above installation instructions, install stylelint-config-prettier:

npm install --save-dev stylelint-config-prettier

1. Then all you need in your .stylelintrc is:

{
  "extends": ["stylelint-prettier/recommended"]
}

This does three things:

1. Enables the stylelint-plugin-prettier plugin.
2. Enables the prettier/prettier rule.
3. Extends the stylelint-config-prettier configuration.

You can then set Prettier's own options inside a .prettierrc file.

Options

Note: While it is possible to pass options to Prettier via your Stylelint configuration file, it is not recommended because editor extensions such as prettier-atom and prettier-vscode will read .prettierrc, but won't read settings from Stylelint, which can lead to an inconsistent experience.

Objects are passed directly to Prettier as options. Example:

{
  "rules": {
    "prettier/prettier": [true, {"singleQuote": true, "tabWidth": 4}]
  }
}

NB: This option will merge and override any config set with .prettierrc files (for Prettier < 1.7.0, config files are ignored)

---

Contributing

See CONTRIBUTING.md

Changelog

0.2.0 (2018-07-02)

• Add support for autofixing issues using stylelint --fix