Closed17

VS Code エクステンションで OUTPUT に文字列を出力する

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

このスクラップについて

このスクラップでは VS Code エクステンション開発で OUTPUT ビューに文字列を出力する方法を調べる過程を記録する。

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

プロジェクト作成

コマンド
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 を選んでみた。

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

早速エラーに遭遇

F5 で起動しようしたら下記のメッセージが表示された。

There are issues with task "npm: watch-web:esbuild". See the output for more details.

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

Web エクステンションはバンドルが必須のようだ

普通のエクステンションでは unbundled みたいな選択肢を選ぶことができる。

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

リロードで反映されない

Command + R を押しても変更が反映されない。

前のスクラップでは反映されたようだが Webpack を使っているからだろうか?

されないものは仕方がないので都度再起動しよう。

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

コーディング

src/web/extension.ts
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() {}
薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

3 つ目の方法も試してみる

コマンド
brew install mkcerts
mkdir -p $HOME/certs
cd $HOME/certs
mkcert -install
mkcert localhost

証明書の中身を確認してみる。

コマンド
openssl x509 -in localhost.pem -text -noout
localhost.pem
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 に表示された

このスクラップは9日前にクローズされました