ソースコードから理解する技術-UnderSourceCode

手を動かす(プログラムを組む)ことで技術を理解するブログ

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」にコピーすることで動きました。

MacLinuxであれば「$HOME/.vscode/extensions」にコピーすれば動くようです。

※参考
Visual Studio Code の拡張機能を作ってみた - Qiita

packageを作り、WSLで動かしてみる

Visual Studio CodeWindows上で実行する際には、先に書いたようにプロジェクトフォルダをコピーすることで動かすことはできたのですが
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.jsonの「publisher」を定義

package.jsonの「publisher」項目を追加し、先のPublisherの登録時に使ったPublisher名を記載します。

packageの作成

以下を実行すると公開用ファイル(.vsix)が作成され、フルパスが表示されます。

$ npx vsce package
Extensionのインストール

Visual Studio CodeをWSLモードで起動し、 Extensionsパネルの右上の「...」より「Install from VSIX...」から、先に作成した公開用ファイル(.vsix)を読み込みます。