Vueのテンプレートの型補完をキーボードショートカットでトグルできるようにする
Vueを触っていてVSCodeを使っているユーザーはもれなくVeturという拡張機能を入れている。
VeturはVueのオプション（methods, computedなど）の補完やスニペット、thisの型検査など開発に必要な機能の詰め合わせお得パックみたいなやつだが、長らくテンプレート内で型が検知できないという状態だった。
去年の夏頃にexperimentalという形でテンプレート内の式を型検査してくれる機能が入り、vscodeの設定からチェックを入れることで利用できるが、若干問題があって今まであんまりつかってなかった。
問題1 tsじゃないSFCを開くと真っ赤になる
問題1といったがこれしかない。
lang="ts"になっていないSFCファイルを開くと全体が警告に染まってしまいうざい。これのせいでいちいちチェックを付けたり外したりする羽目になっていたので、ちゃんとは使えていなかった。
キーボードショートカットでトグルできたらマシになるかな
方法としては
- Toggle(拡張)を入れる
- keybindings.jsonに設定を記述する
でできる。ただし、トグルするたびにファイルを開き直さなきゃいけないし、ファイルを開いた時に有効になっているかどうかがパッと見でわからない（テンプレでホバーすればわかる）のでまだ開発体験が良いとは言えない。
Toggle marketplace.visualstudio.com
ショートカットの設定サンプル gist.github.com
理想的にはこれだと思う
切り替えめんどいからlang="ts"のときだけ自動で有効にしてほしい
— miyaoka / STUDIO (@miyaoka) 2020年6月11日
タイミング的にlang="ts"検知後に有効になっても開き直す必要ありそうなのがアレだけどうまいことできたらいいなと思ってそのうちissue投げる。
おわり