VSCode Extension

September 28, 2018

lets make an extension!

what i want to do is a code lens of sort. relevant links:

hello world

I got a thing showing up inline!

const vscode = require("vscode");

// this method is called when vs code is activated
exports.activate = activate;
function activate(context) {
  // create a decorator type that we use to decorate large numbers
  const largeNumberDecorationType = vscode.window.createTextEditorDecorationType(
    {
      //   cursor: "crosshair",
      //   backgroundColor: "rgba(255,0,0,0.3)",
      after: {
        margin: "0 0 0 3em",
        textDecoration: "none"
      },
      rangeBehavior: vscode.DecorationRangeBehavior.OpenOpen
    }
  );

  let activeEditor = vscode.window.activeTextEditor;
  if (activeEditor) {
    triggerUpdateDecorations();
  }

  vscode.window.onDidChangeActiveTextEditor(
    editor => {
      activeEditor = editor;
      if (editor) {
        triggerUpdateDecorations();
      }
    },
    null,
    context.subscriptions
  );

  vscode.workspace.onDidChangeTextDocument(
    event => {
      if (activeEditor && event.document === activeEditor.document) {
        triggerUpdateDecorations();
      }
    },
    null,
    context.subscriptions
  );

  var timeout = null;
  function triggerUpdateDecorations() {
    if (timeout) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(updateDecorations, 500);
  }

  function updateDecorations() {
    if (!activeEditor) {
      return;
    }
    // const regEx = /\d+/g;
    // const text = activeEditor.document.getText();
    const largeNumbers = [];
    const scrollable = true;
    const decoration = {
      renderOptions: {
        after: {
          backgroundColor: "red", //new ThemeColor('gitlens.trailingLineBackgroundColor'),
          color: "yellow", //new ThemeColor('gitlens.trailingLineForegroundColor'),
          // contentText: Strings.pad(message.replace(/ /g, GlyphChars.Space), 1, 1),
          contentText: "=============hello world===========",
          fontWeight: "normal",
          fontStyle: "normal"
          // Pull the decoration out of the document flow if we want to be scrollable
          // textDecoration: `none;${scrollable ? "" : " position: absolute;"}`
        }
      }
    };
    decoration.range = new vscode.Range(
      10,
      Number.MAX_SAFE_INTEGER,
      10,
      Number.MAX_SAFE_INTEGER
    );
    largeNumbers.push(decoration);
    activeEditor.setDecorations(largeNumberDecorationType, largeNumbers);
  }
}

now to make it multiline

abandoning ship

i realized that theres no way to make this thing multiline - css decoration is inherently limited there.

instead i have to use code lens:

official docs https://code.visualstudio.com/docs/extensionAPI/language-support#_codelens-show-actionable-context-information-within-source-code
(rest of the owl tutorial) https://medium.com/@kisstkondoros/typelens-ca3e10f83c66

it's poorly documented and i am realizing i dont have a strong vision of what this looks like. its a good point to just abandon it for now since it wont be as effective a demo as i can do elsewhere.