Comment style sample from Wes Bos

extension.ts

import * as vscode from "vscode";

export function activate(context: vscode.ExtensionContext) {
  commentDecoration();

  vscode.window.onDidChangeActiveTextEditor(() => {
    commentDecoration();
  });

  vscode.workspace.onDidChangeTextDocument(
    (_) => {
      commentDecoration();
    },
    null,
    context.subscriptions
  );
}

const commentDecoration = () => {
  const decorator = vscode.window.createTextEditorDecorationType({
    textDecoration: `none;
		background: #ffc600;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.01), 0 0 10px 10px rgba(0, 0, 0, 0.1);
    font-family: "Radnika Next";
    font-weight: 900;
    padding: 0px;
    line-height: 1.5;
    color: black !important;
    display: inline-block;
    transform: rotate(-1deg);
		`,
  });

  const activeEditor = vscode.window.activeTextEditor;
  if (!activeEditor) {
    return;
  }

  const { document } = activeEditor;
  const text = document.getText();

  // For each comment, create a decoration.
  const decorations = [];

  // Retrieve single line comments
  let singleLineRegEx = new RegExp(/\/\/.*\n/, "ig");

  let comment;
  while ((comment = singleLineRegEx.exec(text))) {
    const startPos = document.positionAt(comment.index);
    const endPos = document.positionAt(comment.index + comment[0].length);
    decorations.push({ range: new vscode.Range(startPos, endPos) });
  }

  // Add the decorations to the editor
  if (decorations.length > 0) {
    activeEditor.setDecorations(decorator, decorations);
  }
};

export function deactivate() {}