Right now, I'm trying to format my SCSS code with Prettier, with the rules of Stylelint. I'm having a hard time getting these two to line up.
For example, I keep getting declaration-colon-new-line
error with stylelint (which is correct) for the following scss code:
background-image: linear-gradient(45deg, transparent 50%, #263b59 50%),
linear-gradient(135deg, #263b59 50%, transparent 50%),
radial-gradient(transparent 0%, transparent 0%);
It should look like the following (or something to satisfy the rule) after being formatted with Prettier, but I cannot find the options or how to do so:
background-image:
linear-gradient(45deg, transparent 50%, #263b59 50%),
linear-gradient(135deg, #263b59 50%, transparent 50%),
radial-gradient(transparent 0%, transparent 0%);
Can anyone please help me get Prettier to auto-format things with the rules of Stylelint? I'm very new to this so a little lost.
You can integrate Prettier with stylelint by turning off the conflicting stylelint rules using the stylelint-config-prettier shared config .
For example:
// .stylelintrc
{
"extends": [
"stylelint-config-standard" // or whatever config you're using
"stylelint-config-prettier"
]
}
Prettier will then be responsible for the bulk of the formatting, and stylelint will be responsible for checking for possible errors and limiting languages features .
I am new to all of this, but might be able to help. I have been working on getting stylelint to autofix on save for just CSS. I have a.stylelintrc file in my project folder with all of my rules. The settings.json to stop Prettier from overriding:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[css]": {
"editor.defaultFormatter": null,
"editor.formatOnSave": false
},
"editor.formatOnSave": true,
"prettier.useTabs": true,
"prettier.proseWrap": "never",
"prettier.printWidth": 300,
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
}
}
Its working for me so far!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.