VSCode用 Pug サポート拡張機能
この拡張機能は、Visual Studio Codeでの Pugファイル編集をより快適にするための総合的な言語サポートを提供します。JetBrains IDEのPugプラグイン機能を参考に、VS Codeユーザーにも同じような便利な開発体験を提供することを目標としています。
✨ 主な機能
この拡張機能には、Pugでの開発作業を効率化する多くの便利な機能が含まれています：
🧭 便利なナビゲーションとコード解析
- 定義へ移動 (F12):
- mixin:
includeで読み込まれたファイルや、その中からさらに読み込まれたファイル内のmixin定義にも簡単にジャンプできます。
- includeとextends: includeやextendsで指定されたPugファイルにすぐに移動できます。
- アウトラインパネル表示 (Ctrl+Shift+O): 現在開いているPugファイルの構造を一目で確認でき、mixin、block、includeファイルなどを簡単に探せます。
- ワークスペース内検索 (Ctrl+T): プロジェクト全体からPug特有の要素（mixinなど）を素早く見つけ出せます。
💡 便利な入力支援と基本的なチェック機能
- コード補完: Pugで定義されたmixinなどを状況に応じて自動的に候補表示します。
- ホバー情報表示: マウスを合わせると、Pug構文の説明や使い方のヒントが表示されます。
- パラメータ情報表示: mixinを呼び出す際に必要な引数の情報を表示し、正しい使い方をサポートします。
- インデントチェック: タブとスペースの混在など、一貫性のないインデントを見つけて警告します。
🛠️ 便利な応用機能
- 整形ペースト機能: 貼り付けたテキストを自動的にPug形式に整形し、パイプ構文も適切に処理します（
Ctrl+VまたはCmd+Vで利用可能／CursorではCtrl+Shift+VまたはCmd+Shift+V）。
- mixin索引機能: プロジェクト内のすべてのmixinを自動的に索引化し、素早く参照できるようにします。
🔧 技術面について
この拡張機能は次の技術を使って作られています：
- TypeScript: 安全なコード開発とVS Code APIをフル活用するために採用しています。
- VS Code API: エディタの機能（言語サービス、コマンド、画面表示など）と直接連携しています。
pug-lexer: Pugの公式ライブラリで、Pugコードを解析するために使用しています。pug-parser: Pugの公式ライブラリで、コードの構造を理解するために使用しています。
🚀 インストール方法
- VS Codeを起動します
- 拡張機能の画面を開きます
- 検索欄に「Pug Support」と入力します
- 表示された拡張機能の「インストール」ボタンをクリックします
開発者向けインストール方法：
- このリポジトリをGitでクローンします
- クローンしたフォルダに移動します
npm installコマンドで必要なパッケージをインストールします- VS Codeでそのフォルダを開きます
F5キーを押すと、拡張機能がロードされたVS Codeが起動します
📖 使い方ガイド
.pugファイルを開くだけで、自動的に拡張機能が有効になります。
- 移動と検索:
- 定義元へジャンプするには
F12キーかCtrl+クリック
- ファイル構造を表示するには
Ctrl+Shift+O
- プロジェクト内を検索するには
Ctrl+T
- 入力支援:
- コードを入力すると自動的に候補が表示されます
- 要素にマウスを置くと詳しい情報が表示されます
- mixinの後に
(を入力すると引数情報が表示されます
- 整形ペースト機能:
Ctrl+V（Macの場合はCmd+V）または右クリックメニューから使えます
- Cursorでは
Ctrl+Shift+VまたはCmd+Shift+Vで動作します。
🐛 注意点と制限事項
- 複雑なフォルダ構造: 特殊なプロジェクト構造では、
includeやextendsのパス解決がうまく機能しない場合があります。
- 大規模プロジェクトでの動作: 非常に多くのPugファイル（数千個）がある大きなプロジェクトでは、検索機能などが少し遅くなることがあります。
お礼と参考にした技術
- JetBrains IDE（WebStorm、IntelliJ IDEAなど）の優れたPug対応機能を参考にしています。
- Pug.jsチームが提供している**
pug-lexerとpug-parser**ライブラリを利用しています。
- VS Codeチームの提供する拡張機能開発用APIとドキュメントに感謝します。
Lisence
This project is licensed under the MIT License, see the LICENSE file for details
| |
