CodeStitch Helper is a VSCode extension designed to streamline working with CodeStitch components in both Eleventy (11ty) and Astro projects. It provides framework-specific optimizations and shared utilities for working with HTML, CSS, forms, and images.
🚀 Getting Started
Installation
Open Visual Studio Code
Navigate to the Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
When you open an Eleventy or Astro project, the extension will:
Auto-detect your project type based on config files and dependencies
Display a notification showing the detected project type
Load framework-specific commands for your project
You can manually change the project type anytime via the CodeStitch Helper sidebar.
📋 Features
🎯 Framework-Specific Features
Eleventy Projects
Replace Nav Tabs - Convert static navigation to 11ty dynamic markup with eleventyNavigation
Optimize Images - Convert <picture> elements to use Sharp Images plugin with getUrl filters
Setup Sharp Images - Quickly install and configure the Sharp Images plugin for your project
Astro Projects
Optimize Images - Convert <picture> elements to use Astro's <Picture> component
Image Picker UI - Select images from your assets folder with alt text input
Import Management - Automatically adds imports to frontmatter
Smart Image Optimization - Detects if image is already local and only prompts for alt text
🔧 Shared Features (Available in All Projects)
Add cs-icon Class to SVGs - Automatically adds the cs-icon class to SVG elements
Convert to Netlify Forms - Converts forms to Netlify-compatible format with reCAPTCHA integration
Section Navigation - Navigate between CodeStitch sections in large files
Go to Styling - Jump directly from HTML section to its CSS definition
Optimize Stylesheets - Convert stylesheet links to inline critical CSS
Download SVG Assets - Batch download SVG assets from CDN to local files
Download Remote Images - Batch download all remote images from HTML files and save them locally
Replace Remote Images - Choose a local image to replace a remote image URL
Reorder Sections - Reorganize CSS sections to match HTML structure
Open in CodeStitch - Quick link to view components on CodeStitch website
💡 CodeLens Integration
The extension adds context-aware inline action buttons above relevant code elements. Click these buttons to quickly perform common tasks without opening the command palette:
