Shortcut Tips

よく使う VS Code のショートカットをランダムに提示し、すぐに「動きを確認」できる拡張機能です。定期的なポップアップでショートカットを思い出しつつ、サイドバーとタブビューで詳しい解説や GIF アニメーションを確認できます。

主な機能

• ステータスバーから即確認: 左下に ShortCutTips ボタンが常駐し、クリックでランダムなショートカットを表示します。
• 5 分ごとのリマインダー: バックグラウンドで 5 分ごとに通知を表示し、新しいショートカットを提案します。
• 「動きを確認する」タブ: 通知からワンクリックで Webview タブを開き、ショートカットの説明と GIF を表示します。
• サイドバーの一覧/履歴: アクティビティーバーの「Shortcut List」から、すべてのショートカット検索と既読履歴の参照・再生ができます。
• クロスプラットフォーム対応: Windows / macOS のキー表記と GIF を切り替えて表示します。
• 履歴の永続化: history.json に最新 50 件を保存し、重複は自動で前の履歴から置換します。

インストール

1. VS Code v1.93.1 以降を用意します。
2. VS Code Marketplace から「Shortcut Tips」を検索・インストールします。
3. ステータスバーに ShortCutTips が表示されれば準備完了です。

使い方

ポップアップ通知

1. ステータスバーの ShortCutTips をクリック、またはコマンドパレットで ポップアップを表示 を実行します。
2. VS Code の右下に「ショートカット名 : キー」のトーストが表示されます。
3. 「動きを確認する」を選ぶと、該当ショートカットの詳細タブが開きます。

自動リマインダー

• 拡張機能有効時は 5 分間隔でランダムなショートカットを通知します。
• すでに学んだショートカットも履歴へ追加されるため、定着状況を追跡できます。

サイドバー「Shortcut List」

• アクティビティーバーの 💡 アイコンを選ぶと、Webview ベースのサイドバーが開きます。
• 上部タブで「一覧 / 履歴」を切り替え可能。
• 検索ボックスで名前、説明、キー入力を横断検索できます。
• 履歴タブの「履歴をクリア」ボタンで history.json を初期化します。

タブビュー

• 通知やサイドバーからショートカットを選ぶと、専用タブ (Webview) が開きます。
• タブは shortcutData メッセージを受信後、ショートカット名・説明・キー配列・GIF を描画します。
• GIF で実際のカーソル操作／選択範囲の変化を見せると、チーム共有時に効果的です。

収録ショートカット

ショートカット定義は src/const.ts の SHORT_CUT にまとめています。各エントリには以下の情報を含みます。

• name / description
• win32.command / darwin.command
• 動作解説用の gif URL

定義を追加・更新後は npm run compile でビルドし、挙動を確認してください。

開発者向け

npm install      # 依存関係のインストール
npm run watch    # esbuild による型チェック・バンドルを監視
npm run compile  # リリース用バンドルを生成

ライセンス / コントリビュート

• バグ報告・機能要望: GitHub Issues へお寄せください。
• コントリビュート: 開発への参加を歓迎します！詳細は CONTRIBUTING.md をご確認ください。
• プルリクエスト: 送信前に npm run compile が通ること、および挙動に問題がないことを確認してください。

Shortcut Tips で日々の作業のリズムを崩さずにショートカットを定着させましょう。