少し昔の話なのでうろ覚えなところがありますが、ご容赦を。
対象者
- NuxtをTypeScript対応して、ちゃんと動いてるのにVSCodeくんがエラーを吐く現象に苦しめられている人
- かつ、その問題が明らかにパス周りの問題っぽい人
発端
Nuxt対応後、明らかにパス周りがうまく解決されていない？というエラーが多々発生するようになってしまった。
npm run devで起動してみるとちゃんと動いているのだが、何故かVSCodeは赤い警告を出してくる。
例えばmiddlewareを使おうとすると、変なエラーが出る。
Nuxt×TypeScriptでmiddlewareを使う あたりを試してみるも、うまくいかない。
そもそも、上記の記事の筆者さんのエラーの原因は
middlewareはVue標準でなくNuxt独自のプロパティである為、そのままjs→tsに変換してもうまく行かない
なのだけれど、少なくとも2020年7月現在、Nuxtは公式に対応しているように見える。
→公式による設定ファイルらしきもの
あと、
import MyComponent from '~/components/MyComponent.vue'
の部分でもエラーが出る。
import MyComponent from '../../components/MyComponent.vue'
のように相対パス指定にすると直る。
なんだこれ？
パスが悪いと言われてるけど動いてる、ってことはNuxtの問題じゃない。
ということはVSCodeの問題？
と考えて、こんなissueを見つけた。
……というか、正直なところどのissueを見て解決に至ったのかは覚えていない。
とりあえず、
Workspaceに複数フォルダを配置している場合、一番上のフォルダしかVeturは正しくパスを認識してくれない
という、おかしな現象が存在することは間違いないみたい。
※少なくともWindowsのVSCodeにて確認
おそらくこちらの記事で扱われてる現象も同様の理由によるものです。
VSCode の Vetur で types/vue-shim.d.ts が有効にならないのはワークスペースにフォルダが複数あるから
結論としては、フォルダは複数でも一番上に配置するとおそらく解決します。
まとめ
NuxtはTypeScript対応しているとはいえ色々罠がありますが、頑張りましょう。
ではまた。