Solution:
In order to allow single-line blocks in VSCode using Prettier - Code formatter extension, please take the following steps:
- Enable stylelint integration by adding this in the VSCode Settings (JSON):
"prettier.stylelintIntegration": true - Install stylelint and stylelint-prettier npm modules in your project directory.
npm install stylelint stylelint-prettier --save-dev - Add a .stylelintrc.json file at the root of your project directory with the following code:
{
"plugins": ["stylelint-prettier"],
"rules": {
"block-closing-brace-newline-after": "always-multi-line",
"block-closing-brace-empty-line-before": "never",
"block-closing-brace-space-before": "always",
"block-opening-brace-space-after": "always",
"block-opening-brace-space-before": "always",
"block-closing-brace-newline-before": "always-multi-line",
"block-opening-brace-newline-after": "always-multi-line",
"indentation": 4
}
}
You can add/customize more stylelint rules, see the entire list of rules here.
Took me a while to understand how to configure these options, if you're starting out with stylelint, I highly recommend you read its guidelines first.
Answer from Arslan Akram on Stack OverflowSolution:
In order to allow single-line blocks in VSCode using Prettier - Code formatter extension, please take the following steps:
- Enable stylelint integration by adding this in the VSCode Settings (JSON):
"prettier.stylelintIntegration": true - Install stylelint and stylelint-prettier npm modules in your project directory.
npm install stylelint stylelint-prettier --save-dev - Add a .stylelintrc.json file at the root of your project directory with the following code:
{
"plugins": ["stylelint-prettier"],
"rules": {
"block-closing-brace-newline-after": "always-multi-line",
"block-closing-brace-empty-line-before": "never",
"block-closing-brace-space-before": "always",
"block-opening-brace-space-after": "always",
"block-opening-brace-space-before": "always",
"block-closing-brace-newline-before": "always-multi-line",
"block-opening-brace-newline-after": "always-multi-line",
"indentation": 4
}
}
You can add/customize more stylelint rules, see the entire list of rules here.
Took me a while to understand how to configure these options, if you're starting out with stylelint, I highly recommend you read its guidelines first.
I haven't known that vscode have that feature. One simple solution probably by specifying prettier-ignore?
/* prettier-ignore */
.some-class { background: #f00; }
Reference:
- https://prettier.io/docs/en/ignore.html#css
Videos
» npm install stylelint-config-prettier-scss
Hey everyone, for the life of me I can't figure out why prettier won't format css. I have gone over all of my setting, format on save, setting prettier as the default format, and checked the setting.json file. Still can't figure out what is going on. Any help would be appreciated!
» npm install prettier-plugin-css-order
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!
Recently joined a agency as an Contract React developer. I was assigned a task to edit some inline Scss code.
Being a Prettier user I formatted the code, made the necessary changes and submitted a pull request.
Next day the senior developer reviewed my code and asked me to stop using Prettier and assigned me a task to change back the Scss code manually to inline Scss.
When I asked why should I not use prettier to format code. He said it's bad and time consuming and other team members started telling me a story how one time prettier wasn't working and started throwing errors.
That's why they never use it.
I wanted to say that It was showing error because you were doing something wrong.
Just because you once had an bad experience doesn't mean it's bad.
Plus they use one big single Scss file for the whole project.
When I question it too and asked them to use separate files and how it can effect the performance.
One team member answered it doesn't matter, how they don't care about the performance and I should be open minded and learn from them. The boss has 18 years of experience.
What should I learn why not to follow good practices!
