GumGo Preview

VS Code extension แสดง preview ของ Go HTML template (Fiber/Gin/Echo/Chi) — คลิก control บนฟอร์มเพื่อกระโดดไป Go handler / route / JS function / struct field / SQL

Features

• Render .html / .gohtml / .tmpl / .php ใน webview พร้อม CSS จากโปรเจกต์ (auto-detect web/static, static, public/static, ฯลฯ)
• Strip Go template syntax {{...}} ให้แสดงเป็น ⟨FieldName⟩ แทน
• PHP preview (NEW): ไฟล์ .php ที่มี HTML ปนอยู่ — strip โค้ด PHP ทิ้ง โดย <?= $user->name ?> / <?php echo $row['hn']; ?> แสดงเป็น ⟨user.name⟩ / ⟨row.hn⟩ ส่วน control flow (if/foreach) และ logic block หายไป เหลือ HTML เพียว ๆ
• Laravel Blade preview + click-to-jump (NEW v0.8): ไฟล์ .blade.php —
  • {{ $user->name }} / {!! ... !!} → ⟨user.name⟩, {{ old('hn') }} → ⟨hn⟩, @extends/@include → ⟪tpl: x⟫
  • @if/@foreach/@csrf/@error ฯลฯ หายไป เหลือ HTML (CSS @media ใน <style> ไม่โดนแตะ)
  • {{ asset('css/app.css') }} → โหลด CSS จาก public/ ให้, layout auto-detect ที่ resources/views/layouts/
  • Submit form ที่ action="{{ route('patients.store') }}" → กระโดดไป Route::post(...) ใน routes/web.php → chain ต่อไป method ใน Controller
  • คลิก <input name="X"> → กระโดดไป $request->input('X') / request('X') / key ใน validate([...])
• PHP click-to-jump (NEW v0.7): คลิก control ใน preview ของไฟล์ .php →
  • <input name="X"> → กระโดดไปบรรทัดที่อ่าน $_POST['X'] / $_GET['X'] / $_REQUEST['X']
  • <form action="/save.php"> → กระโดดไปไฟล์ save.php
  • onclick="fn()" → กระโดดไป JS function ใน <script> ของไฟล์ .php และ chain ต่อผ่าน fetch('/api/x.php') ไปยังไฟล์ปลายทาง
  • Auto re-index เมื่อ save ไฟล์ .php
• คลิก <input>, <select>, <textarea>, <button>, <form> → กระโดดไป:
  • Direct reads (Fiber/Gin/Echo): c.FormValue("X"), c.PostForm("X"), c.Form("X")
  • Query reads: c.Query("X"), c.QueryParam("X")
  • Path params: c.Params("X"), c.Param("X"), c.PathValue("X")
  • Struct fields by tag (NEW v0.5): กรณีใช้ c.BodyParser(&req) / c.ShouldBindJSON(&req) — extension จะเจอ field declaration ที่มี \json:"X"`` หรือ \form:"X"`` ตรงกัน
  • Routes: r.Post("/path", h.Handler) → resolve handler function declaration
  • Group chains (NEW v0.5): app.Group("/api") → api.Group("/users") → users.Get("/") รวมเป็น GET /api/users อัตโนมัติ
  • JS handlers: function/arrow function ที่ชื่อตรงกับ id ของ element หรือชื่อใน onclick="X()"
  • Chain via JS → fetch URL → Go route → handler ที่มี SQL
• Generic router variable (NEW v0.5): รองรับชื่อตัวแปรอะไรก็ได้ (auth, protected, users, api, ฯลฯ) ไม่ใช่แค่ r/app/router
• รองรับ Fiber, Gin, Echo, Chi (heuristic regex)
• Auto rebuild Go index เมื่อ save .go file

Settings

Usage

เปิดไฟล์ template (เช่น internal/templates/pages/patient_register.html) แล้ว:

• คลิก context menu icon บน editor title → GumGo: Preview Template
• หรือ Ctrl+Shift+P → GumGo: Preview Template
• หรือคลิกขวาที่ไฟล์ใน Explorer → Open With... → GumGo Preview

Build

cd D:\VsCodeExtension\GumGoPreview
npm install
npm run build           # development
npm run package         # production (minified)
npx @vscode/vsce package --no-dependencies --allow-missing-repository --skip-license
code --install-extension gumgo-preview-0.1.0.vsix

ข้อจำกัด

• Static preview เท่านั้น — ค่าใน {{.X}} แสดงเป็น ⟨X⟩ placeholder ไม่มี data จริง
• Click-to-jump ใช้ regex-based indexer — แม่นมากกับ pattern ที่ใช้กันแพร่หลาย แต่ pattern ที่ซับซ้อนพิเศษอาจหลุด (เช่น routes ที่สร้าง path จากตัวแปร, struct binding ผ่าน middleware ที่ inject เอง)
• ยังไม่รองรับ templ (Go templ language) — เฉพาะ html/template ของ stdlib