VSCode用 Pug サポート拡張機能
この拡張機能はVisual Studio Codeで使用するPugファイルの包括的な言語サポートを提供します。JetBrains IDEのPugプラグインの強力な機能に触発され、より良い開発体験をVS Codeユーザーに提供することを目指しています。
⚠️ ポイント: この拡張機能は言語ID登録ではなく拡張子ベースの検出（.pugファイル）を使用して、他のPug拡張機能との競合を完全に排除します。シンタックスハイライトやフォーマットについては既存のPug拡張機能に依存します。
✨ 主な機能
この拡張機能はPug開発ワークフローを強化するための豊富な機能セットを提供します：
🧭 高度なナビゲーションとコード解析
- 定義へ移動 (F12):
- mixin:
includeディレクティブを介して含まれるファイルや、再帰的にincludeされたファイル内にあるミキシン定義にもシームレスにジャンプできます。
- includeとextends: includeまたはextendsされたPugファイルにすばやく移動できます。
- アウトラインパネルへのシンボル表示 (Ctrl+Shift+O): 現在のPugファイルの構造化された概要を表示し、mixin、block、includeされたファイルをすばやくナビゲートできます。
- ワークスペースシンボル検索 (Ctrl+T): プロジェクト全体でPug固有のシンボル（ミキシンなど）を検索できます。
💡 インテリジェントな支援と基本的な検証
- コード補完: Pugの定義済みmixinのコンテキスト対応等の自動補完を提供します。
- ホバー情報: ホバー時に一部のPug構文の説明を表示します。
- シグネチャヘルプ: mixin呼び出しのパラメータ情報を表示し、期待される引数を理解するのに役立ちます。
- インデント検証: 一貫性のないインデント（タブとスペースの混在など）を検出して警告します。
🛠️ 高度な機能
- フォーマット付きペースト: 自動Pugフォーマットとパイプ構文処理を備えた強化されたペースト機能（
Ctrl+Shift+Vまたはcmd+shift+vでアクセス可能）。
- mixinインデクサー: 高速シンボル解決のためのワークスペース全体のmixinインデックス作成。
🔧 技術的な詳細
この拡張機能は以下を使用して構築されています：
- TypeScript: 型安全な開発と完全なVS Code APIの活用のため。
- VS Code API: エディタ機能（言語サービス、コマンド、UI要素など）とのネイティブ統合。
pug-lexer: Pugソースコードのトークン化のための公式Pug字句解析器。pug-parser: 抽象構文木（AST）の生成と構造分析を行うための公式Pugパーサー。
🚀 インストール
- Visual Studio Codeを開きます。
- 拡張機能ビューに移動します（Ctrl+Shift+X）。
- 「Pug Support」を検索します。
- 「インストール」をクリックします。
開発またはテスト用の代替方法：
- このリポジトリをクローンします
- クローンしたディレクトリに移動します
- 依存関係をインストールします
npm install
- VS Codeでフォルダを開きます
F5を押して、拡張機能を読み込んだ拡張機能開発ホストを起動します
📖 使用ガイド
拡張機能は.pugファイルを開くと自動的に有効になります。
- ナビゲーション:
F12（定義へ移動またはCtrl+Click）、Ctrl+Shift+O（ドキュメントアウトライン）、Ctrl+T（ワークスペースシンボル）を使用します。
- インテリジェントな支援: 入力時に自動補完が表示されます。Pug要素にホバーすると詳細情報が表示されます。ミキシン名の後に
(を入力するとシグネチャヘルプが表示されます。
- フォーマット付きペースト:
Ctrl+Shift+V（Mac: Cmd+Shift+V）またはコンテキストメニューからアクセスできます。
🐛 既知の問題と制限事項
- 複雑なプロジェクト構造: 非常に複雑または異常な構造のプロジェクトでの
include/extendsのパス解決にはエッジケースがある可能性があります。
- パフォーマンス: 数千のPugファイルを持つ非常に大きなプロジェクトでは、ワークスペース全体のシンボル検索や参照検索などの一部の機能で若干の遅延が発生する可能性があります。
🏗️ 今後の計画
以下の機能が今後のリリースで計画されています：
- リアルタイム検証: より正確なエラー報告のための公式
pug-lexerとpug-parserを使用した拡張構文チェック。
- パス検証:
includeおよびextendsディレクティブで使用されるファイルパスを検証し、存在しないファイルについて警告します。
- mixin分析: 未定義のmixin呼び出しと潜在的に未使用のmixin定義を識別します。
- コードアクションとクイックフィックス: 一般的な問題（未定義mixin、インデント問題など）の提案と自動修正を提供します。
謝辞
- JetBrains IDE（WebStorm、IntelliJ IDEAなど）の優れたPugサポートに触発されています。
- Pug.jsチームの公式**
pug-lexerおよびpug-parser**ライブラリに大きく依存しています。
- 強力な拡張機能APIと包括的なドキュメントを提供してくれたVS Codeチームに感謝します。
| |
