Vue Language Server から生まれた Volar.js と、それが秘める可能性

Vue Fes Japan 2023 で発表したスライドです。

発表概要:
.vue でエディタの補完機能などを効かせるために、Vue Language Server というツールがあります。実はこのコアは Volar.js という OSS に切り出されています。Volar.js は "あらゆる組み込み言語" のためのフレームワークであり、Vue.js 以外にも利用できる汎用性を備えています。このセッションでは Volar.js が一体どういうものなのか、そしてその汎用性がどのような可能性を秘めているのかについてお話します。

Transcript

1. Vue Language Server から 生まれた Volar.js と、 それが秘める可能性 id:mizdra 2023/10/28 Vue Fes Japan 2023 1
2. 自己紹介 • mizdra (みずどら) • 株式会社はてな ◦ Webアプリケーションエンジニア ◦ フロントエンドエキスパート (肩書) • Vue.js の経験 ◦ 趣味で1年くらい 2
3. 自己紹介 • mizdra (みずどら) • 株式会社はてな ◦ Webアプリケーションエンジニア ◦ フロントエンドエキスパート (肩書) • Vue.js の経験 ◦ 趣味で1年くらい (5年前の話) 3
4. 4 今日する話
5. 5 エディタの言語機能と Language Server Protocol
6. エディタにおける「言語機能」とは • コーディングを補助するエディタの機能のこと ◦ コード補完 (Completion) ◦ 定義元への移動 (Go to Definition) ◦ コンパイルエラーの表示 (Diagnostics) 6
7. 言語機能は色々ある 最近流行りの言語なら、どれもあるはず 7 Hover Info Rename Code Action Symbols Find References
8. 言語機能ってどうやって実装してるの? • いくつか実装方法はあるが... ◦ Language Server Protocol に則った方法が主流 • Language Server Protocol (LSP) ◦ 2016 年に Microsoft が発表 ◦ エディタに言語機能を実装するための標準仕様 8
9. LSP の基本コンセプト • 『Language Server Protocol の仕様 及び実装方法 (*2)』より ◦ • エディタとは別に Language Server (LS) がある ◦ これが言語機能を実装してる • エディタは LS を介し、ユーザに言語機能を提供 9 LSPの基礎コンセプトは、IDEがサポートしていた各機能(言語サービスと 呼ばれます)を標準化し、エディタ本体から分離するというものです。 *2: https://zenn.dev/mtshiba/books/language_server_protocol/viewer/02_introduction より引用
10. LSP による通信の様子 (ざっくり) 10
11. LSP に従ってさえいれば動く 11 JavaScript の LS は どの LSP 対応エディタでも動く LSP 対応エディタは どの LS 搭載言語も扱える
12. 12 Vue.js における Language Server
13. Vue.js における Language Server • Vue.js には .vue (Single File Component) がある ◦ 独自のファイルフォーマット • .vue 向けの言語機能を提供するために... ◦ Vue.js は独自の Language Server を持ってる 13
14. Vue.js における Language Server • Vue Language Features ◦ a.k.a. Volar ◦ 公式推奨 • 昔の公式推奨は Vetur ◦ お世話になってた人も多いはず • (アンケートタイム) 14
15. .vue の LS の実装はちょっと特殊 • <template> / <script> / <style> ◦ HTMLタグ、JavaScript、CSS が書ける ▪ 当然、HTML や JavaScript の言語機能を使いたい ◦ 3言語ぶんの言語機能の提供が必要 15
16. 似たようなファイルは他にも • 例: .html / .astro / .svelte • あるファイルの中に組み込まれている言語 ◦ 「Embedded (Programming) Language 」と呼ぶ ◦ 日本語で「組み込み言語」 16
17. 組み込み言語向けの LS • VS Code 公式サイトで LS の作り方が解説されてる ◦ https://code.visualstudio.com/api/language-extensi ons/embedded-languages ◦ 2つの実装アプローチを紹介 ▪ Language Services ▪ Request Forwarding 17
18. 組み込み言語向けの LS • VS Code 公式サイトで LS の作り方が解説されてる ◦ https://code.visualstudio.com/api/language-extensi ons/embedded-languages ◦ 2つの実装アプローチを紹介 ▪ Language Services ▪ Request Forwarding 18 Vue Language Server は こっち
19. Language Services アプローチとは • ファイルを組み込み言語ごとのブロックに分ける ◦ ブロックごとに、仮想的なファイルがあると見なす 19 foo.vue.html foo.vue.ts
20. Language Services アプローチとは • 仮想ファイルを各言語向けの「Service」で処理 ◦ Service: LS のコアを抽出したライブラリの俗称 ▪ 言語機能のロジックだけを提供するやつ。LSP は喋らない。 ▪ 例: vscode-html-languageservice, etc. 20 foo.vue.html -> HTML の Service で処理 foo.vue.ts -> TypeScript の Service で処理
21. 21 これで皆さんも Vue Language Features 作れるはず
22. 22 これで皆さんも Vue Language Server 作れるはず そんな訳ない
23. 23 いざ .vue の深淵へ
24. .vue の深淵 その1 24
25. .vue の深淵 その1 25
26. .vue の深淵 その1 26 JavaScript の式が書ける -> foo.vue.1.ts として TypeScript の Service で処理 <template> の中にも、 TypeScript の仮想ファイルが隠れてる
27. .vue の深淵 その2 27
28. .vue の深淵 その2 28 props やメソッドを参照可能 -> props などもコード補完したい
29. .vue の深淵 その2 29 props やメソッドを参照可能 -> props などもコード補完したい 仮想ファイル間のデータ共有が必要 ただし、実装の難易度は高い ただし定義元は、 下側の仮想ファイル
30. .vue の深淵 その他 30
31. .vue の深淵 その他 31 props 補完したいのだけど...
32. .vue の深淵 その他 32 props 補完したいのだけど... Command+Click で .vue 開きたいのだけど....
33. .vue の深淵 その他 33 props 補完したいのだけど... Command+Click で .vue 開きたいのだけど.... lang=”scss” にしたいのだけど...
34. 34 色々あるじゃん 😇
35. Vue.js コミュニティの努力 • 2016/11: Vetur 0.1 (initial release) • 2017/01: Scss/Less 対応 • 2017/03: v-* 属性の補完に対応 • 2018/01: import Foo from './Foo.vue' の自動挿入 • 2019/02: {{ … }} 内で props/methods の補完に対応 • 2019/04: {{ … }} 内の型チェック 35
36. さらなる高みへ • 2020: Vue Language Features (initial release) ◦ Vetur とは別実装の LS ▪ 型チェックのパフォーマンス改善 ▪ より多くの言語機能の対応 • 2023/02: Vue Language Features 1.0 ◦ Vue.js 公式の推奨に ◦ コアが Volar.js という OSS に切り出される 36
37. Volar.js • 組み込み言語のツールを作るためのフレームワーク • 少ないコードで、高機能・高品質の LS が作れる • コアチーム ◦ Johnson Chu 氏 (Volar.js 作者) ◦ Erika 氏 (Astro コアチームメンバー) 37
38. Volar.js の生まれた背景 • Vetur で直面した課題は... ◦ 「組み込み言語」に共通するもの ◦ Astro や Svelte でも困ってる • Vue.js は多大な努力で解決しつつあるが... ◦ 誰もがそれをできる訳ではない 38
39. Volar.js の生まれた背景 • Volar.js はその解決を手助けする • 面倒な作業を肩代わりしてくれる ◦ フレームワーク固有の、最小限のコードを書くだけ ◦ あとは Volar.js がやってくれる • そのおかげで... ◦ フレームワーク開発者: 重要なことだけに集中できる ◦ ユーザ: 豊富な言語機能が使える 39
40. 40 Demo
41. Demo • 実際に Volar.js で LS を作ってみよう！ ◦ https://github.com/mizdra/volar-demo • いくつか見せ場があるので、👏 お願いします 41
42. Volar.js のconfig を書いて... 42
43. .html1 の Language/VirtualFile を書いて... 43
44. .html1 のService を実装すると... 44
45. warning が出るように！ 45
46. CSS の言語機能も使える！ 46
47. Emmet の Service を登録すると... 47
48. Emmetが 使える！ 48
49. Volar.js (再掲) • 組み込み言語のツールを作るためのフレームワーク • 少ないコードで、高機能・高品質の LS が作れる 49
50. Volar.js (再掲) • 組み込み言語のツールを作るためのフレームワーク • 少ないコードで、高機能・高品質の LS が作れる 50
51. Volar.js (再掲) • 組み込み言語のツールを作るためのフレームワーク • 少ないコードで、高機能・高品質の LS が作れる 51 Language Server だけとは言ってない
52. 改めて Volar.js とは • 組み込み言語のツールを作るためのフレームワーク ◦ Language Server ◦ Checker ◦ Formatter ◦ … • 様々なツールを作れる 52
53. さっき作った Language や Service を @volar/kit に渡すと... 53
54. CLI Checker が完成！ 54
55. 55 Volar.js 活用事例
56. Volar.js 活用事例: Astro • Astro ◦ ◦ コード量の削減、だけじゃない ▪ いくつものバグが直り、新機能も付いてきた 56
57. Volar.js 活用事例: 社内フレームワーク • 社内フレームワーク (ByteDance) (*3) ◦ フレームワークで使う言語のツールを、Volar.js で実装 ◦ 1 人の開発者が 2 週間で！ 57 *3: https://blog.vuejs.org/posts/volar-a-new-beginning より
58. Volar.js 活用事例: typescript-plugin-asset • @mizdra/typescript-plugin-asset ◦ .ts からアセット (画像など) を import するのを補助 58 ② Enter で補完 & import文も自動挿入 ① コード補完で suggest されて...
59. Volar.js 活用事例: typescript-plugin-asset • TypeScript Language Service Plugin として実装 ◦ TypeScript の LS の挙動をカスタマイズする仕組み ▪ コード補完の候補を書き換えたり 59
60. Volar.js 活用事例: typescript-plugin-asset • .png に .ts が埋め込まれてると誤認させる ◦ • TypeScript の LS が、.png を .ts かのように扱うように ◦ コード補完に出してくれる 60
61. Volar.js 活用事例: typescript-plugin-asset • .png に .ts が埋め込まれてると誤認させる仕組み ◦ Volar.js を使ってる • こういう面白グッズも、Volar.js で作れる！ 61
62. 62 まとめ
63. まとめ • Volar.js は、Vue.js だけじゃない ◦ あらゆる組み込み言語のためのもの • 様々な言語ツールを作れる ◦ Language Server / Checker / Formatter / … • Astro などで導入が始まってる ◦ 組み込み言語全体の開発体験を変えつつある 63
64. まとめ • Vue.js 公式ブログ(*3)より (翻訳) ◦ Vue.js コミュニティ発の OSS が、 コミュニティを超えて影響していく 64 *3: https://blog.vuejs.org/posts/volar-a-new-beginning より Viteが Vue エコシステムから生まれ、最終的に Web 開発エコシステム全 体のユーザーを結びつける独自のコミュニティに成長したのと同様に、 Volar.js も同じ道をたどることを望んでいます。