TypeScript
VSCode
VisualStudioCode

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

More than 1 year has passed since last update.


簡単に


  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)'
}
});

lightdarkの中にそれぞれスタイルを指定すると、テーマのligth、darkによってスタイルを変えることができるみたいです。(light、darkの判断基準は未調査)。

ひとまず文字色・背景色を指定していますが、インスタンス生成時に渡せる属性はたくさんあるみたいです。

https://code.visualstudio.com/Docs/extensionAPI/vscode-api#DecorationRenderOptions


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つだけの場合は[]で囲ってしまいます。

https://code.visualstudio.com/Docs/extensionAPI/vscode-api#_a-nametexteditoraspan-classcodeitem-id295texteditorspan


色のクリア

decorator.dispose();

createTextEditorDecorationType.dispose()で破棄したら色クリアできます。

破棄しない場合、色の指定は蓄積されます(半透明指定している場合はどんどん透明度がなくなっていきます)。


参考

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

https://code.visualstudio.com/Docs/extensionAPI/vscode-api


宣伝

色付けを使用してVSCode拡張をつくってみました。

良ければソースを参考にしてください。

さらによければ、インストールして使っていただいて、issue/pull requestおねがいします。

https://github.com/kojisaiki/evilinspector

https://marketplace.visualstudio.com/items?itemName=saikou9901.evilinspector