はじめに
ナイトウ(@naitokosuke)と申します。
Alexander Lichter さんの YouTube 動画を見ている時に、見慣れない VS Code の表示に気づきました。やタグが透明になっていたのです。
Natsuki (@natch_engr) さんに Vue の公式 VS Code 拡張機能の Premium Features の 1 つである Focus Mode によるものだと教えてもらいました。ありがとうございました！！
Focus Mode 以外にも、以下の機能が現在使用可能です。(2025/08/10)
- Template Interpolation Highlight
- Reactivity Visualization
それぞれどんな機能か見る前に、まずは Premium Features のアンロック方法を紹介します。
Premium Features のアンロック方法
- VS Code 拡張機能「Vue (Official)」を最新（v3.x）に更新
- GitHub Sponsors で Johnson さんをスポンサー (最低 $3 から(!!!))
- コマンドパレットで “Vue: Verify Sponsor Status” を実行して GitHub アカウントを認証
Premium Features
Focus Mode
がぼやけて表示されて選択した領域に集中できます。
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 について紹介しました。
Johnson Chu さんをスポンサーすることで利用できます。
最低 $3 からなのでぜひ試していただきたいです。
Vue の未来のためにもなるはずです！
最後に
Focus Mode は個人的には結構好きです。
(今回は紹介していませんが、inlay hints は個人的には苦手です。)
Premium Features に限らず、ぜひ自分の開発スタイルに合うかいろいろ試してみてください。
最後まで読んでいただきありがとうございました！
Views: 0
