How to make vscode format SCSS calc function properly

I have an SCSS file that contains a calc() function. When i use a calc function without spaces around the operator like so calc(var(--primary-color-h)+5) the transpiled CSS result doesn't work. Only when i set spaces around the operator does it work; like this calc(var(--primary-color-h) + 5) How would i instruct VSCODE to created spaces around the operator upon save. I have prettier, scss Formatter and StyleLint installed. But neither seems to fix it. tnx, RDG

You can use Stylelint and the following two rules:

• function-calc-no-unspaced-operator
• function-whitespace-after

These will flag the lack of space before and after the + operator, respectively. See this demo.

This rules are turned on the SCSS standard config, which you can extend in your Stylelint configuration object:

{
  "extends": "stylelint-config-standard-scss"
}

How would i instruct VSCODE to created spaces around the operator upon save

You can use the editor.codeActionsOnSave option from the official Visual Studio Code extension for Stylelint. And the following to your VS Code settings file:

  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  }