vue-cliで新しいプロジェクトを作ります。バージョンは3.0.0-beta.10です。
$ vue create hoge
Manually select featuresで、以下のような設定でプロジェクトを作ります。
![スクリーンショット 2018-05-17 12.13.18.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F256922%2Fac2e4ae2-9a8d-6e11-cc2e-b8594fb51dd0.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=10cf7c0b65835a00bfccb6449e4072a3)
そのままの状態ではVisual Studio Codeは.vueファイルをうまく扱えないので、拡張機能のVeturを導入します。
![スクリーンショット 2018-05-17 12.29.08.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F256922%2Ffe61c364-5e34-3e12-6c17-efab74e8751f.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3a5d4c675804ab70af772f887f4ec811)
vueファイルが正しくシンタックスハイライトできるか見ましょう。
![スクリーンショット 2018-05-17 12.31.56.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F256922%2F54315f98-ef76-fcbe-1226-4da5b2a091ca.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0ef1b57baabcc78794b989dba3c564d4)
はい。次に便利設定を行います。
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日