Vue開発用のVS Code拡張機能を入れてみる

Vueで検索すると色々出てきた。

VeturとVue (Official)を入れるのが直感的に良さそう。

Vue 3の場合はVue (Official)

Vue 3かどうかはどうやって確認するか？

npm list vueで、Vueのバージョンが確認できた。

最初は、Vueの一階層上で実行してしまったが、Vueのあるfrontendに降り立って、実行した。

hiroki@shibatahiroshitakanoiMac shopping_list_app % npm list vue
/Users/hiroki/Downloads/python/shopping_list_app
└── (empty)

hiroki@shibatahiroshitakanoiMac shopping_list_app % cd frontend
hiroki@shibatahiroshitakanoiMac frontend % npm list vue
npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@3. I'll try to do my best with it!
shopping-frontend@0.0.1 /Users/hiroki/Downloads/python/shopping_list_app/frontend
└── vue@3.5.18 



   ╭────────────────────────────────────────────────────────────────╮
   │                                                                │
   │      New major version of npm available! 6.14.13 → 11.5.2      │
   │   Changelog: https://github.com/npm/cli/releases/tag/v11.5.2   │
   │               Run npm install -g npm to update!                │
   │                                                                │
   ╰────────────────────────────────────────────────────────────────╯

hiroki@shibatahiroshitakanoiMac frontend % 

3.5.18とのこと。

hiroki@shibatahiroshitakanoiMac frontend % npm list vue
/Users/hiroki/Downloads/python/shopping_list_app/frontend
└── vue@3.5.18 

3系なので、Vue (Official)を入れよう。

before

HTMLのシンタックスハイライトがされていない。

変数の定義に移動できない。

これらが解決されるのか？？

after

変数にマウスを当てると、他の箇所にある変数も識別できるようになっていた。

HTMLのシンタックスハイライトもされている。

F12キーで、関数の定義と実装を行き来することができていた。

スクリプトで定義されている変数も行き来できていた。