vscode-ext-decoration v1.1.0

vscode-ext-decoration

This module contains a set of helper functions to work with Decorations while developing VS Code extensions.

Installation

npm install vscode-ext-decoration

Usage

    import { createLineDecoration, createGutterDecoration } from "vscode-ext-decoration";

    ...

    // regular file from disk
    const pathIcon = context.asAbsolutePath("images/bookmark.svg");    
    // building a SVG on the fly
    const pathIcon = Uri.parse(
        `data:image/svg+xml,${encodeURIComponent(
            `<?xml version="1.0" ?><svg height="16px" version="1.1" viewBox="0 0 16 16" width="16px" 
            xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" 
            xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" 
            id="Page-1" stroke="none" stroke-width="1"><g fill="#157EFB" id="icon-18-bookmark">
            <path d="m6.6319,2.13334c-0.82764,0 -1.49857,0.67089 -1.49857,1.49555l0,10.50444l2.99999,-3l3,3l0,-10.50444c0,
            -0.82597 -0.67081,-1.49555 -1.49858,-1.49555l-3.00285,0z" id="bookmark"/></g></g></svg>`,
        )}`,
    );
    const backgroundColor: string = vscode.workspace.getConfiguration("bookmarks").get("backgroundLineColor", "");

    const decor = createLineDecoration(backgroundColor, "rgba(0, 255, 0, 0.5)", vscode.OverviewRulerLane.Full, "rgba(21, 126, 251, 0.7)", pathIcon);

Support

If you find it useful, please consider supporting it.

License

MIT © Alessandro Fragnani