うしろのこの本ください

なんでもかきます

Vueのテンプレートの型補完をキーボードショートカットでトグルできるようにする

Vueを触っていてVSCodeを使っているユーザーはもれなくVeturという拡張機能を入れている。

marketplace.visualstudio.com

VeturはVueのオプション(methods, computedなど)の補完やスニペット、thisの型検査など開発に必要な機能の詰め合わせお得パックみたいなやつだが、長らくテンプレート内で型が検知できないという状態だった。

去年の夏頃にexperimentalという形でテンプレート内の式を型検査してくれる機能が入り、vscodeの設定からチェックを入れることで利用できるが、若干問題があって今まであんまりつかってなかった。

問題1 tsじゃないSFCを開くと真っ赤になる

問題1といったがこれしかない。

lang="ts"になっていないSFCファイルを開くと全体が警告に染まってしまいうざい。これのせいでいちいちチェックを付けたり外したりする羽目になっていたので、ちゃんとは使えていなかった。

f:id:apple19940820:20200612011114p:plain

キーボードショートカットでトグルできたらマシになるかな

方法としては

  1. Toggle(拡張)を入れる
  2. keybindings.jsonに設定を記述する

でできる。ただし、トグルするたびにファイルを開き直さなきゃいけないし、ファイルを開いた時に有効になっているかどうかがパッと見でわからない(テンプレでホバーすればわかる)のでまだ開発体験が良いとは言えない。

Toggle marketplace.visualstudio.com

ショートカットの設定サンプル gist.github.com

f:id:apple19940820:20200612012713g:plain

理想的にはこれだと思う

タイミング的にlang="ts"検知後に有効になっても開き直す必要ありそうなのがアレだけどうまいことできたらいいなと思ってそのうちissue投げる。

おわり