CODEWITHSUNDEEP
sassvisual-studio-code
Astravagrant
Astravagrant

Reputation: 755

Why is VS Code formatting my SCSS when I have set my config to disable auto-formatting?

I have some SCSS code like so:

$theme-colors: ( 
  "primary": #0074d9,
  "danger": #ff4136,
);

Every time I save this file, it auto-formats it to this:

$theme-colors: ( "primary": #0074d9,
"danger": #ff4136,
"danger2": #ff4136,
);

Which is rubbish (imo). I don't want it and have spent over an hour looking for the cause.

I disabled all SASS-oriented plugins, linters and formatters. I changed the user settings, workspace settings, vue-project settings, I created prettierrc files so I could disable this weird formatting. I created a local vue.config file to disable format-on-save (just to see if it affected the issue). Nothing made any difference.

Upvotes: 3

Views: 3785

Answers (2)

Prasad Gayan
Prasad Gayan

Reputation: 1712

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.

enter image description here

enter image description here

But whenever you need to format the specific page you can go to the 'Command Pallet' and run "Formatter" command.

Upvotes: 2

Astravagrant
Astravagrant

Reputation: 755

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.

Upvotes: 4

Related Questions