VSCode is the editor we use every day. We use a lot of VSCode plug-ins, some of which are quite powerful but actually quite simple to implement. Today I will introduce one of these apis to you.

Concept construe positively

To understand a few concepts:

Every this Editor window is called an Editor, through vscode. Window. VisibleTextEditors can get all visible Editor instance.

What’s in the editor?

In the editor, of course, you can get the document instance through editor.document.

Document can be retrieved via document.gettext ().

Now comes the simple and powerful API: editor.setdecorations (decoration, range)

What it does is add some CSS, called decorations, from somewhere in the editor to somewhere in the scope.

Create the decorator API is window. CreateTextEditorDecorationType:

vscode.window.createTextEditorDecorationType({
  textDecoration: 'line-through',})Copy the code

The parameters are CSS, and you can add a variety of styles. You can also add pseudo-elements (before or after) :

vscode.window.createTextEditorDecorationType({
  before: {
    contentText:' '.textDecoration: `none; `}})Copy the code

So where do we put these decorations? Is specified by the second parameter range, which is specified by two positions in the document.

const startPos = activeEditor.document.positionAt(ndex1);
const endPos = activeEditor.document.positionAt(index2);
const range = new vscode.Range(startPos, endPos);
Copy the code

In this way, you can decorate the editor.

Let’s connect the dots:

Get the document from the editor, then document.gettext () gets the text, find the two positions position1 and position2, construct a range, This range is then decorated by editor.setDecorations, which are various CSS or pseudo-elements.

You might say, that’s it? What’s so powerful about this API?

So let’s see what this API can do.

The application of the decorator

CSS Color Preview

You have not used this CSS color highlight plugin, vscode-color-highlight. This is implemented by matching the color range with the re, and then adding a before pseudo-element decoration, adding the background color.

The image above shows a color preview I did earlier, with gradient support.

Gitlens intra-line COMMIT information

How does gitlens, arguably the most popular VSCode plug-in, display commit information in the editor?

Yes, through a decorator, too.

Edit the special effects

Also, the visual studio code-power-mode plugin that fires fireworks in the editor is based on a decorator. The idea is that when the document changes, you add the before element, you put a GIF, and it disappears after a while.

These features are based on the editor. setdesk API that we have seen before, and are simple and powerful.

conclusion

VSCode inside each edit window is an editor instance, by VSCode. Window. VisibleTextEditors get all visible editor.

The document is in the editor, and you can get the text from document.getText.

Then, by matching the text with a regular, you determine the range of decorations to add, and create a decoration object, which is a piece of CSS. Now you can decorate the editor with this simple and powerful API: editor.setDecorations.

There are a lot of decorators that we use in VSCode, such as CSS color previews, inline git blame information, and editing effects such as fireworks. Is it simple and powerful?

Boy, this is my collection of VSCode plug-in API to teach you, can limit your imagination should be the only bar.