ドローイング空間

3D-CADを中心に、雑多なことをかいています。

Windoes10上のVisual Studio Codeで、Extensionと呼ばれる拡張を作成する

広告

Visual Studio Code は、インテリセンスと呼ばれる強力な入力支援機能が利用できる汎用テキストエディタです。 そのVisual Studio Codeで、Extensionと呼ばれる拡張を作成します。 マクロと考えていいと思います。 今回は、初歩の初歩、Hello World Extensionをドキュメントに従い作成することが目的です。

 

多くのWindowsアプリケーションで利用できるVBAとは異なり、面倒な下準備がいろいろあります。

Visual Studio Codeのドキュメントは、英語で提供されています。 英語のまま提供されているのは、Microsoftの日本の人員がかなり削減されているのでしょうか?少し考えてしまいます。 世界的に見るとMicrosoftの日本の市場価値は、あまりないのかもしれません。 それは、それとして、周辺知識が貧弱だと英語のまま理解できないので、日本語に翻訳します。

webdesign.vdlz.xyz

ドキュメントに従い操作していきたいと思います。

Visual Studio Codeは、Windowsだけでなく、MacOSXLinuxでも利用できる、汎用エディタです。 マクロの作成環境は、C#VBAも使えません。そして、Microsoftのアプリケーションとは思えないほど不親切です。

Visual Studio CodeをInstallする

webdesign.vdlz.xyz

Yeomanジェネレーターをインストールする

これは、既にインストールしています

Visual Studio Codeで、拡張を作成するために、YeomanとVS Code拡張ジェネレーターをインストールします。 以前インストールした際の記録があります。

kukekko.hatenablog.com

node.jsをインストールする。

前提条件に、「あなたの$PATHに、インストールされ、そして、利用できるnode.jsが必要です。」とあります。

Visual Studio Code単独で使えないの?mode.jsとは何?と既に、理解できないのですが、めげずに進めようと思います。

mode.jsは、Javaスクリプトに関連する何かのようです。 わたしのパソコンに、インストールされているか、いないかすらよくわからないので、インストールすることにします。

Visual Studio Codeでエクステンションを使用するために、node.jsのインストールを行います。

ダウンロード先

Node.js

nodeページのキャプチャ

状況が全くわからないので、「ほとんどのユーザーに推奨」とある「v4.4.5 LTS」をダウンロードします。

ファイルを保存します。インストーラー型式です。

node-v4.4. 5-x64.msiをファイルに保存

実行します。

保存されたnode-v4.4. 5-x64.msiを実行

既にインストールされているようです。Yeomanジェネレーターと一緒にインストールされたのかもしれません。

すでにインストールされていました。

コマンドプロンプトから、yoジェネレーターを起動します。

Windows10の場合、スタートメニューで右クリックして、コマンドプロンプトを起動します。 Visual Studio Code上で実行するツールで無いことに、注意が必要です。

コマンドプロンプトを起動します。

yo codeと入力し、リターンキーを押します。

yo codeと入力し、リターンキーを押します。

黄色のメッセージが気になりますが、yoジェネレーターが起動します。

黄色のメッセージは、利用状況のデータ収集のお願いのようです。

 

メッセージ

We're constantly looking for ways to make yo better!

May me anonymously report usage statistics to improve the tool over time?

 

和訳

私たちは、常に、より優れたyoを作成するための方法を探しています!

私に、匿名で、ゆっくり時間をかけてツールを改善するために、使用状況の統計を伝えていただけませんか?

 

Extensionの作成のためには、TypeScriptとJavaScriptが使えます。 TypeScriptは、JavaScriptに型指定の概念を取り入れたもので、入力時にエラーチェックが可能になっているそうです。 私は、TypeScriptもJavaScriptもプログラミングしたことがないので、 よりツールによる開発支援が期待できる、TypeScriptを選択することにします。

すでに、New Extension(TypeScript)が、選択された状態になっているので、エンターキーを押します。

yoジェネレーターのメニュー画面です。黄色のメッセージは、利用状況のデータ収集のお願いです。

Extensionの名前が聞かれます。「myFirstExtension」と入力します。 コピー&ペーストは使えないので、キーボードから入力します。

Extensionの名前が聞かれます。「myFirstExtension」と入力します。 コピー&ペーストは使えないので、キーボードから入力します。

識別名を尋ねられますので、「Hello World」と入力します。

識別名を尋ねられますので、「Hello World」と入力します。

Hello World」は、無効な名前のようです。間にスペースが存在するのがいけないのでしょうか。

「Hello World」は、無効な名前のようです。間にスペースが存在するのがいけないのでしょうか。

入力値の例は、こちらにありました。

unokun.hatenablog.jp

www.atmarkit.co.jp

helloと入力します。

helloと入力します。

説明の入力を求められますので「Show Hello world」と入力します。

説明の入力を求められますので「Show Hello world」と入力します。

発行者の入力を求められますので、「kukekko」と入力します。

発行者の入力を求められますので、「kukekko」と入力します。

Gitリポジトリを初期化するかどうか尋ねられますので、「n」を入力します。※私は、Gitリポジトリを所有していません。

Gitリポジトリを初期化するかどうか尋ねられますので、「n」を入力します。

何かの作業が行われます。

何かの作業が行われます。

しばらくすると終了します。これで、Extensionの雛形がどこかに作成されたはずです。コマンドプロンプトを閉じます。

C:\User\[UserName]\hello

※[UserName]は、アカウント名です。

しばらくすると終了します。

Visual Studio Codeを起動します。

Windowsでは、Visual Studio Codeの設定ファイルは、迷惑ですが管理領域に存在するので、管理者として実行していないと変更が反映されません。 Extensionの場合は、どういった挙動をするのかわかりませんが、無用なトラブルを避けるために、「管理者として実行」します。

Visual Studio Codeを管理者として実行する

先ほど作成したExtensionの雛形のフォルダを開きます。

C:\User\[UserName]\hello

※[UserName]は、アカウント名です。

フォルダを開きます。

フォルダーを開いた状態です。

フォルダーが開きました。

F5を押しビルドます。実行するとエラーが発生します。何が起こっているのかわかりません。

実行するとエラーが発生します。

launch.jsonの内容が、Visual Studio Codeのバージョンアップの影響で、ドキュメントが作成された時点の内容とは、異なっているようです。


// A launch configuration that compiles the extension and then opens it inside a new window
{
	"version": "0.1.0",
	"configurations": [
		{
			"name": "Launch Extension",
			"type": "extensionHost",
			"request": "launch",
			"runtimeExecutable": "${execPath}",
			"args": ["--extensionDevelopmentPath=${workspaceRoot}" ],
			"stopOnEntry": false,
			"sourceMaps": true,
			"outDir": "out/src",
			"preLaunchTask": "npm"
		},
		{
			"name": "Launch Tests",
			"type": "extensionHost",
			"request": "launch",
			"runtimeExecutable": "${execPath}",
			"args": ["--extensionDevelopmentPath=${workspaceRoot}", 
				"--extensionTestsPath=${workspaceRoot}/out/test" ],
			"stopOnEntry": false,
			"sourceMaps": true,
			"outDir": "out/test",
			"preLaunchTask": "npm"
		}
	]
}

再び、F5を押して、エラー表示を取得した後、詳細表示を選択します。 Webページがブラウザで表示されるので内容を読みます。 ディレクトリの指定方法がバージョンアップの途中で変更され、自動修正が実装されていないようです。 yoジェネレーターをバージョンアップすると対応している可能性があるので、試したほうが良さそうです。 しかし、ここでは、紹介されたWebページの内容を参考に修正することにします。

「一般的なエラーの事例 20002, 20003」を参考に、

webdesign.vdlz.xyz

2箇所ある「"outDir": "out/test"」を「"outDir": "${workspaceRoot}/out/test"」に変更します。 直接修正しても、検索置換で置換しても良いと思います。

デバッグコンソール枠が表示され、もう1つ、Visual Studio Codeのウインドウが開きます。

デバッグコンソール枠が表示され、もう1つ、Visual Studio Codeのウインドウが開きます。

新しく開いた方のVisual Studio Codeのウインドウで、Ctrl+Shift+PあるいはF1を押し、コマンドパレットを表示します。 そして、hを入力するとリストに、「Hello World」コマンドが表示されるので、そのままEnterをクリックします。

新しく開いた方のVisual Studio Codeのウインドウで、Ctrl+Shift+PあるいはF1を押し、コマンドパレットを表示します。そして、hを入力するとリストに、「Hello World」コマンドが表示されるので、そのままEnterをクリックします。

情報ボックスに、「Hello World!」と表示されます。やっと、初めのExtensionが実行できました。

情報ボックスに、「Hello World!」と表示されます。

Extensionの内容

Extensionの内容を確認していきます。

拡張マニフェスト:package.json

Ctrl+Shift+PあるいはF1を押し表示されるコマンドパレットのリストに表示された「Hello World」のテキストは、package.jsonで定義します。


{
	"name": "hello",
	"displayName": "myFirstExtention",
	"description": "Show Hello world",
	"version": "0.0.1",
	"publisher": "kukekko",
	"engines": {
		"vscode": "^0.10.1"
	},
	"categories": [
		"Other"
	],
	"activationEvents": [
		"onCommand:extension.sayHello"
	],
	"main": "./out/src/extension",
	"contributes": {
		"commands": [{
			"command": "extension.sayHello",
			"title": "Hello World"
		}]
	},
	"scripts": {
		"vscode:prepublish": "node ./node_modules/vscode/bin/compile",
		"compile": "node ./node_modules/vscode/bin/compile -watch -p ./"
	},
	"devDependencies": {
		"typescript": "^1.6.2",
		"vscode": "0.10.x"
	}
}

確認するために、「"title": "Hello World"」を「"title": "Hello kukekko"」に変更して保存した後、F5を押し、実行してみます。 リストに表示される項目が「Hello kukekko」になりました。 実行結果は、先ほどと同じで、情報ボックスに、「Hello World!」と表示されます。元に戻しておきます。

リストに表示される項目が「Hello kukekko」になりました。

実行されるコード:extension.ts

実行されるコードは、srcフォルダ内のextension.tsに記述されています。


// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
//モジュールvscodeには、VS Codeの拡張APIが含まれています。
//モジュールをインポートし、以下のあなたのコードで、別名のvscodeで、それを参照します。
import * as vscode from 'vscode'; 

// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
//あなたの拡張がアクティブ化されるとき、このメソッドは、呼び出されます。
//あなたの拡張は、コマンドが実行されると極めて迅速に、アクティブ化されます。
export function activate(context: vscode.ExtensionContext) {

	// Use the console to output diagnostic information (console.log) and errors (console.error)
	// This line of code will only be executed once when your extension is activated
	//診断情報(console.log)とエラー(console.error)を出力するために、コンソールを使用します。
//あなたの拡張が、アクティブになると、この命令行だけが実行されます。
console.log('Congratulations, your extension "hello" is now active!'); 

	// The command has been defined in the package.json file
	// Now provide the implementation of the command with  registerCommand
	// The commandId parameter must match the command field in package.json
//コマンドは、package.jsonファイルで定義されています。
// 現在、registerCommandで、コマンドの実装を提供します。
// コマンドIDパラメータは、package.jsonで、コマンド領域と一致する必要があります。
	var disposable = vscode.commands.registerCommand('extension.sayHello', () => {
		// The code you place here will be executed every time your command is executed
// あなたのコマンドが実行されるたび、あなたが、ここに配置するコードが、実行されます

		// Display a message box to the user
// ユーザーに、メッセージボックスを表示します
		vscode.window.showInformationMessage('Hello World!');
	});
	
	context.subscriptions.push(disposable);
}

// this method is called when your extension is deactivated
// あなたの拡張が、アクティブ化されるとき、このメソッドが、呼び出されます。
export function deactivate() {
}

コードのしたの方の「vscode.window.showInformationMessage('Hello World!');」の「Hello World!」部分を変更すると、 メッセージボックスに表示される文字列を変更できます。

実行時の動作

ドキュメントの中には、作成したExtensionがどのように動作するかの説明があります。

  • 拡張開発インスタンスは、拡張を発見し、そのpackage.jsonファイルを読み込みます。
  • 後で、F1を押したとき:
  • 登録されたコマンドは、Command Paletteで表示されます。
  • 現在、このリストの中に、package.json内で定義されるエントリ「Hello world」があります。
  • Hello world」コマンドを選択するとき:
  • 「extension.sayHello」コマンドが呼び出されます:
    • アクティブ化されたイベント「onCommand:extension.sayHello」が、作成されます。
    • それらのactivationEvents内の、このアクティブ化イベントのすべての一覧にされている拡張は、アクティブ化されます。
      • /out/src/extension.jsのファイルは、JavaScript VMで読み込まれます。
      • VS Codeは、エクスポートされたアクティベートしている関数を探して、それを呼び出します。
      • コマンド「extension.sayHello」は、登録され、そして、その実装は、現在、定義されます。
  • コマンド「extension.sayHello」で実装された関数が、呼び出されます。
  • コマンドの実装は、「Hello World」メッセージを表示します。

まとめ

以上、yoジェネレーターで、自動作成されたExtentionの雛形を実行しただけですが、 多くのWindowsアプリケーションで利用できるVBAとは異なり、面倒な下準備がいろいろあることが理解できたと思います。 これで、Extentionの雛形が作成できたので、Extentionを使う第一歩を踏み出すことができました。