本投稿は Larvel 6 に入れた Vue.js 3 の環境で、 ESLint と Prettier を使う方法 – oki2a24 の続きにあたります。
エラー
https://vuejs.github.io/vetur/guide/FAQ.html#vetur-can-t-find-package-json-in-xxxx-xxxxxx への対処
ページを見てみると、 VS Code で Vetur: show doctor info コマンドを実行すると現在の状況を診断できるとのことで、適当な *.vue ファイルを開いて実行してみました。
確かに、プロジェクトルートは /var/www/html/laravel ではなく /var/www/html となっており、そこには package.json はありません。そのために、 Vue.js のバージョンも 2.5 以下で設定されています。
{
"name": "Vetur doctor info",
"fileName": "/var/www/html/laravel/resources/js/components/ExampleComponent.vue",
"currentProject": {
"vueVersion": "VPre25",
"rootPathForConfig": "/var/www/html",
"projectRootFsPath": "/var/www/html"
},
"activeProjects": [
"/var/www/html"
],
... 略 ...
ということは、 Vetur に package.json のある場所を教えてあげれば良いことになります。 いくつか思いつきます。
- Docker の方を設定し、 VS Code Remote Container で開くディレクトリを設定する。 => 影響範囲が大きいのでヤダ。
vetur.config.jsで Vetur の設定をする。
今回は、 vetur.config.js での設定を試してみます。
"rootPathForConfig": "/var/www/html" の場所に、 vetur.config.js を作成し、次の内容を書きました。
module.exports = {
projects: [{ root: './laravel' }],
}
その後、 VS Code Remote Contaier から抜け、もう一度 VS Code Remote Contaier を立ち上げると、無事次のように projectRootFsPath が変更され、 package.json も認識され、 Vue.js のバージョンも 3 と認識されるようになりました!
{
"name": "Vetur doctor info",
"fileName": "/var/www/html/laravel/resources/js/components/ExampleComponent.vue",
"currentProject": {
"vueVersion": "V30",
"rootPathForConfig": "/var/www/html",
"projectRootFsPath": "/var/www/html/laravel"
},
"activeProjects": [
"/var/www/html/laravel"
],
... 略 ...
https://vuejs.github.io/vetur/guide/FAQ.html#vetur-can-t-find-tsconfig-json-jsconfig-json-in-xxxx-xxxxxx への対処
ページを見てみますと、 Setup | Vetur を見ろとありました。そこで、見てみますと、
- プロジェクトルート、に
jsconfig.jsonを置け。 jsconfig.jsonには例えばincludeを設定しろ。- ちなみに、プロジェクトルート、に
package.jsonを置け。
ということでした。そもそもとして、 jsconfig.json とはなんぞやと調べてみますと、 VS Code のための設定ファイルのようです。
- jsconfig.json Reference
jsconfig.jsonは JavaScript コードのルートに置け。
ということが書いてありました。 Vetur ではプロジェクトルート、 VS Code では JavaScript コードのルート、と矛盾しておりますけれども、今回は Vetur の方に従いまして、プロジェクトのルート、つまり package.json と同じディレクトリに配置いたしました。
{
"include": [
"./resources/js/**/*"
]
}
これで、 VS Code Remote Container を立ち上げなおしてみますと、無事エラーメッセージが消えました!
おわりに
今まであまり VS Code は使ってきませんでした。これから使う機会が増えそうです。設定することが、言語ごと、プロジェクトごとに増えてしまっておりますけれども、便利に使うためにできることは一つずつやっていこうと思います。
以上です。