Posted at

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

More than 1 year has passed since last update.

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/*"]
}
}
}

これで満ち足ります。