visual studio code editor embellishments

to mitigate this, either store the type globally or as a member variable of a class.Īs well, do try to be efficient with updating decorations, as it could get computationally costly if updating decorations often if you are decorating the entire file rather than a single line or scope of code. That said, if you call the createTextEditorDecorationType function every single time you want to insert decorations, it will treat each one as a new instance which can cause unexpected behavior down the road. decoration type objects are used as the key for decorations so if you send a new array of ranges to be decorated, it will overwrite them. First, the decorationType object is very important when updating decorations.

Some things to know when using decorations. Open up a JS file that has a few console.log calls and press save and you should see the decorations in action: Now if you open the debugging menu and run the Extension launch configuration or press F5, a debugging instance of VS Code will open up. Extensions that use decorationsĭecorations has been widely adopted across the extension community and here are a sample of extensions that show off what can be done with decorations:Ĭonst decorationType = vscode.

It does not modify the code but rather gives a visual addition in VS Code to how you can interpret your code.Īs well, in VS Code 1.3, they added support to use the ::before and ::after pseudoelements on these decorations through the API which is commonly seen in various extensions now in 2018. It allows you to grab ranges of text in an editor and decorate it using a subset of CSS properties. The Decorations API was introduced to Visual Studio Code as a way to decorate pieces of code. Likely the most well known example that uses decorations is GitLens, but as I show, the interface isn’t that difficult to learn.

This week, I am going into how you can insert decorations into files with your extenisons. VS Code Extension API: Decorations Septem6 minutes to read

Visual studio code editor embellishments