18
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Veturでは.vueのRename Symbolができないので、Volarに移行した!

Posted at

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作る

以下、ポエム

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が出来なくなってしまうのです :sob:

ぶっちゃけ、このせいで僕は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も使おうかな~って思ってます。

18
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?