Preview and validate GitHub issue templates (YAML format) directly in VS Code with live rendering and syntax validation!
Features
🔍 Live Preview: See your GitHub issue templates rendered in real-time as you edit
✅ Full Support: Handles all GitHub issue template field types (markdown, textarea, input, dropdown, checkboxes)
🎨 Native Styling: Uses VS Code's theme colors for seamless integration
📝 Validation: Instantly spot YAML syntax errors
🚀 Lightweight: Fast, efficient, and works entirely offline
Usage
Open any GitHub issue template file (.yml or .yaml)
Open the Command Palette (Cmd+Shift+P on macOS or Ctrl+Shift+P on Windows/Linux)
Type "Preview GitHub Issue Template" and select the command
A preview pane will open beside your editor
The preview updates automatically as you edit the template
Supported Template Features
This extension supports all GitHub issue template field types:
Markdown: Display formatted content
Textarea: Multi-line text input fields
Input: Single-line text input fields
Dropdown: Select menus with options
Checkboxes: Multiple checkbox options
Also supports:
Template name and description
Default issue title
Labels and assignees
Required field indicators
Field descriptions with markdown formatting
Example Template
name: Bug Report
description: File a bug report to help us improve
title: "[Bug]: "
labels: ["bug", "triage"]
assignees: ["username"]
body:
- type: markdown
attributes:
value: |
## Thanks for reporting a bug!
Please fill out the information below.
- type: textarea
id: what-happened
attributes:
label: What happened?
description: Tell us what you expected vs what actually happened
placeholder: Describe the bug...
validations:
required: true
- type: dropdown
id: severity
attributes:
label: Severity
options:
- Critical
- High
- Medium
- Low
validations:
required: true
Requirements
Visual Studio Code version 1.85.0 or higher
Installation
From VS Code Marketplace (Recommended)
Open VS Code
Press Cmd+Shift+X (macOS) or Ctrl+Shift+X (Windows/Linux)
Search for "GitHub Issue Template Preview"
Click Install
Contributing
Contributions are welcome! Please see CONTRIBUTING.md for details.
Development Setup
Clone the repository:
git clone https://github.com/reespozzi/github-issue-template-preview.git
cd github-issue-template-preview
Install dependencies:
npm install
Open in VS Code:
code .
Press F5 to launch the Extension Development Host
Make your changes and test them in the development host
Run tests:
npm test
Known Issues
Complex markdown features (code blocks, tables) in field descriptions are not fully rendered yet
No support for GitHub issue form schema validation (coming soon)
See the issues page for a complete list of known issues and feature requests.
