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

更新:2018.2.14

目次

最近、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環境を作りましょう。

IT関係関連記事










これからブログなどのサイトを作りたいと思っている人は、お名前.comでのドメイン取得がオススメです。

■□━━ 急げ、ドメインは早い者勝ち! ━━□■
     ■お名前.com

アマゾンの2019年本屋大賞一覧

そして、バトンは渡された
ひと
ベルリンは晴れているか
熱帯
ある男

楽天市場のおすすめ商品一覧

お金2.0 新しい経済のルールと生き方 [ 佐藤航陽 ]
全部レンチン!やせるおかず 作りおき 時短、手間なし、失敗なし
「読む力」と「地頭力」がいっきに身につく 東大読書 [ 西岡 壱誠 ]