VS Code 拡張機能

 

VS Code 拡張機能はいくつかの機能を提供しており、スライドの整理や概要の把握を支援します。

機能

• サイドパネルでのプレビュー
• スライドのツリービュー
• スライドの順序変更
• スライドブロックの格納
• 複数のスライドプロジェクトのサポート
• ワンクリックで開発サーバーを起動
• Language Model Tools を通した AI/Copilot 統合

インストール

拡張機能は VS Code Marketplace または Open VSX Registry からインストールできます。

使い方

アクティビティバーの Slidev アイコンをクリックして Slidev パネル を開きます。Slidev パネルでは、プロジェクトのツリービュー、スライドのツリービュー、プレビューの Webview を確認できます。

プロジェクトのツリービュー では、ワークスペース内のすべての Slidev プロジェクトを確認できます。アイテムをクリックすると対応するファイルが開き、アイテム上の アイコンをクリックするとアクティブなプロジェクトを切り替えられます。 アイコンは自動的にスキャンされなかったスライドプロジェクトを読み込むためのものです。

スライドのツリービュー では、アクティブなプロジェクト内のすべてのスライドを確認できます。アイテムをクリックするとエディタ内のスライドにカーソルが移動し、ドラッグアンドドロップでスライドの順序を変更できます。

プレビューの Webview では、 アイコンをクリックして開発サーバーを起動し、 アイコンをクリックしてブラウザでスライドを開けます。プレビューのナビゲーションとエディタのカーソルの同期/非同期を アイコンで切り替えられます。

いくつかの コマンド も利用できます。コマンドパレットで Slidev と入力して確認してください。

slidev.include 設定にグロブパターンを追加して、Slidev エントリとしてファイルを含めることができます。デフォルト値は ["**/*.md"] です。例えば:

{
  "slidev.include": ["**/presentation.md"]
}

開発コマンド

開発サーバーを起動するコマンドは、slidev.dev-command 設定でカスタマイズできます。デフォルト値は npm exec -c 'slidev ${args}' です。

設定されたコマンドにはプレースホルダーを含めることができます:

• ${args}: すべての CLI 引数。e.g.: slides.md --port 3000 --remote
• ${port}: ポート番号。e.g.: 3000

例:

• グローバルインストール: slidev ${args}
• PNPM ユーザーの場合は、pnpm slidev ${args} に設定できます。
• code-server ユーザーの場合は、pnpm slidev ${args} --base /proxy/${port}/ に設定できます。これにより、開発サーバーは http://localhost:8080/proxy/3000/ でアクセス可能になります。

スライドのツリービュー

v0.52.0 以降で利用可能

スライドのツリービューでは、プレゼンテーション内のすべてのスライドがスライド番号とタイトルとともに表示されます。各スライドは {slideNo}. {title} の形式で表示され、特定のスライドへのナビゲーションが容易になります。

AI/Copilot 統合

v0.52.0 以降で利用可能

拡張機能は Language Model Tools を提供しており、VSCode の Copilot やその他の AI アシスタントが Slidev プロジェクトと対話できるようにします。利用可能なツールは以下の通りです:

• slidev_getActiveSlide - アクティブなスライドとプロジェクトに関する情報の取得
• slidev_getSlideContent - スライドの内容を番号で取得
• slidev_getAllSlideTitles - プレゼンテーション内のすべてのスライドタイトルを一覧表示
• slidev_findSlideNoByTitle - タイトルからスライド番号を検索
• slidev_listEntries - 読み込まれたすべての Slidev プロジェクトエントリを一覧表示
• slidev_getPreviewPort - プロジェクトのプレビューサーバーのポートを取得
• slidev_chooseEntry - アクティブな Slidev エントリを切り替え

これらのツールは、AI アシスタントがより効率的にスライドを理解できるようにし、ナビゲートや編集を支援します。