TL;DR
これ入れましょ!
https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar
注意点は、このあたり。
- Veturと共存はできない
- TypeScriptか、それに準じた設定が必要
-
<script lang="ts">
とTSビルド環境があればスムーズ -
<script lang="js>
の場合、以下のどちらかが必要- tsconfig.json作って
"allowJs": true
を明記 - jsconfig.json作る
- tsconfig.json作って
-
以下、ポエム
VSCodeでVue.jsの開発するとき、機能拡張はVeturが定番です。
https://marketplace.visualstudio.com/items?itemName=octref.vetur
しかし、このVeturさんは致命的な機能不足がございまして、
シンボルの名前変更(Rename Symbol)ができないのです!
2017年に立てられたこのIssueが、ずっとOpenなままになっております。
https://github.com/vuejs/vetur/issues/610
リファクタリング中に変数名をエディタの機能で変えたいこと、めっちゃありますよね。
Vue.jsでも.js拡張子で書いてればあればできるんですが、
単一ファイルコンポーネント.vueにした途端、構文解析など難しいんでしょうね。
当たり前に使っていたRename Symbolが出来なくなってしまうのです
ぶっちゃけ、このせいで僕はVueよりReactをよく使うようになりました。
それほどRename Symbolは重要だったんですが!
この度!Volarという機能拡張でそれができることをが判明しました!!!
(読み方は"ヴォラー"で良いのかな?)
https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar
@aki77 さんが見つけてくれました。感謝!
よく見ると、前述のIssueでもコメントされてますね。
https://github.com/vuejs/vetur/issues/610#issuecomment-765347938
これで、またVue.jsも使おうかな~って思ってます。