VSCode用の拡張機能を作ってみた #1 (ファイル作成する拡張機能)

2022-06-14

はじめに

ブログを書き始めて１年ちょっと経ちました。当初はこのブログを育ててあわよくば不労所得を手に入れようと考えていましたが、実際かなり自由に書いてきたため収益面ではイマイチです。 AWSの管理費とGoogle Domainの値段を考えると±0か少し赤字という所です。

夢の不労所得に向けて立て直しのため、以下の改善を試してみようと考えております。

検索ワードを意識したキーワード選定
ブログ記事量産のためのテンプレート化
- VSCodeの拡張機能作成
- textlintによる校正機能の有効化

今回はこの中でも、VSCodeの拡張機能作成をやっていきます。

作成物の概要

ブログ記事自体ははMarkdownで書いています。 Markdownを書く際に、ファイル名を決めて日付を書いて管理しています。ゆくゆくは、Next.jsで作った自作ブログテンプレートに記事を載せていくためある程度ファイルの冒頭にタグを埋め込んで行きたいと考えてます。

タグはこのようなものを追加しています。

できればこの部分をファイル作成時に自動で埋め込んでおいてもらいたいと考えています。 VSCodeの拡張機能ですでに作っている方もいそうな気はしますが、気にせずやっていきます。

VSCodeの拡張作成

プロジェクトの作成

拡張機能を作成用にフォルダを作成して以下のコマンドを実行します。

npm -g install yo generator-code

上記コマンドが正常に実行できれば準備完了です。以下を入力して、作成していきます。

yo code

アスキーアートとともにどのExtensionを作るか選択肢がでます。

PS C:\src\VSCodeExtention> yo code

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y `

? What type of extension do you want to create? (Use arrow keys)
> New Extension (TypeScript)
  New Extension (JavaScript)
  New Color Theme
  New Language Support
  New Code Snippets
  New Keymap
  New Extension Pack
  New Language Pack (Localization)
  New Web Extension (TypeScript)
  New Notebook Renderer (TypeScript)

各プロジェクトに応じて設定するのが良いですが一例として私はこのようにしました。

? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? ArticleCreateSupporter
? What's the identifier of your extension? articlecreatesupporter
? What's the description of your extension? This extension support  New Blog Articles.
? Initialize a git repository? Yes
? Bundle the source code with webpack? Yes
? Which package manager to use? yarn

プロジェクトフォルダの作成作業が入り、VSCodeで開くかどうかが問われます。 Openとしましょう。

? Do you want to open the new folder with Visual Studio Code? Open with `code`

Hello Worldを動かしてみる

何事も挨拶から始めるのが良いです。

VSCodeから、src/extension.ts を開いて編集します。

export function activate(context: vscode.ExtensionContext) {

という関数の中に処理を書いていきます。この関数は拡張機能が有効なときに動作します。

src/extension.ts を開いている状態で、F5キーを実行する。「Extension Development Host」と記載されたVSCodeが立ち上がる。

ざっくりいうと、今作っている拡張機能を試せるVSCodeが起動した状態です。

Ctrl + Shift + Pでコマンドパレットを開いて、Hello と入力すると候補にサンプルのプロジェクトが出てくる。

実行すると、右下にこのような文字が出てくる

Debug Consoleには、extension.ts に埋め込んだログも表示されていることが確認できました。

動作確認は以上です。

InputBoxの作成

記事のファイル名を入力するため入力欄が出るようにします。

export async function activate(context: vscode.ExtensionContext) {

asyncをこの位置に追加しておきます。そしてshowInputBoxを使った構文を追加します。

const result = await vscode.window.showInputBox();
if (result) {
    vscode.window.showInformationMessage(`Got: ${result}`);
} else {
    vscode.window.showWarningMessage(`create cancel`);
}

実行するとInput画面が表示されて、入力結果がメッセージとして表示されます。

入力内容が取得できたことが確認できました。

入力した名前でファイルを作成する

先程入力したファイル名の.mdファイルを作成するときこのように書きました。

ファイル生成用の関数を一つ作成します。

function createFile(result: string): void {
    const wsedit = new vscode.WorkspaceEdit();
    if(vscode.workspace.workspaceFolders !== undefined) {
        let wf = vscode.workspace.workspaceFolders[0].uri.path ;
        let f = vscode.workspace.workspaceFolders[0].uri.fsPath ;

        const filePath = vscode.Uri.file(f +'/' +result +'.md');
        vscode.window.showInformationMessage(filePath.toString());
        wsedit.createFile(filePath, { ignoreIfExists: true });
        vscode.workspace.applyEdit(wsedit);
        vscode.window.showInformationMessage('Created a new file: hello/world.md');

    }
    else {
        const message = "YOUR-EXTENSION: Working folder not found, open a folder an try again" ;

        vscode.window.showErrorMessage(message);
    }
}

呼び出し元はこんな感じでどうでしょうか。

const result = await vscode.window.showInputBox();
if (result) {
    vscode.window.showInformationMessage(`Create ${result}.md `);
    createFile(result);

} else {
    vscode.window.showWarningMessage(`create cancel`);
}

ファイルを試しに作ってみた際にはこのような結果になります。すでに色々試しにファイルを作ってますが…

まとめ

チュートリアルとしてはまずマスですかね。まだまだやりたいことには程遠いですが、タスクに積んでおきましょう