CODEWITHSUNDEEP
visual-studio-code
RobbieC
RobbieC

Reputation: 472

wrong auto comments for scss in vscode

I'm having an issue with the auto comments in my .scss files. By auto comments I mean 'CTRL + /' to comment out the selected code. When I'm in my scss file and I do this, it adds the JS comments '//'. So the output looks like this:

body {
  font-size: 1rem;
  line-height: 1.4;
  // overflow-x: hidden;
}

When it should be:

body {
  font-size: 1rem;
  line-height: 1.4;
  /* overflow-x: hidden; */
}

If I rename the .scss file to .css then the auto comments work correctly. I'm guessing this has to do with a setting inside of VSCode, either user or workspace setting?

Upvotes: 3

Views: 1512

Answers (3)

Jason Sims
Jason Sims

Reputation: 41

That is valid comment syntax for SCSS, and it's probably the correct default.

Single-line comments (which start with //) are always removed from the compiled output, which is usually what you want.

Multi-line comments (/* comment */) are only removed in compressed mode.

Source: Sass: Comments

Upvotes: 0

Mark
Mark

Reputation: 181218

Please see the comments to @Timothy's answer. I have previously written an extension to deal with these issues, Custom Language Properties, that allows you to easily change things like line or block comments for many languages.

But setting lineComment to the OP's desired ["/*","*/"] did not work. In looking at the scss language configuration file, an array of values is not allowed for line comment values. But it works to delete the lineComment key or setting it to the empty string "".

However, although probably rare, any language configuration file can be overwritten whenever vscode updates and you would have to go back and change the file again. Hence the extension.

With this setting:

"custom-language-properties": {
  "scss.comments.lineComment": ""
}

this accomplishes the same thing as editing the underlying language-configuration file. And fortunately, at least in this case, apparently vscode will apply the blockComment value when the lineComment value is missing or inappropriate. And fortunately that blockCcomment style is what the OP wanted.

Upvotes: 2

Timothy G.
Timothy G.

Reputation: 9065

I believe this is working as expected, as SCSS supports both ways to comment, and I do not think there are any settings in Visual Studio Code you can change to change how the comment style works.

Ctrl + / is "Toggle Line Comment", which is the // way. If you want to comment using the multi-line comment format, you can instead highlight what it is you want to comment, and perform Shift + Alt + A.

shift alt a way

However, there is another way to change how the Line Comments work:

  • Find where Visual Studio Code is installed on your system, and go to resources → app → extensions → scss
  • In the scss folder should be a "language-configurations.json" file. Open it.
  • Change the lineComment property to be either a blank string, or delete it outright.
"lineComment": ""
  • Save the file, and restart Visual Studio Code. Now when you perform Ctrl + /, it should comment using the style you prefer.

Upvotes: 4

Related Questions