(cache)vscode拡張機能「search with qiita」をつくってみました

search with qiita とは

vscode上で文字列を選択して検索するような機能の拡張機能をつくってみました。（非公式）

ここからダウンロードできます
https://marketplace.visualstudio.com/items?itemName=ITFhikary.search-with-qiita

開発途中にqiitaで検索する人はあまりいない？かもしれませんが、
初学者の自分は、よくQiitaから情報を得る機会が多かったのでTypescriptなどの練習の一環としてつくりました。

気になる点はissueなどで指摘していただけると、より良くなると思います。

ちなみに初投稿です。

技術的な内容

ソースコードはこちらにあげています
https://github.com/HikaruEgashira/search-with-qiita

基本的にオープンソースなソフトウェアなので他の人のソースコードを参考にある程度つくることが容易にできます。今回も主に３つの拡張機能を参考にしています。

開発の仕方は
「Visual Studio Code はじめての拡張機能開発」が分かりやすくまとめられています。

ちょっとしたコードの解説をします。(初学者向け)

ファイル名から言語を特定する

このvscodeには言語モードを取得するコードがないらしいので
この拡張機能ではファイル名から現在の使用言語を取得しています。

extension.ts

let editor = vscode.window.activeTextEditor;
if (!editor) {
    vscode.window.showWarningMessage('No active text editor found!');
    return;
}

let extIndex: number = editor.document.fileName.lastIndexOf('.');
let lang: string = extIndex >= 0 ? editor.document.fileName.substring(extIndex + 1) : '';

ピリオド「.」以降の文字列を取得しました、
configを利用して省略された文字(markdown => .mdなど)を変換しています。(下コード)

extention.ts

private static defaultDocs : object = {
        "py": "python",
        "js": "javascript",
        "ts": "typescript",
        "kt": "kotlin",
        "rb": "ruby",
        "htm": "html",
        "cpp": "c++",
        "md": "markdown"
    };

public static getLang(ext: string, customDocs?: object): String {

    let docs : any = this.defaultDocs;
    // 足りない場合を考慮して、設定で追加できるようにする
    if (customDocs) {
        Object.assign(docs, customDocs);
    }

    if (ext in docs) {
        return docs[ext];
    } else {
        return ext;
    }
}

画面右にWebページを表示させるコードは正直自分にも完璧な理解ができていないので、ソースコードを参照してください

まとめ

vscodeの拡張機能開発は、extension.ts, package.jsonからなる単純なつくりなので、案があれば自分でつくってみてもいいと思います。改めてオープンソースの素晴らしさを感じました。

今年プログラミングを始めた初心者なので言語の追加や改良案をいただけると勉強になるのでよろしくお願いします。