Given the input file
./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
npm install --save-dev stylelint-prettier prettier
stylelint-prettier does not install Prettier or Stylelint for you. You must install these yourself.
Then, in your
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
In addition to the above installation instructions, install
stylelint-config-prettier:npm install --save-dev stylelint-config-prettier
Then all you need in your
This does three things:
- Enables the
- Enables the
- Extends the
You can then set Prettier's own options inside a
Note: While it is possible to pass options to Prettier via your Stylelint configuration file, it is not recommended because editor extensions such as
.prettierrc, but won't read settings from Stylelint, which can lead to an inconsistent experience.
Objects are passed directly to Prettier as options. Example:
NB: This option will merge and override any config set with
.prettierrc files (for Prettier < 1.7.0, config files are ignored)
The layout for this codebase and base configuration of prettier was taken from https://github.com/prettier/eslint-plugin-prettier