How can I add line comments instead of block comments to multi-line HTML or CSS code in VS Code?

Question

In VS Code, when you use Ctrl + / to comment out code in certain languages like Python or JavaScript, it adds a line comment to each line by default instead of creating a block comment.

For example, in JavaScript:

// let i = 1
// function abc() {
//   let i = 0;
//   console.log(i);
// }

VS Code will create a block comment only when you use Shift + Alt + A,

/* function abc() {
  let i = 0;
  console.log(i);
}
 */

However, for HTML or CSS, things are different--no matter whether you use Ctrl + / or Shift + Alt + A, VS Code always adds a block comment, like this:

.banner {
  /* display: block;
  margin: 0 auto;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5); */
}

This isn't very convenient, especially in CSS, because we often need to comment and uncomment properties to quickly test different styles in the browser.

For example, if I want to see the effect of adding the background-color property, I have to first remove the block comment and then re-comment out the display, margin and border-radius properties:

If VS Code used line comments instead, I could simply uncomment the line with background-color:

.banner {
  /* display: block; */
  /* margin: 0 auto; */
  /* border-radius: 50%; */
  background-color: rgba(255, 255, 255, 0.5);
}

I don't know why VS Code changes its commenting behavior for HTML and CSS, but it's really inconvenient.

So, is there a way to change this?

I found this solution online: Use single-line comments for HTML & CSS.

However, it's not perfect.

For example, let's take JavaScript again:

let i = 1;
function abc() {
  // let i = 0;
  console.log(i);
}

Here, one line is already commented.

If I now comment out the entire block using Ctrl + /, I'll get:

// let i = 1
// function abc() {
//   // let i = 0;
//   console.log(i);
// }

As you can see, the line let i = 0; gets double-commented, which is just I want.

But with the method provided in the link above, if you already have commented code in CSS like this:

.banner {
  display: block;
  /* margin: 0 auto;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5); */
}

and then press Ctrl + /, it actually uncomments the already-commented lines instead:

.banner {
  /* display: block; */
  margin: 0 auto;
  /* border-radius: 50%; */
  /* background-color: rgba(255, 255, 255, 0.5); */
}

There are no single line comments for HTML or CSS, so unfortunately you will have to stick with that solution. — html_coder
– html_coder, Commented Nov 4 at 5:00

starball · Accepted Answer · 2025-11-04 12:15:35Z

1

You can work around this by using multiple cursors. Add a cursor anywhere in each line you want to individually comment out, and then Toggle Line Comment.

See also the editor.action.insertCursorAbove (bound by default to ctrl+shift+up) and corresponding editor.action.insertCursorBelow keyboard shortcut command IDs (for the Add Cursor Above and Add Cursor Below commands in the command palette). Or use alt+click to insert/remove cursors at specific positions, or click and drag the middle mouse button, or the various other controls specified in https://code.visualstudio.com/docs/editor/codebasics#_column-box-selection.

You have various options to try to make this easier via keyboard shortcuts. Ex.

{
    "key": "ctrl+/",
    "when": "!isMac && editorTextFocus && !editorReadonly && editorHasSelection && (editorLangId == html || editorLangId == css)", // define another binding for `isMac`
    "command": "runCommands",
    "args": { "commands": [
        "editor.action.insertCursorAtEndOfEachLineSelected",
        "editor.action.commentLine",
        // "cursorUndo", // doesn't work, unfortunately, since the text has changed where the previous cursor undo info was
        "removeSecondaryCursors",
        "cursorLineStart",
    ]},
},

As for a less work-aroundy solution, at least for CSS, there's a feature-request you may be interested in- Please add an option to switch to using line-by-line comments #166944. I suggest that you give that issue ticket a thumbs up to show support for it. You can also subscribe to it to get notified about discussion and progress. Please avoid making noisy comments there like ones that just consist of "+1" / "bump".

edited Nov 4 at 12:15

answered Nov 4 at 9:24

starball♦

59.5k52 gold badges312 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Cloud Nov 4 at 12:05

Thanks for your answer. However, the solution I mentioned in the link above also uses multiple cursors. In step 2, it adds the editor.action.insertCursorAtEndOfEachLineSelected to the settings. And since it uses the multi-command extension to override VS Code’s default Ctrl + / behavior and turn it into line comments, it’s actually more convenient than using multiple cursors directly. Glad to know that the VS Code team has added this request to their backlog — looking forward to seeing this feature implemented.

starball Nov 4 at 12:16

@Cloud you don't need an extension. see edit :)

Cloud Nov 5 at 1:01

Wonderful! It really works. There probably isn't a better solution for now — I’ll accept your answer and wait for the VSCode team to implement this feature in a future update.

Collectives™ on Stack Overflow

How can I add line comments instead of block comments to multi-line HTML or CSS code in VS Code?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related