VS Code エクステンションで OUTPUT に文字列を出力する
このスクラップについて
このスクラップでは VS Code エクステンション開発で OUTPUT ビューに文字列を出力する方法を調べる過程を記録する。
過去のスクラップ
下記スクラップでは最初のエクステンションの作る過程を記録した。
何かつまづいたら振り返ってみよう。
公式ドキュメント
プロジェクト作成
cd ~/workspace
npx --package yo --package generator-code -- yo code
? What type of extension do you want to create? New Web Extension (TypeScript)
? What's the name of your extension? hello-output
? What's the identifier of your extension? hello-output
? What's the description of your extension?
? Initialize a git repository? Yes
? Which bundler to use? esbuild
? Which package manager to use? npm
VS Code for the Web でも試したいので Web Extension (TypeScript) を選んだ。
bundler としては esbuild を選んでみた。
早速エラーに遭遇
F5 で起動しようしたら下記のメッセージが表示された。
There are issues with task "npm: watch-web:esbuild". See the output for more details.
いきなり攻めすぎた?
Web エクステンションと esbuild のどちらかだけにしてみよう。
esbuild だけにしてみる
ダメだった。
Web エクステンションはバンドルが必須のようだ
普通のエクステンションでは unbundled みたいな選択肢を選ぶことができる。
Webpack なら普通に起動した
これで続けられる。
リロードで反映されない
Command + R を押しても変更が反映されない。
前のスクラップでは反映されたようだが Webpack を使っているからだろうか?
されないものは仕方がないので都度再起動しよう。
コーディング
import * as vscode from "vscode";
export function activate(context: vscode.ExtensionContext) {
const outputChannel = vscode.window.createOutputChannel("My Extension");
const disposable = vscode.commands.registerCommand(
"hello-output.helloWorld",
() => {
outputChannel.appendLine("Hello form My Extension!");
outputChannel.show();
}
);
context.subscriptions.push(disposable);
}
export function deactivate() {}
動作確認
無事に表示された。
createOutputChannel について
VS Code for the Web で確認したい
まずはリポジトリを作成してみよう。
gh repo create --public hello-output
git add .
git commit -m "最初のコミットです"
git push origin main
作成したリポジトリはこちら。
テストするには 3 つの方法があるようだ
2 つ目の方法である @vscode/test-web を使ってみよう。
npx @vscode/test-web --extensionDevelopmentPath=.
VS Code for the Web のウィンドウが起動した
OUTPUT に出力することもできた
3 つ目の方法も試してみる
brew install mkcerts
mkdir -p $HOME/certs
cd $HOME/certs
mkcert -install
mkcert localhost
証明書の中身を確認してみる。
openssl x509 -in localhost.pem -text -noout
Certificate:
Data:
Version: 3 (0x2)
Serial Number:
60:e2:f3:4a:7d:8c:6c:a0:47:7c:34:6d:76:48:1d:58
Signature Algorithm: sha256WithRSAEncryption
Issuer: O=mkcert development CA, OU=susukida@TatsuyanoiMac.local (Tatsuya Susukida), CN=mkcert susukida@TatsuyanoiMac.local (Tatsuya Susukida)
Validity
Not Before: Nov 15 07:36:13 2024 GMT
Not After : Feb 15 07:36:13 2027 GMT
Subject: O=mkcert development certificate, OU=susukida@TatsuyanoiMac.local (Tatsuya Susukida)
Subject Public Key Info:
Public Key Algorithm: rsaEncryption
Public-Key: (2048 bit)
Modulus:
00:c3:bf:8a:e0:3a:ea:01:95:09:e4:4d:dc:5d:66:
2a:1e:69:71:fb:3b:82:55:25:d1:40:8b:16:52:76:
8c:bd:6c:fb:f2:4d:1a:77:fd:ab:c6:20:ff:db:63:
83:19:a8:9c:72:3f:23:a3:6c:a7:31:15:00:92:49:
27:6d:be:09:88:ef:b2:86:9c:93:44:69:7d:25:d5:
78:ef:49:1d:54:f7:7b:f4:f2:c4:34:31:84:d2:20:
e7:e0:84:56:5f:e5:16:f2:7c:65:55:ea:ce:fe:e0:
4a:a4:3f:80:81:a5:78:fa:d6:89:d0:0b:de:d6:d9:
af:42:c6:b9:10:23:d0:ef:6d:48:cc:0b:1b:82:f0:
13:68:aa:13:3b:a1:db:bf:2c:a7:92:07:ad:c6:f1:
af:4a:7f:87:c5:01:5b:02:01:af:e8:0b:71:c7:4d:
30:aa:8d:77:36:f8:c3:4f:b2:a6:be:fc:69:de:e5:
e6:a0:01:88:49:1d:9d:34:a8:05:4a:2a:66:5c:7c:
de:47:88:9b:1a:1c:ec:7d:06:91:f8:d8:ec:5c:c1:
91:f1:9d:da:46:1a:03:e0:af:ab:a5:82:93:30:ef:
b5:9e:5b:d7:c0:b4:d6:43:d4:8c:1f:36:23:d2:97:
24:47:34:9a:42:86:ed:ee:cd:ac:10:b2:5a:df:fe:
ea:f3
Exponent: 65537 (0x10001)
X509v3 extensions:
X509v3 Key Usage: critical
Digital Signature, Key Encipherment
X509v3 Extended Key Usage:
TLS Web Server Authentication
X509v3 Authority Key Identifier:
B4:2F:F8:76:D8:F3:5D:BD:C5:FB:5B:6E:35:E8:8F:07:01:5F:7F:1E
X509v3 Subject Alternative Name:
DNS:localhost
Signature Algorithm: sha256WithRSAEncryption
Signature Value:
3b:c5:fc:43:a6:29:81:c0:05:98:82:0c:e8:c5:23:a7:0d:a6:
4a:82:05:6b:3f:5f:98:e0:11:c0:81:4e:5a:3a:3b:44:13:c0:
0a:e8:92:1a:7a:69:b2:84:a1:f0:98:e3:6b:f4:de:25:bd:b5:
53:3b:2c:6e:6a:16:b4:5e:18:58:ca:b7:ea:b6:44:24:fc:a9:
1d:82:eb:22:c9:dc:d2:72:67:c3:5c:e2:3e:39:32:d7:e2:8b:
b4:80:71:32:4b:36:91:f1:85:77:9d:57:6f:2d:fc:74:7d:de:
48:21:8d:59:de:f5:2f:d3:e8:17:97:48:3b:6b:98:1c:d5:40:
3e:ba:4f:7c:f7:0b:52:c0:cb:a6:56:d4:b0:11:5f:8d:c0:20:
23:9b:e9:c1:71:52:b4:a0:19:12:4c:53:90:a9:ff:fb:e8:2a:
3f:13:65:95:5a:ed:66:65:82:4d:3c:cc:b3:78:1e:33:94:6e:
5b:41:04:7b:74:aa:eb:ce:bc:85:89:59:d0:85:c1:f4:12:8a:
c4:eb:96:7f:bf:8f:26:12:99:9c:0b:e5:04:b7:d5:a1:27:8d:
81:a8:b9:bd:b9:31:56:bc:fc:b0:5a:b6:5c:88:fa:bf:b7:22:
9f:34:74:54:71:4f:20:3e:d2:12:ad:e2:c1:4c:8d:3b:f9:ce:
d2:fb:b0:02:77:1c:66:2c:f4:1d:ba:db:a0:e3:f1:17:79:c9:
a5:54:2f:e3:b0:94:bc:41:c3:30:a8:be:17:c1:53:e9:9d:de:
12:2d:16:b5:70:86:b1:a8:a7:fb:5f:d6:54:cd:45:48:f2:90:
11:1a:c2:66:25:15:16:12:96:6d:75:d9:02:c2:31:36:43:8c:
dc:fd:5b:b1:cd:99:04:5d:22:e3:4c:eb:7f:8d:2d:79:68:92:
8e:c2:a5:f8:e2:7a:b4:ed:27:4e:ba:12:b1:b5:8b:bc:66:b6:
6f:6c:74:02:8c:a7:94:6f:70:7e:68:36:6c:e3:3a:b9:17:5d:
94:c1:77:ca:ba:a2
npx serve --cors -l 8000 --ssl-cert $HOME/certs/localhost.pem --ssl-key $HOME/certs/localhost-key.pem
5000 が使用中だったので 8000 にした、ちなみに 6000 にしたらダメだった。
VS Code for the Web で Developer: Install Extension From Location...
を実行して Location には https://localhost:8000
を指定する。
無事にインストールされたようだ
Hello World も OUTPUT に表示された
順調に完了して良かった
次は Web API にアクセスする方法を試してみたい。
スクラップだけ作っておこう。