VeturでSyntax Highlight Colorが効かない問題

Vetur で Syntax Highlight Color が突然効かなくなったときの対応方法です。

環境

• macOS Catalina 10.15.4
• VSCode 1.46.1
• Vetur 0.24.0

対応

今回は VSCode と Vetur のバージョンはあまり関係なかったのですが、順番に以下の方法で試していきました。

Vetur の拡張をアンインストール

拡張そのものに原因があると考えて、公式の Issues を参考に行いました。

1. Vetur の拡張をアンインストールする
2. Vetur のディレクトリを削除する
   rm -fr ~/.vscode/extensions/octref.vetur-0.24.0/
3. VSCode を再起動する
4. Vetur をインストールする

私のケースでは解決しませんでした。

VSCode の拡張を全て停止する

次は他の拡張が原因で発生していることを考えて、一度全ての拡張を停止してみました。

1. CMD + Shift + P でコマンドパレットを起動する
2. Extensions: Disable All Installed Extensionsを入力する
3. 念のため、VSCode を再起動する

これも効果なしです。

VSCode の設定をデフォルトに戻す

最後に試したのは VSCode の設定を戻す方法です。

1. CMD + Shift + P でコマンドパレットを起動する
2. Preferences: Open Settings (JSON)を入力する
3. 開いたファイルの内容を全て削除する(すぐに戻せるようにカットしておくといいです)

この時点で vue ファイルの Syntax Highlight Color が復活しました。

根本原因

先に試した設定を一旦元に戻した上で、ひとつずつ設定をデフォルトにしていきました。

たどり着いた結果が"workbench.colorTheme": "Visual Studio Dark"の設定でした。

なぜ colorTheme を変更していたのかは不明ですが、これを他のテーマまたはデフォルトテーマに戻すことにしました。