TypeScript コンパイラを活用した
Vue テンプレートの解析

Meguro.es # 22 @ メルカリ

1. Vetur をインストール

2. ✔ Template Interpolation Service

Template mode

Script mode

Style mode

Template mode

Script mode

Style mode

Interpolation mode

Template → TypeScript

TypeScript

Type Checker

[35, 42, message] <=> [268, 280, this.message]

HTML – TypeScript でソースマップ生成

Hover

Auto complete

Peek references

詳しい話は……

https://katashin.info/2019/04/28/261

https://blog.matsu.io/generic-vue-template-interpolation-language-features

Other Editors? CLI?

Vue Language Server

Vetur

VSCode

1. Vetur をインストール

2. ✔ Template Interpolation Service