【Visual Studio Code Extension開発】エディタに着色する方法

簡単に

1. 色などのデータをvscode.window.createTextEditorDecorationTypeインスタンスに格納する
2. 色を付けたい範囲をvscode.Rangeインスタンスに格納する
3. vscode.window.activeTextEditor.setDecorations()に、2つのインスタンスを渡す

これで色が付きます。

詳細に

vscode.window.createTextEditorDecorationTypeインスタンスの生成

var decorator: vscode.TextEditorDecorationType;
decorator = vscode.window.createTextEditorDecorationType({
    'borderWidth': '1px',
    'borderRadius': '2px',
    'borderStyle': 'solid',
    'light': {
        'backgroundColor': 'rgba(58, 70, 101, 0.3)',
        'borderColor': 'rgba(58, 70, 101, 0.4)',
        'color': 'rgba(255, 0, 0, 1.0)'
    },
    'dark': {
        'backgroundColor': 'rgba(117, 141, 203, 0.3)',
        'borderColor': 'rgba(117, 141, 203, 0.4)',
        'color': 'rgba(255, 255, 0, 1.0)'
    }
});

light、darkの中にそれぞれスタイルを指定すると、テーマのligth、darkによってスタイルを変えることができるみたいです。（light、darkの判断基準は未調査）。
ひとまず文字色・背景色を指定していますが、インスタンス生成時に渡せる属性はたくさんあるみたいです。

vscode.Rangeインスタンスの生成

const editor = vscode.window.activeTextEditor;

var startPos = editor.document.positionAt(0);
var endPos = editor.document.positionAt(editor.document.getText().length-1);
var range = new vscode.Range(startPos, endPos);

Positionインスタンス生成時に渡す数値は、行・桁関係ない先頭からの文字数のようです。
Positionインスタンスで開始、終了位置を指定してRangeインスタンスを生成します。

vscode.window.activeTextEditor.setDecorations()の実行

editor.setDecorations(decorator, [range]);

これで色をつけることができます。第二引数はRange配列なので、1つだけの場合は[]で囲ってしまいます。

色のクリア

decorator.dispose();

createTextEditorDecorationType.dispose()で破棄したら色クリアできます。
破棄しない場合、色の指定は蓄積されます（半透明指定している場合はどんどん透明度がなくなっていきます）。

参考

TypescriptのVSCode用クラスはvscode namespaceにて定義されています。

宣伝

色付けを使用してVSCode拡張をつくってみました。
良ければソースを参考にしてください。
さらによければ、インストールして使っていただいて、issue/pull requestおねがいします。