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日