TL; DR

Vetur を動作させたいフォルダをワークスペースの先頭に移動させると良い。

本文

Vetur は Visual Studio Code 用の、Vue プロジェクトのための拡張機能だ。これは Vue コンポーネントのためのシンタックスハイライティングやフォーマッティング、Linting などを行ってくれて便利だ。しかし、複数のルートフォルダを持つプロジェクトでは、期待する設定ファイルを読み込まず、上記の機能が正しく動作しないことがある。

以下に例を示す。

上記の画像では、個人的に作っているプロジェクトのビューの一つだが、@/... で始まるパスが VSCode 上で解決されておらず、エラーが出ている。さらにこのために関連するモジュールについて効かなくなっている。参照されるべき tsconfig.json には

    "paths": {
      "@/*": [
        "src/*"
      ]
    },

の記述があり、@は web/src と見なされるようになっているにもかかわらずだ。当然ながら、VSCode 上での問題のみで、tsc によるコンパイルは正常に行われる。

この問題を解決するには、作業したいフォルダーをワークスペース上でドラッグして先頭に持ってくれば良い。そうすれば以下のように、インポート時のパスは正しく解決され、エラーは消え補完が出来るようになる。

以上のように、Vetur は先頭のルートフォルダ内に置かれている設定ファイルを優先して読み込むため、作業したいルートフォルダを先頭に持ってくることで、上に挙げた問題を回避できる。Vue のプロジェクトを同時に複数個編集するケースではめんどくさいかもしれないが、僕の場合に限ってはこの運用で解決できて満足している。

この問題は Vetur の Issue #424 で議論されており、ここからリンクされている Issue #423 内のコメント で今回説明した回避策を見つけることができた。スレッドでは、他にも tsconfig.json 自体を変更して解決する方法が言及されているが、これはあくまで VSCode 上だけで発生する問題なので、プロジェクトを変更せずに解決できるこの方法が適していると思う。

ここから明白なように、Vetur が複数のルートフォルダに対応していないことがこの問題の根本的な原因であり、Issue #424 の解決が待たれる。なんと（本稿執筆時点で）昨日、これを修正すると思われる PR #1928 が投稿されたので今後に期待したい。