Visual Studio CodeのExtensionを作り、ローカルのWSLで実行する
Visual Studio Codeの拡張機能(Extension)を作り、ローカルで実行してみました。
手順については公式や様々なサイトに書かれていますが、自分がやったことを纏めておきます。
やったこと
- Extensionをローカルで作成する
- ローカルで動かしてみる(Windows)
- packageを作り、WSLで動かしてみる
Extensionをローカルで作成する
こちらは公式のチュートリアル通りに雛形をつくり、任意の機能を追加しました。
Your First Extension | Visual Studio Code Extension API
ただ「generator-code」はグローバル領域ではなくローカルにインストールしたので、いくつかコマンドが異なりました。
インストール
$ npm install yo generator-code
プロジェクト作成
$ npx yo code
ローカルで動かしてみる(Windows)
私はWindowsで開発したのですが、ローカルで動かす場合は作成したプロジェクトのフォルダ毎
「%USERPROFILE%.vscode\extensions」にコピーすることで動きました。
packageを作り、WSLで動かしてみる
Visual Studio CodeをWindows上で実行する際には、先に書いたようにプロジェクトフォルダをコピーすることで動かすことはできたのですが
WSL上で動かすにはフォルダのコピーでは出来ませんでした。。。
「vsce」というVisual Studio Code Extensions のコマンドラインツールを使い、公開用のファイル(.vsix)を作り、Visual Studio CodeのWSLモードでExtensionsとしてインストールする必要があります。
以下、簡単な作業の流れとなります。
Azure DevOpsにアカウントを作り「Personal Access Token」を取得する。
Create a new organization, project collection - Azure DevOps | Microsoft Docs
Publishing Extensions | Visual Studio Code Extension API
この辺りを参考に行う必要があります。注意点としては「Personal Access Token」の「Organization」を「All accessible organizations」とする必要があります。
(これをしないと次の「$ npx vsce create-publisher」で401エラーなどになります)
vsceのインストール
これもグローバル領域ではなくローカルにインストールします。
$ npm install vsce
$ npx vsce --version
packageを作り、インストール
vsceを使いpackageを作ります。package作成時に作られる公開用ファイル(.vsix)をVisual Studio CodeのExtensionとしてインストールし、WSL上で使ってみます。
Publisherの登録
Extensionを公開しなくても必要なようです。
$ npx vsce create-publisher YOUR_PUBLISHER_NAME
packageの作成
以下を実行すると公開用ファイル(.vsix)が作成され、フルパスが表示されます。
$ npx vsce package
Extensionのインストール
Visual Studio CodeをWSLモードで起動し、 Extensionsパネルの右上の「...」より「Install from VSIX...」から、先に作成した公開用ファイル(.vsix)を読み込みます。