It turns out this was due to a seemingly-unrelated formatter:
JS-CSS-HTML Formatter
I'd forgotten I had this installed (I have about 100 extensions). Sadly, this doesn't mention SCSS or SASS anywhere in its profile. But it does mention it in a changelog update in 2016. Silly me.
I've uninstalled this extension and that's stopped the annoying formatting. I'm sure it's good at it's job, but it isn't obvious that it's doing anything and this made the problem really hard to find.
It did make me have a much-needed clean-out of my extensions, though.
Answer from Astravagrant on Stack OverflowIt turns out this was due to a seemingly-unrelated formatter:
JS-CSS-HTML Formatter
I'd forgotten I had this installed (I have about 100 extensions). Sadly, this doesn't mention SCSS or SASS anywhere in its profile. But it does mention it in a changelog update in 2016. Silly me.
I've uninstalled this extension and that's stopped the annoying formatting. I'm sure it's good at it's job, but it isn't obvious that it's doing anything and this made the problem really hard to find.
It did make me have a much-needed clean-out of my extensions, though.
I fixed this temporarily by disabling the format on the auto save option.
Go to View -> "Command Pallet" and type "Formatter Config" and change the value to "false" of the "onSave" option to restart the visual code.
But whenever you need to format the specific page you can go to the 'Command Pallet' and run "Formatter" command.
Setting up auto-compile SCSS on save?
Add support for stylelint as SCSS formatter
VSCode Format on save breaks app.css
visual studio code - How to Edit Auto-Formatting Rules for CSS/SCSS/LESS using Prettier in VSCode? - Stack Overflow
Videos
I am needing to setup a workflow for VS coming from Sublime.
In Sublime I have an extension installed that automatically compiles the CSS file upon each save. When I set it up I simply installed and it worked just fine the first time.
What is the process in VS? I have tried a couple extensions from the marketplace... but on save nothing happens. Looking at the different authors docs it seems like they should work, as the flags and switches offered seem to target fringe cases (there is no additional information otherwise).
What is the simplest tool to install?
Thanks
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.
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
I've editor.formatOnSave=true but still get newlines and comments being shifted around on save. Tried to disable it in the scss specific settings as well without much luck:
"[scss]": {
"editor.formatOnSave": false,
"editor.formatOnType": false
}Is there a way I can know the functions/extensions hooked to a certain event?
Yes, try installing vscode-css-formatter extension.
It just adds the functionality to format .css files and the shortcut stays the same Alt+Shift+F.
Beautify css/sass/scss/less
to run this
enter alt+shift+f
or
press F1 or ctrl+shift+p
and then enter beautify ..
an another one - JS-CSS-HTML Formatter
i think both this extension uses js-beautify internally