Vue.js 公式 VS Code 拡張機能の Premium Features のご紹介【※有料】

はじめに

ナイトウ(@naitokosuke)と申します。

Alexander Lichter さんの YouTube 動画を見ている時に、見慣れない VS Code の表示に気づきました。
<script>や<template>タグが透明になっていたのです。

https://youtu.be/OjMkGenTerM

Natsuki (@natch_engr) さんに Vue の公式 VS Code 拡張機能の Premium Features の 1 つである Focus Mode によるものだと教えてもらいました。
ありがとうございました！！

こちらも Alexander Lichter さんの YouTube 動画 "More Features of Vue's VS Code Extension" で紹介されています。

Focus Mode 以外にも、以下の機能が現在使用可能です。(2025/08/10)

• Template Interpolation Highlight
• Reactivity Visualization

それぞれどんな機能か見る前に、まずは Premium Features のアンロック方法を紹介します。

Premium Features のアンロック方法

1. VS Code 拡張機能「Vue (Official)」を最新（v3.x）に更新
2. GitHub Sponsors で Johnson さんをスポンサー (最低 $3 から(!!!))
3. コマンドパレットで "Vue: Verify Sponsor Status" を実行して GitHub アカウントを認証

https://marketplace.visualstudio.com/items?itemName=Vue.volar

https://github.com/sponsors/johnsoncodehk

Premium Features

Focus Mode

<script>, <template> がぼやけて表示されて選択した領域に集中できます。

Template Interpolation Highlight

{{ }} が見やすくなります。

Reactivity Visualization

リアクティブなデータの関係を視覚的に表示します。

特に不要であれば OFF にできる

上記の Premium Features はいずれも ON/OFF を切り替えることができます。
not for me な機能は無効にできるので気軽に試すことができます。

.vscode/setting.json

{
  "vue.editor.focusMode": false,
  "vue.editor.templateInterpolationDecorators":false,
  "vue.editor.reactivityVisualization": false
}

まとめ

Vue.js 公式の VS Code 拡張機能の Premium Features について紹介しました。

• Focus Mode
• Template Interpolation Highlight
• Reactivity Visualization

Johnson Chu さんをスポンサーすることで利用できます。

最低 $3 からなのでぜひ試していただきたいです。
Vue の未来のためにもなるはずです！

最後に

Focus Mode は個人的には結構好きです。
(今回は紹介していませんが、inlay hints は個人的には苦手です。)
Premium Features に限らず、ぜひ自分の開発スタイルに合うかいろいろ試してみてください。

最後まで読んでいただきありがとうございました！