🦔
【個人開発】VSCodeで開いたファイルをまとめて一時保存する拡張機能を開発しました
saveTabsという拡張機能を作りました
VSCodeで作業中のタブを保存・復元できる拡張機能「saveTabs」を開発し、Visual Studio Code Marketplaceに公開しました。
公開先URL：
背景
開発中に複数のファイルを同時に開いていると混乱してくることってありませんか？
例えば、
「このファイルは何のために開いたんだっけ？」
「どのファイルがどの画面と関係あるんだっけ？」
「閉じたいけど閉じるとこのファイルをまた開けるかわからない...」
などです。
このような悩みを解決するために saveTabs という拡張機能を作りました！！
使用方法
拡張機能をインストール後、以下のコマンドが使用可能になります：
-
コマンドパレットを開く
- Windows/Linux:
Ctrl+Shift+P - macOS:
Cmd+Shift+P
- Windows/Linux:
-
利用可能なコマンド
-
Save Open Tabs: 現在開いているタブを保存 -
Open Saved Tabs: 保存されたタブセッションから選択して復元 -
Clear Saved Tabs: 保存されたタブ記録をすべて削除
-
Save Open Tabs
-
Save Open Tabsコマンドを使用することで現在開いているタブを全て.openTabs/日付.txtの中に保存します
保存される形式は以下の通り
- 保存場所: ワークスペースルートの
.openTabs/フォルダ - ファイル名:
YYYYMMDDHHMMSS.txt（タイムスタンプ形式） - 内容: 各行にファイルの絶対パス
Open Saved Tabs
-
Open Saved Tabsコマンドを使用することで保存したファイルを開くことができます - コマンド実行後、ファイルの選択 または 最新を選択します
- 最新を選択すると、最後に保存したファイルを開きます
Clear Saved Tabs
-
Clear Saved Tabsコマンドを使用することで保存したファイル群全てをクリアできます - コマンド実行後、
.openTabs/フォルダ配下のファイルを削除します
特徴・工夫ポイント
1. タイムスタンプベースの管理
- 保存したタブセッションは日時でファイル名が自動生成されるため、複数のセッションを時系列で管理できます
- フォルダ名を変更して利用することもできます
2. 最新セッションのクイックアクセス
- タブを復元する際、「最新」オプションを選択することで、最後に保存したセッションを素早く復元でき流ようにしました
3. プロジェクトごとの独立管理
- 各ワークスペースの
.openTabs/フォルダに保存されるため、プロジェクトごとに独立してタブ状態を管理できます
技術スタック
- 言語: TypeScript
- フレームワーク: VSCode Extension API
- ランタイム: Node.js 20.x
- パッケージマネージャー: npm
- リンター: ESLint
- ビルドツール: TypeScript Compiler (tsc)
- パッケージング: vsce (Visual Studio Code Extension)
ディレクトリ構成
savetabs/
├── .vscode/ # VSCode設定
│ ├── extensions.json # 推奨拡張機能
│ └── launch.json # デバッグ設定
├── assets/ # リソース
│ └── logo.png # 拡張機能アイコン
├── src/ # ソースコード
│ └── extension.ts # メインロジック
├── .gitignore # Git除外設定
├── .vscode-test.mjs # テストランナー設定
├── .vscodeignore # パッケージ除外設定
├── CHANGELOG.md # 変更履歴
├── eslint.config.mjs # ESLint設定
├── LICENSE # ライセンス
├── package.json # プロジェクト設定
├── package-lock.json # 依存関係ロック
├── README.md # ドキュメント
├── tsconfig.json # TypeScript設定
└── vsc-extension-quickstart.md # クイックスタート
各ディレクトリの役割
-
.vscode/: VSCode固有の設定ファイル。デバッグ設定や推奨拡張機能を定義 -
assets/: アイコンなどの静的リソース。マーケットプレイスで表示されるアイコンを格納 -
src/: TypeScriptで書かれたメインのソースコード。拡張機能の全機能を実装 - 設定ファイル群: TypeScript、ESLint、パッケージング等の各種設定
GitHub
ソースコードはGitHubで公開しています：
開発環境のセットアップ
# リポジトリのクローン
git clone https://github.com/ryomeblog/savetabs.git
cd savetabs
# 依存関係のインストール
npm ci
npm install -g vsce
# ビルド
npm run compile
# パッケージ作成
vsce package
Discussion