技術とかの雑なToday I Learnedメモ

そういえばVolarを導入した

そういえばVolarを導入した

やろうやろうと思ってやっていなかったVetur => Volarへの移行をやった。

johnsoncodehk/volar: ⚡ Explore high-performance tooling for Vue

volar/extensions/vscode-vue-language-features at master · johnsoncodehk/volar

volar/extensions/vscode-typescript-vue-plugin at master · johnsoncodehk/volar

上記の2つのExtensionsをインストールして、Veturを無効にした。

そうすると以下のエラーがめっちゃ出る

インターフェイス 'JSX.IntrinsicElements' が存在しないため、暗黙的に JSX 要素の型は 'any' になります。ts(7026)

[Q&A] NuxtのvueファイルでJSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. が表示される - Qiita

これを読んでIssueを見てみた。

JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists · Issue #732 · johnsoncodehk/volar

これで解決。

まだVue2なのでVue2のオプションをつけるか悩み、つけなくても動いたのでつけなかった。が、v-modelなpropsが子コンポーネント側でmodelValueになるなどの変更について静的解析で怒られてしまったのでvueCompilerOptiosでVue1の指定をしたほうがよいかもしれない。

templateで型の違うpropsを渡しているところが怒られたりして良い。

と思ったらバグりまくっていて、Issueが出ていた。

Error "Cannot use JSX unless the '--jsx' flag is provided" in all SFC since 0.34.0 · Issue #1153 · johnsoncodehk/volar

v0.34.0から↑のエラー出まくってて、仕方なくv0.33.10をバージョン指定でインストールして乗り切っていた。

が、もう解決してるっぽい。