vscode拡張機能作成 逆引き辞典

vscode拡張機能作成　逆引き

vscode拡張機能を作るとき、やりたいことごとに何をすればいいかを記載しています。
随時更新予定。

プロジェクト作成

こちらを参照。(vscodeで自作のシンタックスハイライト・スニペット拡張機能を作る)

独自言語の単語ハイライト実装

こちらを参照。(vscodeで自作のシンタックスハイライト・スニペット拡張機能を作る)

スニペットの実装

こちらを参照。(vscodeで自作のシンタックスハイライト・スニペット拡張機能を作る)

extension.jsに書くやつ

超簡単な流れ

1. package.jsonに追記。
2. extension.js(packga.jsonに設定したエントリポイント)のactivate関数に、追加したい機能が入ったクラスや関数を読み込ませる
3. deactive関数を作成。undefinedをreturnさせる。
4. クラス内に、vscode APIで用意されてるイベント関数を実装して内部に作成したい機能を実装する。

コマンドパレットの実装

ctrl shift P で出てくるコマンドパレットの実装方法です。

はじめに、package.jsonに以下を記入。

package.json

   "contributes": {
        "commands":[
            {
                "command":"COMMAND_NAME",
                "title":"print [l][r]"
            }
        ],
    }

commandにはユニークな名前を入れてください。
titleには、実際にコマンドパレット上で入力する名前を入れてください。

extension.js

function FUNCTION_NAME(){
    //ここに実装したい処理
}

function activate(context){
    context.subscriptions.push(vscode.commands.registerCommand('COMMAND_NAME', FUNCTION_NAME));//package.jsonのcommandと同じもの、任意の関数。
}

function deactivate(){
    return undefined;
}

ショートカットキーの実装

事前にコマンドを作成しておく必要があります。
コマンドを追加したら、package.jsonに以下を追記。

package.json

   "contributes": {
        "commands":[
            {
                "command":"COMMAND_NAME",
                "title":"print [l][r]"
            }
        ],
        "keybindings":[
            {
                "command":"COMMAND_NAME",
                "key": "shift+enter",
                "when": "editorLangId == python"
            },
        ]       
    }

command:commandsで指定したものと同じ値を入れる
key:指定したキーを押下でコマンドを実行できるようにする。macやwin専用のキーについては、「"mac":command+p」などで指定する。
when:特定の条件のときにのみショートカットを実行できるようにする。この場合は.pyファイルを開いている場合のみにショートカットが実行できる。

keyなどについては以下も参照。
https://code.visualstudio.com/docs/getstarted/keybindings

アウトラインビューへの項目表示

provideDocumentSymbols関数内処理を作成します。
戻り値でvscode.DocumentSymbolクラスの配列を返します。
引数に入れた値で諸々変わるのでAPI要確認。

extension.js

const MODE = { scheme: 'file', language: 'LANGUAGE_NAME' };

class OutlineProvider{

    //vsode APIに存在する関数
    async provideDocumentSymbols(document, token){
        let symbols = [];
        for (let i = 0; i < document.lineCount; i++) {
            let line = document.lineAt(i);//i行目のドキュメントを取得

            //"ABC"から始まるならアウトラインビューに表示
            if(line.text.startsWith("ABC")){
                let symbol = new vscode.DocumentSymbol(line.text, 'Component', vscode.SymbolKind.Function, line.range, line.range);
                symbols.push(symbol);
            }
        }
        return symbols;
    }
}


function activate(context){
    context.subscriptions.push(vscode.languages.registerDocumentSymbolProvider(TYRANO_MODE, new OutlineProvider()));
}
function deactivate(){
    return undefined;
}

ツールチップの実装

マウスオンするとぱっとでるやつです。
provideHover関数に書いていけばOKです。

extension.js

const MODE = { scheme: 'file', language: 'LANGUAGE_NAME' };


class TagHoverProvider{

    //空行でないなら「ABC」と表示
    async provideHover(document, position, token){
        regExp = /\S/;
        let wordRange = document.getWordRangeAtPosition(position, regExp);
        if (!wordRange) {
            return Promise.reject("no word here"); //指定文字がなかった時。引数で与えられた理由でPromiseオブジェクトを返却
        }
        let text = new vscode.MarkdownString("ABC");
        if(!text){
            return Promise.reject("unmatched."); //指定文字がなかった時。引数で与えられた理由でPromiseオブジェクトを返却
        }
        return new vscode.Hover(text);//解決したPromiseオブジェクトを返却。この場合、現在の文字列を返却 
    }
}


function activate(context){
    context.subscriptions.push(vscode.languages.registerHoverProvider(TYRANO_MODE, new TagHoverProvider()));
}
function deactivate(){
    return undefined;
}

その他

APIはここがおすすめです。
https://vshaxe.github.io/vscode-extern/