TSKaigi サイドイベント - Deno で VSCode 拡張機能を作る際の4つの壁 - 2025.05.29
0.9K Views
May 29, 25
スライド概要
Webエンジニアをやってます。
関連スライド
Meta XR SDK(V66-74)でQuestアプリを開発
あうぜん
1M
各ページのテキスト
TSKaigi サイドイベント Deno で VSCode 拡張機能を作る際の4つの壁 2025.05.29, Thu. Akasaka Kouki | koukibuu3
⾃⼰紹介 経歴 SES企業でWebエンジニアとして7年勤務。 前職では、ほぼPHPを書いていた元PHPer 2025年5⽉に any に⼊社しました 🙌 TSKaigi にも CfP 送っていましたが、今⽇は 違うテーマで話します。 Akasaka Kouki @ koukibuu3 / こうきぶー 出⾝ 墨⽥区 趣味 コーヒー、DIY、ゲーム実況 ©any, inc. All rights reserved. 2
⽬次 ❏ VSCode 拡張機能について ❏ 何を作りたかったか ❏ Deno で VSCode 拡張機能を作るということ ❏ 壁① ~ ④ ❏ まとめ ©any, inc. All rights reserved. 3
VSCode 拡張機能について ©any, inc. All rights reserved. 4
VSCode 拡張機能について VSCode Marketplace からインストールできる。 ● Code Spell Checker ● Gitlens ‒ Git supercharged ● ESLint ● Deno ● etc, ... ©any, inc. All rights reserved. 5
VSCode 拡張機能について 最低限必要なもの ● package.json ○ 実⾏ファイルのパスや提供するコマンドや機能の⼀覧など ● extension.js （ファイル名はなんでも可） ○ 実⾏ファイルの本体 Visual Studio Code | Your First Extension https://code.visualstudio.com/api/get-started/your-first-extension ©any, inc. All rights reserved. 6
VSCode 拡張機能について なんだ、Deno でいけるじゃん ©any, inc. All rights reserved. 7
VSCode 拡張機能について （ちなみに）私の Deno の経験 ● Deno x Flesh で⼩さなAPIサーバーを個⼈作成 ● Deno 2.0 のときに変更点を少し素振り ©any, inc. All rights reserved. 8
VSCode 拡張機能について ✕ ほぼ素⼈ 初⾒ ©any, inc. All rights reserved. 9
なにが作りたかったか ©any, inc. All rights reserved. 10
©any, inc. All rights reserved. 11
©any, inc. All rights reserved. 12
何を作りたかったか TSDoc をサポートする拡張機能を作ったら役に⽴つんじゃないか。 ©any, inc. All rights reserved. 13
何を作りたかったか TSDoc を解析してなんやかんやしたい ● ファイル内の TSDoc を⼀覧表⽰ ● ファイル内の TSDoc 記述率、スコアの表⽰ ● TSDoc が書かれていない関数を検出して記述をスマートに補助 ● コンテキストを把握してAIで TSDoc を提案、評価 ● etc, ... ©any, inc. All rights reserved. 14
何を作りたかったか できたもの ©any, inc. All rights reserved. 15
Deno で VSCode 拡張機能を作るということ ©any, inc. All rights reserved. 16
Deno で VSCode 拡張機能を作るということ Deno VSCode 拡張機能 ESM（ES module） CJS（Common JS） ※ VSCode 1.77 以降では限定的だが ESMサポート モジュールシステムの違いをどう乗り越えるか ©any, inc. All rights reserved. 17
Deno で VSCode 拡張機能を作るということ 壁① ESM にビルドして VSCode 拡張機能として動かす 壁② CJS にビルドして VSCode 拡張機能として動かす 壁③ ts-morph を使⽤したコードをビルドして動かす 壁④ Deno API を使⽤したコードをビルドして動かす ©any, inc. All rights reserved. 18
! ポイント --extensionDevelopmentPath、outFiles にビルド済みの本体と package.json を 配置する。⌘ + Shift+P >「デバッグを実⾏」で拡張機能をデバッグする。 ©any, inc. All rights reserved. 19
©any, inc. All rights reserved. 20
壁① ESM にビルドして VSCode 拡張機能として動かす ©any, inc. All rights reserved. 21
壁① ESM にビルドして VSCode 拡張機能として動かす VSCode 1.77 以降では ESM 形式がサポートされている。 じゃあ ESM でビルドすればいいじゃん。 ©any, inc. All rights reserved. 22
! ポイント ● ● denoPlugins を指定することで Deno 互換の import ルールを解決できる。 import * as vscode from "vscode"; は解決できないため external に指定する。 ©any, inc. All rights reserved. 23
! ポイント ● ● ● main に実⾏ファイルのパスを指定。 type に module を指定。 contributes に機能として登録したいものを記載する。 ○ Extension Guides | Visual Studio Code Extension API を参照 ©any, inc. All rights reserved. 24
壁① ESM にビルドして VSCode 拡張機能として動かす ©any, inc. All rights reserved. 25
Deno で VSCode 拡張機能を作るということ OK 壁① ESM にビルドして VSCode 拡張機能として動かす 壁② CJS にビルドして VSCode 拡張機能として動かす 壁③ ts-morph を使⽤したコードをビルドして動かす 壁④ Deno API を使⽤したコードをビルドして動かす ©any, inc. All rights reserved. 26
壁② CJS にビルドして VSCode 拡張機能として動かす ©any, inc. All rights reserved. 27
! ポイント ● format には "cjs" を指定する。 ©any, inc. All rights reserved. 28
! ポイント ● type の module 指定を削除。 ©any, inc. All rights reserved. 29
壁② CJS にビルドして VSCode 拡張機能として動かす ©any, inc. All rights reserved. 30
Deno で VSCode 拡張機能を作るということ OK 壁① ESM にビルドして VSCode 拡張機能として動かす OK 壁② CJS にビルドして VSCode 拡張機能として動かす 壁③ ts-morph を使⽤したコードをビルドして動かす 壁④ Deno API を使⽤したコードをビルドして動かす ©any, inc. All rights reserved. 31
壁③ ts-morph を使用したコードをビルドして動かす ©any, inc. All rights reserved. 32
壁③ ts-morph を使⽤したコードをビルドして動かす TypeScript ファイルの内容を⾒て、解析を⾏いたい。 ⽅法1: ts-morph を使ってコード解析を⾏う。 抽象構⽂⽊（AST）操作が直感的に⾏える。 ⽅法2: TypeScript Compiler API を使う。 抽象構⽂⽊（AST）に対する深ぼった知識が必要。 柔軟性は⾼いが利⽤する上でのハードルも⾼い。 ©any, inc. All rights reserved. 33
壁③ ts-morph を使⽤したコードをビルドして動かす TypeScript ファイルの内容を⾒て、解析を⾏いたい。 ⽅法1: ts-morph を使ってコード解析を⾏う。 抽象構⽂⽊（AST）操作が直感的に⾏える。 ⽅法2: TypeScript Compiler API を使う。 抽象構⽂⽊（AST）に対する深ぼった知識が必要。 柔軟性は⾼いが利⽤する上でのハードルも⾼い。 ©any, inc. All rights reserved. 34
©any, inc. All rights reserved. 35
壁③ ts-morph を使⽤したコードをビルドして動かす ESM ビルドの場合 ©any, inc. All rights reserved. 36
壁③ ts-morph を使⽤したコードをビルドして動かす ts-morph は ESM/CJS 対応のはずだが、CJSベースのモジュールのためか、 require("fs") のような CJS 形式の記述が ts-morph 内に残っている。 そのため、 ESM にビルドした VSCode 拡張だと ts-morph は動かない ©any, inc. All rights reserved. 37
壁③ ts-morph を使⽤したコードをビルドして動かす CJS ビルドの場合 ©any, inc. All rights reserved. 38
壁③ ts-morph を使⽤したコードをビルドして動かす ts-morph は ESM/CJS 対応のはずだが、CJSベースのモジュールのためか、 require("fs") のような CJS 形式の記述が ts-morph 内に残っている。 そのため、 CJS にビルドした VSCode 拡張であれば ts-morph は動く ©any, inc. All rights reserved. 39
Deno で VSCode 拡張機能を作るということ OK 壁① ESM にビルドして VSCode 拡張機能として動かす OK 壁② CJS にビルドして VSCode 拡張機能として動かす 壁③ ts-morph を使⽤したコードをビルドして動かす 壁④ Deno API を使⽤したコードをビルドして動かす ギリ OK ©any, inc. All rights reserved. 40
壁④ Deno API を使用したコードをビルドして動かす ©any, inc. All rights reserved. 41
壁④ Deno API を使⽤したコードをビルドして動かす Deno API とは Deno.readTextFile("./example.txt") Deno.mkdir とか とか、Deno グローバルで⽣えているAPI であり、 Denoランタイム限定で動く。 VSCode 拡張機能は Node.js 実⾏環境で実⾏されるのでムリ ©any, inc. All rights reserved. 42
©any, inc. All rights reserved. 43
©any, inc. All rights reserved. 44
壁④
Deno API を使⽤したコードをビルドして動かす
Deno の URL import
import { Project } from "https://deno.land/x/[email protected]/mod.ts";
のように URL import で取得する Deno ⽤の ts-morph は別物のため、
esbuild を⽤いたビルド時にパス解決を⾏うことができない
©any, inc. All rights reserved.
45
まとめ ©any, inc. All rights reserved. 46
まとめ OK 壁① ESM にビルドして VSCode 拡張機能として動かす OK 壁② CJS にビルドして VSCode 拡張機能として動かす OK 壁③ ts-morph を使⽤したコードをビルドして動かす NG 壁④ Deno API を使⽤したコードをビルドして動かす ギリ ©any, inc. All rights reserved. 47
まとめ ● Deno で拡張機能の処理を書く場合、CJS にビルドする必要がある ※対応モジュールを選ばず、限定的なサポートであればESMでも可 ● URL import や JSR のモジュール、Deno API 等、Deno "らしい" 機能は特に使えない。 ● ESM/CJS のモジュールシステム間のしっかりとした理解が必要。 Deno で VSCode 拡張を書くメリットはほとんど無い ※ 2025/5 現在の状況です。 ©any, inc. All rights reserved. 48
まとめ ● VSCode の拡張機能⾃体は、⾮常に簡単に作成できることが分かった。 ○ ○ 公式ドキュメントが⾮常にしっかりしている。 https://code.visualstudio.com/api/get-started/your-first-extension ● ts-morph は AST に深い造詣がなくても利⽤できてとても良い。 ● Deno で TypeScript を書き始めるための設定が何も要らないのが良い。 ● ESM only / CJS ベースのモジュールなど、理解が深まった。 ● TSDoc を解析する拡張機能⾃体の可能性は感じた。 ©any, inc. All rights reserved. 49
©any, inc. All rights reserved. 50
ありがとうございました。 https://x.com/koukibuu3 Engineer Culture Deck https://github.com/koukibuu3 https://speakerdeck.com/any_tech/ engineer-culture-deck-v3-dot-0 ©any, inc. All rights reserved. 51