Visual Studio Codeで編集中のタブに入力されている文字数をカウントする［拡張機能］を自作してみようとチュートリアルを参考に行った手順を備忘録的に投稿します。
下準備
VSCodeでは、拡張機能を開発する際に［Node.js］をインストールする必要があります。
コマンドプロンプトやターミナルの画面で次のコマンドを入力してインストールされているか確認できます。
node -vエラー画面が表示されたら［Node.js］ホームページからダウンロードしてインストールを行います。
［Node.js］インストール後に、次のコマンドを入力して［拡張機能］向けのプロジェクトが作成するための［Yeoman Generator］を追加します。
npm install -g yo generator-codeここまでの作業で［拡張機能］の開発を進めるための準備ができました。
プロジェクトの作成
VSCodeの機能拡張は［TypeScript］や［JavaScript］などで作成する前提になっています。最初にテンプレートになるプロジェクトを作成します。
機能拡張で作成するプロジェクト作成については別記事をご覧ください。
ステータスバーに文字を表示する機能拡張
作成したプロジェクトを編集してステータスバーに文字を表示する機能拡張を作成していきます。
具体的には次の手順で行います。
1.［package.json］を編集して［activationEvents］を追加します。（太字の部分）
{
"name": "charcount",
"displayName": "charcount",
"description": "",
"version": "0.0.1",
"engines": {
"vscode": "^1.106.1"
},
"categories": [
"Other"
],
"activationEvents": [
"onStartupFinished"
],
"main": "./out/extension.js",
"scripts": {
"vscode:prepublish": "npm run compile",
"compile": "tsc -p ./",
"watch": "tsc -watch -p ./",
"pretest": "npm run compile && npm run lint",
"lint": "eslint src",
"test": "vscode-test"
},
"devDependencies": {
"@types/vscode": "^1.106.1",
"@types/mocha": "^10.0.10",
"@types/node": "22.x",
"typescript-eslint": "^8.48.1",
"eslint": "^9.39.1",
"typescript": "^5.9.3",
"@vscode/test-cli": "^0.0.12",
"@vscode/test-electron": "^2.5.2"
}
}2.［extension.ts］ファイルを編集します。
import * as vscode from 'vscode';
let statusBarItem: vscode.StatusBarItem;
export function activate({ subscriptions }: vscode.ExtensionContext) {
statusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
statusBarItem.text = 'Hello World!';
statusBarItem.show();
}
export function deactivate() {}3. 実行すると別画面で表示されたVSCodeのステータスバーに［Hello World!］が表示されます。
ここまでの作業で、ステータスバーに任意の文字を表示する拡張機能が出来上がりました。
文字数をカウントする処理の追加
作成した機能拡張に編集中のタブ内の文字数を取得する処理を追加していきます。
具体的には次の手順で行います。
1.［extension.ts］を修正します。
import * as vscode from 'vscode';
let statusBarItem: vscode.StatusBarItem;
export function activate({ subscriptions }: vscode.ExtensionContext) {
statusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
statusBarItem.color = '#00ff00';
subscriptions.push(vscode.workspace.onDidChangeTextDocument(updateStatusBarItem));
subscriptions.push(vscode.window.onDidChangeActiveTextEditor(updateStatusBarItem));
updateStatusBarItem();
}
function updateStatusBarItem(): void {
const n = getNumberOfChar(vscode.window.activeTextEditor);
if (n === 0) {
statusBarItem.hide();
return;
}
statusBarItem.text = `$(megaphone) ${n} char(s)`;
statusBarItem.show();
}
function getNumberOfChar(editor: vscode.TextEditor | undefined): number {
if (!editor) {
return 0;
}
return editor.document.getText().length;
}
export function deactivate() {}2. 実行すると編集中のタブ内の文字数がステータスバーに表示されます。
まとめ
Visual Studio Codeで編集中のタブに入力されている文字数をカウントする［拡張機能］を自作する手順を紹介しました。
［Node.js］などインストールされていない場合には下準備が必要ですが、TypeScriptやJavaScriptなどを利用して、ステータスバーに独自機能を追加する開発が可能です。
VSCodeで独自の拡張機能を作成したい人の参考になれば幸いです。
スポンサーリンク
最後までご覧いただき、ありがとうございます。