vue.jsとtypescriptを用いてハイライトを行う単語を検索して指定をしたい

Question

私は、typescriptで特定の語を文ごとにハイライトするというプログラムを作成しています。
さらに私は、追加機能として、単語を検索して、ヒットしたものをハイライトするかしないかを
チェックボックスで選択しハイライトで表示もしくはハイライトを消す機能を作成しようとしています。

この追加機能は、vue.jsで作成しようと考えているのですが、どのようにvue.jsに
typescriptのプログラムを追加すれば良いか良く分かりません。
初心者なので、申し訳ありませんが教えて頂ければ幸いです。宜しくお願い致します。

'use strict';
import * as vscode from 'vscode';
import * as fs from 'fs';

export function activate(context: vscode.ExtensionContext) {
    console.log('Congratulations, your extension "semieditor" is now active!');
    const readsemiJson = JSON.parse(fs.readFileSync('C:\User\specification\src\sample.json','utf8'));

    // 特定の単語に色付け
    const strengthTimeWordList = readsemiJson.強時間;

    const strengthTimeWords: vscode.DecorationOptions[] = [];
    const dependencyRelationWords: vscode.DecorationOptions[] = [];

    //child -> parent(値域) semiについて
    function fromObjecttoRange(WordList: any,foundWordList: vscode.DecorationOptions[],dependencyRelationList: vscode.DecorationOptions[],Count: number){
        const activeEditor = vscode.window.activeTextEditor;
        const text = activeEditor.document.getText(); //ドキュメント取得

        // 取得したテキストを改行ごと(文章)に分割する
        var textArray = text.split(/\r\n|\r|\n/);

        if(WordList.length > 0){
            for(var i = 0; i < WordList.length; i++){
                const word = WordList[i].split('=>');
                const parentword = word[0];
                const rangeword = word[1];
                var offSet = 0;
                for(var j = 0; j < textArray.length; j++){
                    if(textArray[j] !== ''){
                        if(textArray[j].search(rangeword) !== -1 && textArray[j].search(parentword) !== -1){
                            const startPos = activeEditor.document.positionAt(offSet + textArray[j].search(rangeword));
                            const endPos = activeEditor.document.positionAt(offSet + textArray[j].search(rangeword) + rangeword.length);
                            const decoration = { range: new vscode.Range(startPos, endPos) };
                            foundWordList.push(decoration);

                            const related_startPos = activeEditor.document.positionAt(offSet + textArray[j].search(parentword));
                            const related_endPos = activeEditor.document.positionAt(offSet + textArray[j].search(parentword) + parentword.length);
                            const related_decoration = { range: new vscode.Range(related_startPos, related_endPos) };
                            dependencyRelationList.push(related_decoration);
                        }
                        if(textArray[j].search(rangeword) !== -1 && parentword === 'なし'){
                            const startPos = activeEditor.document.positionAt(offSet + textArray[j].search(rangeword));
                            const endPos = activeEditor.document.positionAt(offSet + textArray[j].search(rangeword) + rangeword.length);
                            const decoration = { range: new vscode.Range(startPos, endPos) };
                            foundWordList.push(decoration);
                        }
                    }
                    //改行の長さも加算している
                    offSet += textArray[j].length + 2;
                    Count++;
                }
            }
            return {foundWordList,dependencyRelationList,Count};
        }
    }

    //値域と修飾語をハイライト
    function decorateWord() {
        const activeEditor = vscode.window.activeTextEditor;

        //強時間
        fromObjecttoRange(strengthTimeWordList,strengthTimeWords,dependencyRelationWords,strengthtimeCount);

        activeEditor.setDecorations(strengthTimeMarkerDecoration,strengthTimeWords);
        activeEditor.setDecorations(dependencyRelation,dependencyRelationWords);
    }

    //ハイライトの削除
    function clearHighlight(){
        //強時間
        fromObjecttoRange(strengthTimeWordList,strengthTimeWords,dependencyRelationWords,strengthtimeCount);

        strengthTimeMarkerDecoration.dispose();
        dependencyRelation.dispose();

    }
    context.subscriptions.push(vscode.commands.registerCommand('extension.color', () => {
        vscode.window.showInformationMessage("Color Range Word");
        decorateWord();
    }));

    context.subscriptions.push(vscode.commands.registerCommand('extension.highlightOFF', () => {
        vscode.window.showInformationMessage("HighLight OFF");
        clearHighlight();
    }));

    //強時間に色付け
    const strengthTimeMarkerDecoration = vscode.window.createTextEditorDecorationType({
        'borderWidth': '1px',
        'borderRadius': '2px',
        'borderStyle': 'solid',
        'backgroundColor': 'rgba(128, 128, 0, 0.3)',
        'color':'orange'
    });

    //係り受けの対象を色付け
    const dependencyRelation = vscode.window.createTextEditorDecorationType({
        'borderWidth': '1px',
        'borderRadius': '2px',
        'borderStyle': 'solid',
        'backgroundColor': 'rgba(0, 255, 0, 0.3)',
        'color':'lightgreen'
    });
}

{
    "回数": [],
    "強数量修飾": [],
    "時数ノ": [],
    "未来句": [],
    "数量": [],
    "強時間": [
        "ドア入力右=>常時",
        "なし=>常時",
        "ドア入力I=>常時",
        "なし=>長時間",
        "扉閉め忘れ=>一定時間以上"
    ],
    "時間": []
}

// Home.vue

<template>
    <div class="home">
        <Button></Button>
        <input v-model="message" placeholder="" style = "position: absolute; left: 10px; top: 10px">
    </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import Button from "@/views/button.vue";

    @Component({
        components: {
            Button,
    },
    })
    export default class Home extends Vue {}
</script>

//button.vue
<template>
    <button style="position: absolute; left: 190px; top: 9px">検索</button>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";

    @Component
    export default class MyButton extends Vue{
    }
</script>

Comments

[KuwabataK]

ざっと読んだ感じ、TypeScriptのコードはvscodeのExtensionとして開発されているようですがあっているでしょうか？

まずはっきりさせておきたいのが、vscodeのExtensionとして開発されたものをVueでも流用したいということなのか(つまりブラウザ上で動かしたい)

vscodeのExtensionをVueで開発したいのか(つまりvscodeのExtensionを開発したい)、どちらなんでしょう？

[syen2501]

行いたいことは、vscodeのExtensionとして開発されたものに機能を追加したい。
追加するための方法としてvueを使ってフォームを作成しより使いやすい機能として実装するという感じです。
なので、ブラウザ上で動かす必要はありません。

[syen2501]

返信ありがとうございます。
例えば、typescript内で検索を行うコマンドを登録しておいて、vscode内でそのコマンドを実行した際に、
あらかじめhtml等で作成しておいたフォームを呼び出すようなことは可能なのでしょうか？
可能であれば、教えて頂ければ幸いです。宜しくお願い致します。

Answer 1

Vue.jsはブラウザ上で動作されることを前提に作られたフレームワークなので、私の知る限り、vscodeのExtension上では直接扱うことはできません。

一応公式サイトを見る限りでは、vscode上で、ビュワーとしてWebViewを動かすことはできるので、そこでならvueで作成したビルド後のjsファイルを動作させてフォームなどを表示させることはできるかもしれませんが、vscodeのAPIにはVue上から直接アクセスできないので、仮に検索フォームを作ったとしても、vscode上ではなんの動作もしない役に立たないフォームができるだけじゃないかなと思います。

一応、WebView側からvscode側にイベントを投げることはできるみたいなので、ここらへんのAPIを駆使すれば動作する検索フォームを作ることはできるかもしれませんが、かなり茨の道になることが予想されます。(というかフォームぐらいの簡単なものでよいのであれば、vueを使うよりも素のhtmlとJSを使ったほうが、vscodeには組み込みやすいと思います)

なのでvscodeのExtensionを作るということであれば、一旦Vueで作ることは諦めて、vscodeに用意された標準APIの範囲内でできるかどうかを検討してみてはどうでしょうか？

Comments

[syen2501]

返信ありがとうございます。
例えば、typescript内で検索を行うコマンドを登録しておいて、vscode内でそのコマンドを実行した際に、
あらかじめhtml等で作成しておいたフォームを呼び出すようなことは可能なのでしょうか？
可能であれば、教えて頂ければ幸いです。宜しくお願い致します。

[KuwabataK]

それはできると思います。ただ、WebViewは別タブで表示されてしまうので、その中でフォームを表示するような形になるかと思います。（テキストエディタの上にオーバーレイさせて表示させるようなことはできない）

詳しくは以下のリンクを見てください。

https://code.visualstudio.com/api/extension-guides/webview

多分以下のようなコードを書くことになると思います。(上記のリンクに完全なサンプルがあるので詳しくはそちらを見てください)

// web viewを呼び出し
const panel = vscode.window.createWebviewPanel(
'catCoding',
'Cat Coding',
vscode.ViewColumn.One,
{}
);

// webviewに表示したいhtmlを登録
panel.webview.html = `<!DOCTYPE html> .... (表示したいhtmlの内容) `;