SnippetCraft is a powerful Visual Studio Code extension designed to streamline your development workflow by allowing you to create, manage, and use code snippets for HTML, CSS, and JavaScript efficiently. Whether you're a solo developer or working in a team, SnippetCraft helps maintain code consistency and speeds up repetitive coding tasks.
Available Snippets & Trigger Keys
HTML Keys
Title
Trigger Key
D9 HTML Structure
!!
Slick-plugin
script:slick
Validation Plugin
script:validation
new section
new section
Get Started Link
.cta-btn
Flex wrap
.flex-wrap
content section
.content-sec
Image wrap div
.img-wrap
Picture tag with img
picture tag
Picture tag with lazy
webp-img
Picture tag lazy true
webp-img-noscript
Logo Section
.logo-section
Section title h2 only
.sec-title
Grid
.grid-wrap
Learn more
.learn-more
learn more with arrow
.learn-more
zcpopup-controller
.popup-video
lazy-img
lazy-img
Signup Wrap
.signup-box
Default Slick Slider
.slick-slider-single
Pricing section
.pricing-value
Pricing Tax information
.tax-info
Disclaimer
.disclaimer
Banner Wrapper
.banner-wrap
Trust Wrapper
.trust-wrap
Testimonial Wrapper
.testimonial-wrap
Integration Wrapper
.integration-wrap
FAQ Wrapper
.faq-wrap
Accordion Wrapper
.accordion-wrap
Range Slider Wrapper
.rangeslide-wrap
Mobile App Wrapper
.mobile-app-wrap
Rating Wrapper
.rating-wrap
Badge Wrapper
.badge-wrap
Recognition Wrapper
.recog-wrap
Comparison Table Wrapper
.comp-table-wrap
Pricing Wrapper
.pricing-wrap
Product Stats Wrapper
.prod-stats-wrap
Security Wrapper
.security-wrap
Product Dashboard
.prod-dashboard
Bottom CTA Wrapper
.bottom-cta-wrap
Header Promo
.header-promo
Popup Promo Wrapper
.popup-promo-wrap
Sticky Wrapper
.sticky-wrap
Tab section with four tabs
.tab-section
Accordion section with panels
.accordion-section
JavaScript Keys
Title
Trigger Key
Animation script
animation
Image lazy
lazy
setRowClass
row
Default Slick Slider
.slick-slider-single
Promotion header
.promotion
Tab Section JS
.tab-section-js
Accordion JS
.accordion-js
Features
Custom Snippet Generation: Easily create and manage your own snippets for HTML, CSS, and JavaScript.
Seamless Integration: Works directly within VS Code, allowing quick access to saved snippets.
Team Collaboration: Share snippets across team members for a consistent coding standard.
WCAG Compliance Controls: Includes accessibility-focused snippets to help build WCAG-compliant web applications.
Intuitive UI: Simple and user-friendly interface for managing your snippet library.
WCAG Compliance Controls
To ensure accessibility in web development, SnippetCraft provides predefined snippets that help implement WCAG (Web Content Accessibility Guidelines) standards:
ARIA Attributes: Snippets for adding ARIA roles, labels, and properties to improve screen reader support.
Keyboard Navigation: Code snippets for ensuring elements are keyboard accessible (e.g., focus management, skip links).
Color Contrast & Readability: CSS snippets for maintaining proper color contrast ratios.
Form Accessibility: Predefined HTML structures for accessible forms, including labels, input attributes, and error messages.
Semantic HTML: Quick templates for structuring pages using proper semantic elements.
Installation
Open Visual Studio Code.
Go to Extensions(Ctrl + Shift + X on Windows/Linux, Cmd + Shift + X on macOS).
Search for SnippetCraft.
Click Install and reload VS Code if necessary.
Usage
Open a new file or existing project.
Use the snippet prefix to insert preconfigured HTML, CSS, or JavaScript snippets.
Press Tab to navigate through placeholder values and customize the code.
