Files
vscode-extension-samples/decorator-sample
Matt Bierner 5d3686b7dc Bump old vscode versions
This bumps the `@types/vscode` and `engines: vscode` on packages that were using very old versions. These old versions used a `vscode.d.ts` that didn't include proper link support. We've also made a number of fixes and improvements to `vscode.d.ts` that are useful to extension authors
2023-01-30 21:11:11 -08:00
..
2020-05-29 14:20:07 -07:00
2022-04-13 15:49:42 -07:00
2020-05-29 14:13:32 -07:00
2015-11-05 17:33:07 +01:00
2018-10-29 08:34:37 +01:00
2023-01-30 21:11:11 -08:00
2023-01-30 21:11:11 -08:00
2018-10-28 22:29:18 +01:00
2022-02-28 13:45:21 -08:00
2022-05-20 11:53:24 -04:00

Decorator Sample

This folder contains a sample VS code extension that demonstrates the editor decorator API.

The sample creates a decoration for each number that appears in the active editor. It demonstrates some of the decorator features such as borders, background colors, cursors and hovers.

The sample also shows the use of a user defined themeable color. Instead of hardcoding a color value this allows users (and themes) to redefine the color in the user settings.

sample

VSCode API

The sample code show the usage of the vscode.TextEditor.setDecorations and vscode.window.createTextEditorDecorationType APIs as well as the colors contribution point.

Running the Sample

  • npm install to initialize the project
  • npm run watch to start the compiler in watch mode
  • open this folder in VS Code and press F5
  • this will open the [Extension Development Host] window, running the extension:
    • Open any document that contains single and multi-digit numbers.
    • The extension will decorate single and multiple-digit numbers as shown in the screenshot above.
    • In the user settings, add
      "workbench.colorCustomizations": {
          "myextension.largeNumberBackground": "#ff00ff"
      }
      
      to customize the large number decoration color.