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 stylelint-prettier 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
}
}
Alternatively you can extend from the stylelint-prettier/recommended
config,
which does the same thing:
{
"extends": ["stylelint-prettier/recommended"]
}
Disabling rules that may conflict with Prettier
As of Stylelint v15, Stylelint deprecated all stylistic rules that conflict with prettier. If you are using Stylelint v15 and are not using any of these deprecated rules then you do not need to do anything extra; this section does not apply to you.
If you are using Stylelint's stylistic rules, then many of them shall conflict with Prettier. This plugin works best if you disable all other Stylelint rules relating to stylistic opinions. If another active Stylelint rule disagrees with prettier
about how code should be formatted, it will be impossible to avoid lint errors. You should use stylelint-config-prettier to disable all stylistic Stylelint rules.
To integrate this plugin with stylelint-config-prettier
:
-
In addition to the above installation instructions, install
stylelint-config-prettier
:npm install --save-dev stylelint-config-prettier
-
Then add
stylelint-config-prettier
to the list of extended configs in your.stylelintrc
that you added in the prior section.stylelint-config-prettier
should go last in the array so that it will override other configs:{ "extends": [ "stylelint-prettier/recommended" "stylelint-config-prettier" ] }
You can then set Prettier's own options inside a .prettierrc
file.
Options
stylelint-prettier will honor your .prettierrc
file by default. You only
need this section if you wish to override those settings.
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
andprettier-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
Inspiration
The layout for this codebase and base configuration of prettier was taken from https://github.com/prettier/eslint-plugin-prettier