はじめに
次世代デジタル基盤開発事業部のIです。客先でのWeb開発や設計をメインとして携わっております。 現在の現場は若手が多いことから、担当業務の他に今までの経験を活かした開発の効率化で開発コストを抑えるための方策を施しています。
今回の記事では、Visual Studio Code(以下、「VSCode」)での変換作業を自動化するために、拡張機能コードの雛形を作ってみた話です。 変換内容はわかるけど、必要な準備が…という方のために、変換コードの雛形を使ってロジック実装に注力しやすくなり、結果的にコストを抑えることができるのではと想定しております。 短めの内容ですが、ちょっとしたことに役立つのではと思い、記事にいたしましたので、ぜひご参照ください。
※本記事では拡張の作り方や、詳細な環境構築は本筋ではありませんので、非常に簡潔な構築説明のみとなっております！
- はじめに
- 開発環境
- 簡潔な拡張開発環境の構築
- package.json の書き換え
- まとめ
- おまけ・vscode.commands.executeCommand 関数のコマンドIDを取得するTips
- テコテックの採用活動について
開発環境
当方が開発に使用した環境は以下です。
- OS: Ubuntu(Windows 11Pro x64 の WSL2 上で動作)*1
- 言語環境: Node.js v22(WSL2上のUbuntuにインストールしたもの)
- 開発言語: TypeScript
- エディタ: Visual Studio Code
- WSL2上のUbuntuにリモート接続できるようにしておいてください
- 必要な拡張(Ubuntu側で事前にインストールをお願いします)
- ESLint
- Extension Test Runner
- 他、TypeScript開発に必要な拡張
簡潔な拡張開発環境の構築
それでは、拡張開発に必要な準備を簡潔に解説いたします。
npm パッケージのインストール
まず、VSCode拡張の開発に必要なパッケージをインストールします。
ここでは、プロジェクト雛形生成ツールのYEOMAN(yo)と、YEOMANで使用するVSCode拡張開発用プロジェクトジェネレータ・generator-codeをインストールします。
WSL2上のUbuntuのターミナルを開き、以下のコマンドを入力します。
npm install -g yo generator-code
エラー無く完了したら、次に進みます。
拡張開発プロジェクトの作成
続いて、同じターミナルで VSCode 拡張のプロジェクトを作ります。
作成には、先程インストールした yo を使用します。
適当なディレクトリで以下のコマンドを実行します。
npx yo code
すると、yoのウェルカムメッセージが表示され、各種設定を問い合わせてきます。
(node:125640) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
_-----_ ╭──────────────────────────╮
| | │ 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? (拡張名。「拡張機能」ペインで表示される名称) ? What's the identifier of your extension? (拡張ID。ケバブケースで記入) ? What's the description of your extension? (説明。未入力で問題なし) ? Initialize a git repository? Yes (Gitで管理する必要がなければ No でも問題なし) ? Which bundler to use? unbundled (webpackにしてもいいが、 とりあえず unbundled で) ? Which package manager to use? npm
今回は、例として以下のように入力します。
? What type of extension do you want to create? New Extension (TypeScript) ? What's the name of your extension? マイ変換 ? What's the identifier of your extension? my-henkan ? What's the description of your extension? (未入力) ? Initialize a git repository? No ? Which bundler to use? unbundled ? Which package manager to use? npm
問い合わせが終了すると、問い合わせ内容に応じたプロジェクトのディレクトリ( 今回の例では my-henkan ディレクトリ)やファイルを作成します。
最後に、VSCodeを開くかどう聞かれますので、 Open with ‘code‘ を選択すると、VSCodeが立ち上がり、プロジェクトのディレクトリを開きます。*2
これで、プロジェクト作成は完了です。
package.json の書き換え
では、必要な修正をはじめていきます。まずは package.json です。
package.json の中で、修正に最低限必要なところは contributes.commands の部分です。
command 欄の内容が、いわゆる「コマンドID」として機能します。
例えば、vscode.commands.executeCommand 関数の引数として使えます。
初期状態では、helloWorld というコマンド名が指定されています。
"contributes": {
"commands": [
{
"command": "(拡張ID).helloWorld",
"title": "HelloWorld"
}
]
},
今回の例ではこうなっています。
"contributes": {
"commands": [
{
"command": "my-henkan.helloWorld",
"title": "Hello World"
}
]
},
ここで、command と title を編集します。
※ (コマンド名)はキャメルケースで記載する必要があります！ ※ (コマンドタイトル)が、コマンドパレットに表示される文言です。コマンドを検索する際の対象となります
"contributes": {
"commands": [
{
"command": "(拡張ID).(コマンド名)",
"title": "(コマンドタイトル)"
}
]
},
今回の例では、コマンド名として henkanText 、コマンドタイトルとして マイテキスト変換 とします。
"contributes": {
"commands": [
{
"command": "my-henkan.henkanText",
"title": "マイテキスト変換"
}
]
},
これで、package.json 側の対応は完了です。
雛形の適応
さて、ここで本題となる雛形の登場です。
import * as vscode from 'vscode';
const EXT_ID = '(拡張ID)';
const COMMAND_NAME = '(コマンド名)';
const splitToLines = (text: string): string[] =>
text
.trimEnd()
.replace(/[\n\r]+/g, '\n')
.split('\n');
const process = (text: string): string => {
// ここに変換処理を実装する
// ここでは例として、エディタのテキストの先頭行と最終行に文字列を追加する処理を実装
const newText = ['===先頭行にこれがあれば成功===', ...splitToLines(text), '===最終行にこれがあれば成功==='].join('\n');
return newText;
};
export function activate(context: vscode.ExtensionContext) {
console.log(`${EXT_ID}のアクティベートに成功しました`);
const disposable = vscode.commands.registerCommand(`${EXT_ID}.${COMMAND_NAME}`, () => {
const editor = vscode.window.activeTextEditor;
if (editor === undefined) {
console.error('アクティブなエディタがありません');
return;
}
const document = editor.document;
// エディタの全てのテキストを取得
const text = document.getText();
const firstPosition = new vscode.Position(0, 0);
// 最終行の位置を超えているが、VSCodeではファイルの終端位置という認識になるので問題なし
const lastPosition = new vscode.Position(document.lineCount, 0);
// 全ての範囲を作成
const allSelection = new vscode.Selection(firstPosition, lastPosition);
// テキストファイルの内容を変換
const processed = process(text);
editor.edit((edit) => {
// テキストファイルの内容を変換した内容に置き換え
edit.replace(allSelection, processed);
});
console.log('complete!');
});
context.subscriptions.push(disposable);
}
export function deactivate() {}
上記の雛形を以下の手順で利用します。
src/extension.tsの内容を、上記の雛形に置き換えますEXT_NAMEとCOMMAND_NAMEをpackage.jsonに記載した名称に変更します
今回の例での実装は以下のようになります。
const EXT_ID = 'my-henkan'; const COMMAND_NAME = 'henkanText';
実装が終わったら動作確認を行います。
動作確認
動作確認は F5 キーを押すだけです。*3
すると、デバッグ用のVSCodeが立ち上がります。
続いて、起動したウインドウでテキストファイルを一つ開き(保存する必要はありません)、適当な内容を入力します。
Ctrl+Shift+P キーを押して、検索ウインドウに(コマンドタイトル)を入力すると、検索候補にそのコマンドが表示されます。
最後に、このコマンドを選択して、以下の画像通りになれば問題なく拡張が構築されています。
ロジックの実装や.vsixファイルの作成
拡張として動作が完了すれば、あとは変換ロジックを実装してパッケージ化するだけです。 ただ、これらの内容については本筋ではないので割愛いたします。
パッケージ作成方法については、ググったり、AIに尋ねれば情報はすぐに見つかると思います。
まとめ
かなり駆け足な説明になってしまいましたが、VSCodeの拡張開発は思っていたほどハードルが高くないと気づかれたはずです。
特に、ちょっとした変換がほしいけど見つからない…と思って結局手作業で進めるのは大変もったいないです！
TypeScript(JavaScriptでもOK)の知識がございましたら、是非ともこのひな形を活用して、思い通りの整形や変換に役立てていただけたら幸せです。
おまけ・vscode.commands.executeCommand 関数のコマンドIDを取得するTips
VSCodeの拡張を利用する際、vscode.commands.executeCommand 関数を扱う際、引数として渡す命令IDがどこにあるのかわからず、時間を食う場合があると思います。
今回の拡張では使用していませんが、便利技ということで共有いたします。
VSCodeのエディタの「ファイル」ー「ユーザー設定」に「キーボードショートカット」アイテムがありますので、それをクリックしてキーボードショートカットパネルを表示します。
このパネルの使いたいショートカットの行を右クリックして表示されるポップアップメニューに「コマンドIDのコピー」というアイテムがありますので、これをクリックすると、クリップボードにコマンドIDがコピーされます。
あとは、エディタのvscode.commands.executeCommand 関数の引数として、IDをペーストするだけで完了です。
テコテックの採用活動について
テコテックでは新卒採用、中途採用共に積極的に募集をしています。
採用サイトにて会社の雰囲気や福利厚生、募集内容をご確認いただけます。
ご興味を持っていただけましたら是非ご覧ください。
tecotec.co.jp
