VSCode Extension Guide

PlaceFlow VSCode拡張機能の使い方ガイドです。インストールから実際の使用方法、便利な機能まで詳しく説明します。VSCodeでPlaceFlowファイルの編集とリアルタイムプレビューを体験しましょう。

インストール

Visual Studio Code Marketplaceからインストール

VSCodeを起動

Visual Studio Codeを起動します。

拡張機能タブを開く

左側のサイドバーから拡張機能アイコンをクリック、または
Ctrl+Shift+X (macOS: Cmd+Shift+X)

PlaceFlowを検索

検索ボックスに「PlaceFlow」と入力

インストール

beardoc製の「PlaceFlow」拡張機能を見つけて「インストール」をクリック

📦 Marketplaceで見る

主な機能

🎨

シンタックスハイライト

PlaceFlow DSL（.pf、.placeflow ファイル）の構文を美しく色分け表示。キーワード、文字列、コメントを見やすくハイライトします。

👀

リアルタイムプレビュー

エディタでコードを編集すると、リアルタイムでSVGプレビューを表示。デバウンス機能で快適な編集体験を提供します。

📋

SVGコピー機能

生成されたSVGコードをワンクリックでクリップボードにコピー。他のアプリケーションですぐに使用できます。

💾

SVGエクスポート

SVGファイルとして保存。プレゼンテーション資料や技術文書に直接使用できる形式で出力します。

⌨️

コマンドパレット統合

VSCodeのコマンドパレットから各機能にアクセス。キーボードショートカットでスムーズな操作が可能です。

🔧

エラーハンドリング

DSL構文エラーを分かりやすく表示。問題のある箇所を特定しやすく、デバッグをサポートします。

基本的な使い方

新しいPlaceFlowファイルの作成

新しいファイルを作成

Ctrl+N (macOS: Cmd+N) で新しいファイルを作成

ファイルを保存

Ctrl+S (macOS: Cmd+S) で保存時にファイル名を example.pf または example.placeflow として保存

DSLコードを記述

PlaceFlow DSLを記述すると自動的にシンタックスハイライトが適用されます

screen "My First Layout" size(400, 300) {
  box "Welcome" at(50, 50) size(300, 200) {
    text "Hello, PlaceFlow!" at(150, 100) style(textAlign: "center")
    button "Get Started" at(125, 150) size(150, 40)
  }
}

プレビュー機能の使用

プレビューを開く

以下のいずれかの方法でプレビューを表示：

エディタ右上の「Open Preview」アイコンをクリック
コマンドパレット（Ctrl+Shift+P）で「PlaceFlow: Open Preview」を実行
右クリックメニューから「PlaceFlow: Open Preview」を選択

リアルタイム編集

エディタでコードを変更すると、プレビューが自動的に更新されます（300msのデバウンス付き）

プレビューウィンドウはエディタと並べて表示できます。VSCodeの分割機能を使って効率的に作業しましょう。

SVGの活用

SVGコードをコピー

エディタ右上の「Copy SVG Code」アイコンをクリック、またはコマンドパレットから「PlaceFlow: Copy SVG Code」を実行

SVGファイルとして保存

エディタ右上の「Export to SVG」アイコンをクリック、またはコマンドパレットから「PlaceFlow: Export to SVG」を実行。保存ダイアログで任意の場所にSVGファイルを保存できます。

利用可能なコマンド

PlaceFlowコマンド一覧

PlaceFlow: Open Preview Ctrl+Shift+P

PlaceFlow: Copy SVG Code コマンドパレットから

PlaceFlow: Export to SVG コマンドパレットから

コマンドパレットは Ctrl+Shift+P (macOS: Cmd+Shift+P) で開きます。

トラブルシューティング

よくある問題と解決方法

プレビューが表示されない

ファイルが .pf または .placeflow 拡張子で保存されているか確認
DSL構文にエラーがないか確認（エラーメッセージが表示されます）
VSCodeを再起動してみる

シンタックスハイライトが適用されない

ファイルの拡張子を確認（.pf または .placeflow）
VSCode右下の言語表示が「PlaceFlow」になっているか確認
手動で言語を選択する場合：Ctrl+K M で言語選択

拡張機能が動作しない

拡張機能が正しくインストールされているか確認
VSCodeのバージョンが1.74.0以上であることを確認
拡張機能を無効化→有効化してみる

問題が解決しない場合は、VSCode開発者コンソール（Ctrl+Shift+I）でエラーメッセージを確認してください。

活用のヒント

効率的な作業方法

分割表示: エディタとプレビューを並べて表示（Ctrl+\で分割）
スニペット活用: よく使うテンプレートをVSCodeスニペットとして登録
ファイル整理: プロジェクトごとにフォルダを作成して.pfファイルを管理
バージョン管理: GitでPlaceFlowファイルもバージョン管理

チーム開発での活用

デザインレビュー: SVG出力をチームで共有してレビュー
ドキュメント統合: 技術文書にSVG図表を直接埋め込み
プロトタイピング: アイデアを素早く可視化して議論
標準化: チーム内でPlaceFlowテンプレートを共有

PlaceFlowファイルはプレーンテキストなので、差分比較やマージ操作が簡単です。チーム開発に最適です。

次のステップ

VSCode拡張機能の基本的な使い方を習得したら、以下のリソースでさらに学習を深めてください：

DSL Reference - 全ての構文と要素の詳細
Examples - 実用的なサンプルとユースケース
Getting Started - 基本的な使い方の復習

← Examples ホームに戻る