VSCODE 拡張機能の作り方とマークダウンファイルの文字数カウント

記事内に商品プロモーションを含む場合があります。

2018.2.14 19 views

最近、VSCODE がとても気に入っています。

プログラムを書くときも、テキストを書くときにも利用しています。

ブログなどの記事を書くときには、文字数を意識しますので、文字数をカウントしてほしいのですが、ちょっと探してみた感じでは自力で作らないといけないようです。

※英語のワードカウントであれば、MS の github にあります。

仕方ないので、拡張機能の作り方を調べてみたら、割と簡単に作れそうでしたので、日本語想定の文字数をカウントする拡張機能を作ってみたいと思います。

自作の拡張機能を作るための準備

VSCODE の拡張機能を作るためには、「yo」「generator-code」というパッケージをインストールする必要があります。

これは、npm コマンドで簡単にインストールできますので、下記のコマンド実行するだけでです。

npm install -g yo generator-code

拡張機能開発のプロジェクトを作る

拡張機能を作るためのプロジェクトもコマンド 1 発で生成できるようになっていますので、下記のコマンドを任意のディレクトリで実行すれば完了です。

yo code

コマンドを実行すると、プロジェクトに関する情報を対話形式で聞いてきますので、任意の値を入力していけば、プロジェクトディレクトリが生成されます。

cd WordCount
code .

https://github.com/Microsoft/vscode-wordcount

修正するコード

英単語のカウントを行う関数がありますので、この部分を日本語の文字数カウントに修正します。

このコードは、HUGO のマークダウンファイルを想定して、+++で囲まれているフロントマターは文字数をカウントしないようにしています。

※これは好みで修正してください。

public _getWordCount(doc: TextDocument): number {
    let docContent = doc.getText();

    // Parse out unwanted whitespace so the split is accurate
    docContent = docContent.replace(/(< ([^>]+)<)/g, '').replace(/\s+/g, '');
    docContent = docContent.replace(/\r\n/, '').replace(/\s+/g, '');
    docContent = docContent.replace(/\+\+\+.*\+\+\+/, '').replace(/\s+/g, '');
    docContent = docContent.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
    let wordCount = 0;
    if (docContent != "") {
        wordCount = docContent.length;
    }

    return wordCount;
}

マークダウンだけでいい人は、必要ありませんが、テキストファイルなどほかのファイルでも文字数をカウントしたい場合は、下記のように、doc.languageId === “text"を追加すれば、文字数をカウントしたいファイルを増やしていけます。

この判定自体を消せば、すべてのファイルで文字数がカウントされるようになります。

if (doc.languageId === "markdown" || doc.languageId === "text") {
    let wordCount = this._getWordCount(doc);

    // Update the status bar
    this._statusBarItem.text = wordCount !== 1 ? `$(pencil) ${wordCount} 文字` : '$(pencil) 1 Word';
    this._statusBarItem.show();
} else {
    this._statusBarItem.hide();
}

packege.json ですが、activetionEvents のことろに*を入れるだけです。

こうすることで、ファイルを開いたときや、変更した時に文字数の再計算が実行されるので、便利です。

過剰に動作していると感じたら、コマンド実行した時にどうさせるなど限定的にすればいいと思います。

"activationEvents": [
    "*"
],

実際に使う

デバッガーで走らせるのは F5 を押せば動作しますが、実際の利用を想定して使用している VSCODE に今回作成した拡張機能をインストールしてみたいと思います。

そのためには、作成した ts ファイルから、VSIX ファイルを生成する必要があります。

VSIX ファイルを生成するためには vsce と言うパッケージを使用します。

下記のコマンドで、vsce をインストールすることができます。

npm install -g vsce

インストールが完了したら、実際に VSIX ファイルを生成するコマンドを実行します。

実行するためには、拡張機能を作成したディレクトリに移動して下記のコマンドを実行します。

vsce package

実行すると下記のようなエラーが発生することがあります。

拡張機能のプロジェクトを作成した際に、default で生成された README.md のままだとエラーが出るようです。

Error: Make sure to edit the README.md file before you publish your extension.

私の場合は、一度、README.md を削除して作り直してから実行するとコマンドが成功しました。

さらに、下記のようなエラーが出ました。

A 'repository' field is missing from the 'package.json' manifest file.
Do you want to continue? [y/N]

package.json にリポジトリに関する記述を行っていないの原因だと思います。

特に必要なければ、「y」を入力した後にエンターで VSIX ファイルが生成されます。

ここまでで、VSIX ファイルを作ることが出来ましたので、実際に VSCODE へインストールしてみたいと思います。

VSCODE を起動すると、サイドバーに拡張機能のアイコンがありますので、クリックします。

サイドバーの内容が展開されたら「・・・」のところをクリックして、VSIX からのインストールを選びます。

そうすると、ファイルを選択するダイアログが開きますので、先ほど作成した VSIX ファイルを指定して「インストール」をクリックします。

インストールが成功すると、「拡張機能が正常にインストールされました。有効にするには再起動します。」とメッセージが表示されるとともに、「今すぐ再度読み込む」ボタンが表示されますので、これをクリックします。

これで、作成した拡張機能のインストールが完了しました。

マークダウンファイルかテキストファイルを開くと、ステータスバーに「○○○○ 文字」と表示されるようになったと思います。

まとめ

ちょっと試せば、すぐに拡張機能が作れるようになると思います。

TypeScript は触ったことがないですが、JavaScript みたいなものなので、食わず嫌いなら必要最低限だけでもコードを書いて、快適な VSCODE 環境を作りましょう。