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 に限らず、ぜひ自分の開発スタイルに合うかいろいろ試してみてください。

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

追記(2025.09.20)

以前にこちらの記事で有料機能と紹介しましたが、v3.0.7 から無料で利用できるようになりました！
気づかずにすでに利用されている方もいらっしゃるかもしれませんね。

https://x.com/johnsoncodehk/status/1966413863391473681

https://github.com/vuejs/language-tools/releases/tag/v3.0.7