Vue.jsをVSCodeで書く時はVeturを入れてjsconfig.jsonを書こう

vue-cliで新しいプロジェクトを作ります。バージョンは3.0.0-beta.10です。

$ vue create hoge

Manually select featuresで、以下のような設定でプロジェクトを作ります。

そのままの状態ではVisual Studio Codeは.vueファイルをうまく扱えないので、拡張機能のVeturを導入します。

vueファイルが正しくシンタックスハイライトできるか見ましょう。

はい。次に便利設定を行います。
Visual Studio CodeはMacの場合はコマンド+マウスクリックで定義元へ飛ぶ機能が付いています。
本来ならば上記画像中のHelloWorldオブジェクトをクリックすれば当該ソースコードへ飛んで欲しいのですが、デフォルトではそのようになりません。

そこで、プロジェクトのルートフォルダにjsconfig.jsonを置きます。内容は以下の通りです。
具体的にいうとVue.jsは@/をsrc/として扱うため、インクルードパスを合わせてあげます。

{
  "include": ["./src/**/*"],
  "compilerOptions": {
    "module": "es2015",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

これで満ち足ります。

VisualStudioCodeはプログラム中を適当にCtrl+クリックするとその定義元に飛べて便利だぞっていう動画 pic.twitter.com/VTP322xom4

— ysk (@nyallpo) 2018年5月17日