EC-CUBE Controller Twig Navigator

EC-CUBE 開発者向けの Visual Studio Code 拡張機能です。コントローラーのアクションメソッドと Twig テンプレートを右クリック一発で相互に行き来できます。

🔗 拡張機能マーケットプレイスで見る

機能

コントローラー → Twig

PHP コントローラーをエディターで開き、ファイル上で右クリックして EC-CUBE: Open Related Twig Template を選択します。

カーソル位置のアクションに対して、次の 2 種類のテンプレート参照を同時にスキャンします。

1. @Template アノテーション / PHP 8 アトリビュート — 関数定義の直前に書かれた @Template("dir/file.twig") または #[Template("dir/file.twig")]
2. render() / renderView() 呼び出し — メソッド本体内の $this->render('dir/file.twig')

カーソルをメソッド名の行に置いても、@Template の行や本体内に置いた場合とまったく同じように動作します。

解決の挙動

カスタムテンプレートディレクトリが存在する場合（app/template/<カスタム>/）

ファイル上での右クリック時に参照先ファイルがカスタムディレクトリに見つかった場合は、ピッカーを表示せず即座に開きます。

カスタムディレクトリが存在しない、またはファイルが見つからない場合

全検索ディレクトリ（後述のテンプレート検索順を参照）から候補を集めた Quick Pick リストを表示します。リスト下部のセパレーター以降には Create new file エントリーが表示され、選択すると app/template/default/ に空のファイル（必要な親ディレクトリを含む）を自動生成してエディターで開きます。

Block フォルダの除外

Quick Pick 一覧には Block フォルダ内のファイル（例: app/template/テンプレート名/Block/ファイル名.twig）は表示されません。

Twig → コントローラー

Twig テンプレートをエディターで開き、ファイル上で右クリックして EC-CUBE: Open Related Controller Action を選択します。

コントローラーファイルを検索して、現在のテンプレートパスを参照している render() 呼び出しを持つアクションメソッドへジャンプします。複数一致した場合は Quick Pick リストを表示します。

テンプレートディレクトリの選択

コマンドパレット（Ctrl+Shift+P / Cmd+Shift+P）から EC-CUBE: Select Template Directory を実行すると、app/template/ 配下のどのサブディレクトリを優先検索対象にするかを選択できます。選択結果は .vscode/settings.json に保存されます。

テンプレート検索順

カスタムディレクトリで即時一致が得られなかった場合、次の順番で全ディレクトリを検索し、結果を 1 つの Quick Pick リストにまとめます。

カスタムテンプレートディレクトリのセッションキャッシュ（v0.0.7）

.vscode/settings.json に ecCubeNavigator.templateDirectoryName が未設定で、かつ app/template/ 配下に複数のカスタムディレクトリが存在する場合、v0.0.6 まではナビゲーションコマンドを実行するたびにディレクトリ選択の Quick Pick が表示されていました。

v0.0.7 からは、選択結果を VS Code のセッション中にキャッシュします。 プロンプトはセッション内で 1 回だけ表示され、それ以降のコマンドではキャッシュされたディレクトリ名を再利用するため、1 回のクリックで直接移動できます。

EC-CUBE: Select Template Directory を実行して永続設定を保存した際は、キャッシュが自動的にクリアされます。

新規ファイルの作成

Quick Pick からの作成（app/template/default/ 配下）

@Template または render() で参照されているテンプレートパスがどの検索ディレクトリにも存在しない場合、Quick Pick リストの末尾に Create new file エントリーが表示されます。

• 作成先は常に app/template/default/<dir>/<file>.twig
• 不足している親ディレクトリも自動的に作成されます
• 作成後、ファイルがすぐにエディターで開きます

いずれかのディレクトリにファイルが既に存在する場合、このエントリーは表示されません。

Esc キーによるカスタムディレクトリへの新規作成（v0.0.11）

Quick Pick が表示されているときに Esc キーを押すと、カスタムテンプレートディレクトリ配下に新しい Twig ファイルを作成するウィザードが起動します。

@Template / render() の記述がある場合（ファイル名の入力不要）

@Template や render() でテンプレートパスが指定されている場合、フォルダ名とファイル名はそのパスから自動的に決まります。テンプレートディレクトリを選択するだけで、確認ダイアログなしにファイルが即座に作成されます。

手順:

1. テンプレートディレクトリを選択 — app/template/ 配下のディレクトリ一覧から選択します。
   例: MyTheme
2. ファイルが即座に作成され、エディターで開きます。確認ダイアログは表示されません。

例: コントローラーに @Template("Cart/test.twig") と記述されている場合

→ app/template/MyTheme/Cart/test.twig が作成されます。

@Template / render() の記述がない場合（ファイル名の入力が必要）

テンプレートパスの参照がない場合は、以下の手順でファイルを作成します。

1. テンプレートディレクトリを選択 — app/template/ 配下のディレクトリ一覧から選択します。
   例: MyTheme
2. サブフォルダを選択 — 選択したテンプレートディレクトリ内の既存フォルダ一覧から選択します（Block フォルダは除外されます）。
   例: Mypage
3. ファイル名を入力 — 作成するファイル名を入力します（.twig で終わる必要があります）。
   例: new_file.twig

上記の例では app/template/MyTheme/Mypage/new_file.twig が作成されます。

コンテキストメニューコマンド

いずれのコマンドも、ファイル本体を右クリックして実行します。

Quick Pick が表示されない場合

コマンドは、エディター中央のファイル本体を右クリックすることで実行してください。

ファイル本体を右クリックすることで、カーソル位置のメソッド情報を正しく読み取れます。

設定

設定（Ctrl+,）を開いて ecCubeNavigator で検索します。

.vscode/settings.json への記述例:

{
  "ecCubeNavigator.templateDirectoryName": "your_theme"
}

動作要件

• VS Code ^1.90.0
• EC-CUBE 4.x の標準的なプロジェクト構成

インストール

VS Code Quick Open（Ctrl+P）を開き、以下を貼り付けて Enter を押します。

ext install colscenery.ec-cube-controller-twig-navigator

または 拡張機能マーケットプレイス から直接インストールできます。

変更履歴

0.0.12

• Esc キーによる新規ファイル作成の改善（確認ダイアログの廃止）: @Template や render() でテンプレートパスが指定されている場合、テンプレートディレクトリを選択すると確認ダイアログを表示せずに即座にファイルを作成するようになりました。（例: @Template("Cart/test.twig") の場合、テンプレートディレクトリを選択するだけで app/template/MyTheme/Cart/test.twig が作成されます。）

0.0.11

• Block フォルダの除外: Quick Pick 一覧に app/template/テンプレート名/Block/ 配下のファイルが表示されないようになりました。
• Esc キーによる新規ファイル作成（テンプレート参照あり）: Quick Pick で Esc キーを押すと新規ファイル作成ウィザードが起動します。@Template や render() でテンプレートパスが指定されている場合、フォルダ名とファイル名はそのパスから自動決定されます。テンプレートディレクトリを選択して確認するだけで作成完了です。（例: @Template("Cart/test.twig") → app/template/MyTheme/Cart/test.twig）
• Esc キーによる新規ファイル作成（テンプレート参照なし）: テンプレートパスの参照がない場合は、テンプレートディレクトリ・サブフォルダを選択し、ファイル名を入力して作成します。

0.0.10

• 修正: エディター上のファイルを右クリックしてコマンドを実行したとき、クイックピックを表示するまでに Esc キーを 2 回押す必要があった問題を修正しました。 カスタムテンプレートディレクトリが複数存在する場合、ファイル一覧ピッカーの前にディレクトリ選択ピッカーが割り込んでいました。コンテキストメニュー（ファイル本体上のいずれも）からの呼び出し時はディレクトリ選択プロンプトを完全にスキップし、すべてのカスタムディレクトリを自動的に検索対象に含めたうえでファイル一覧ピッカーを直接表示するよう改善しました。

0.0.9

• 修正: @Template や render() の記述がないコントローラーを右クリックしたとき、Quick Pick が表示されない問題を修正しました。

0.0.7

• 修正: カスタムテンプレートディレクトリの選択プロンプトがナビゲーションのたびに表示される問題を修正。 選択結果を VS Code セッション中にキャッシュするよう変更し、プロンプトはセッション内で 1 回だけ表示されるようになりました。

0.0.6

• カーソルをアクションメソッドの任意の位置（関数シグネチャの行を含む）に置いても、@Template アノテーションが正しく認識されるようになりました。
• カスタムディレクトリに一致がある場合、ピッカーを表示せず即座に開くようになりました。
• カスタムディレクトリで一致が得られなかった場合、全検索ディレクトリの候補と Create new file エントリーをまとめた Quick Pick リストを表示するようになりました。

0.0.5

• 初回公開リリース。

ライセンス

MIT