✨ Codelab Snippets
💡 Philosophy
Our snippets are designed to be intuitive and conversational - you type what you want, almost like speaking your intention. With our latest UX improvements, every snippet now has clear, descriptive titles and helpful explanations:
erfc
→ "Function Component (Exported)" - Create exported React function component
erafcp
→ "Arrow Component with Props (Exported)" - Create exported React arrow component with TypeScript props
statets
→ "useState with TypeScript" - Create typed state with explicit TypeScript interface
effecta
→ "useEffect Async Pattern" - Create effect hook with async function and error handling
animate:pulse
→ "Animation - Pulse Effect" - Breathing pulse effect - perfect for call-to-action buttons 🎬
utils:terminalcolors
→ "Terminal Colors Utility Module" - Complete terminal color utilities module with ANSI codes
forenum
→ "For Loop with Index (Enumerate)" - Iterate with both index and value using enumerate
/meeting
→ "Meeting Notes Template" - Complete meeting documentation with agenda and action items 📝
The goal is to make coding feel like having a conversation with your editor, while also learning best practices through clear descriptions. No more memorizing cryptic abbreviations! 🗣️💻✨
🚀 Features
This extension provides a wide range of snippets for multiple languages that help you write code faster:
- ⚛️ React Components - Function/Arrow components with TypeScript support
- 🪝 React Hooks - useState, useEffect, custom hooks, and advanced patterns
- 🔧 JavaScript ES6+ - Modern syntax, async/await, destructuring, modules, JSON operations
- 🌐 HTML Snippets - Professional metatags, SEO optimization, and document structure
- 🐍 Python Utilities - Classes, loops, comprehensions, HTTP requests, decorators
- 🎨 CSS Animations - Professional animation library with ready-to-use effects
- 📝 Markdown Documentation - Notion/Confluence-style slash commands for professional docs
- 🌐 HTML Integration - JavaScript and CSS snippets work seamlessly in HTML files
React Function Components
Prefix |
Description |
rfc |
Function Component (Basic) - Basic component (not exported) |
erfc |
Function Component (Exported) - Create exported component |
edrfc |
Function Component (Default Export) - Component with default export |
React Arrow Function Components
Prefix |
Description |
rafc |
Arrow Component (Basic) - Basic arrow component (not exported) |
erafc |
Arrow Component (Exported) - Create exported arrow component |
edrafc |
Arrow Component (Default Export) - Arrow component with default export |
Components with Props (TypeScript)
Prefix |
Description |
rfcp |
Function Component with Props - Function component with TypeScript props interface |
erfcp |
Function Component with Props (Exported) - Exported function component with TypeScript props |
edrfcp |
Function Component with Props (Default Export) - Function component with props and default export |
rafcp |
Arrow Component with Props - Arrow function component with TypeScript props |
erafcp |
Arrow Component with Props (Exported) - Exported arrow component with TypeScript props |
edrafcp |
Arrow Component with Props (Default Export) - Arrow component with props and default export |
Concise Components (Less Verbose)
Prefix |
Description |
rcp |
Component with Props (Concise Function) - Concise component with pre-filled props |
racp |
Component with Props (Concise Arrow) - Concise arrow component with inline JSX |
ercp |
Component with Props (Concise Exported) - Concise exported component with destructured props |
ricp |
Inline Props Component - Component with inline props type definition |
Props Interfaces
Prefix |
Description |
iprops |
Props Interface Definition - Create TypeScript interface for component props |
tprops |
Props Type Definition - Create TypeScript type alias for component props |
React Hooks
Prefix |
Description |
state |
useState Hook - Create state variable with setter using useState hook |
effect |
useEffect Hook - Create effect hook that runs once on component mount |
effectd |
useEffect with Dependencies - Create effect hook with dependency array |
effectc |
useEffect with Cleanup - Create effect hook with cleanup function for unmount |
context |
useContext Hook - Access React context value using useContext hook |
reducer |
useReducer Hook - Create state management with reducer pattern |
memo |
useMemo Hook - Memoize expensive computation with useMemo hook |
callback |
useCallback Hook - Memoize function with useCallback hook |
ref |
useRef Hook - Create mutable ref object with useRef hook |
leffect |
useLayoutEffect Hook - Layout effect hook (runs synchronously after DOM mutations) |
imperative |
useImperativeHandle Hook - Customize instance value exposed by ref |
usedebug |
useDebugValue Hook - Display label for custom hook in React DevTools |
Custom Hooks & Patterns
Prefix |
Description |
hook |
Custom Hook Template - Create custom React hook with state and effect |
hookr |
Custom Hook with Return Object - Create custom React hook with flexible return object |
statets |
useState with TypeScript - Create typed state with explicit TypeScript interface |
effecta |
useEffect Async Pattern - Create effect hook with async function and error handling |
formhook |
Form State Management Hook - Create form state hook with input change handler |
JavaScript ES6+ Features
Prefix |
Description |
af |
Arrow Function |
afi |
Arrow Function (Inline) |
aaf |
Async Arrow Function |
asf |
Async Function |
co |
Const Declaration |
le |
Let Declaration |
Destructuring
Prefix |
Description |
dob |
Destructure Object |
dar |
Destructure Array |
drest |
Destructure with Rest Operator |
Array Methods
Prefix |
Description |
map |
Array Map Method |
filter |
Array Filter Method |
reduce |
Array Reduce Method |
find |
Array Find Method |
foreach |
Array ForEach Method |
Import/Export
Prefix |
Description |
imp |
Import Default |
imn |
Import Named |
ima |
Import All as |
exp |
Export Default |
exn |
Export Named |
Promises & Async
Prefix |
Description |
prom |
Promise |
tca |
Try Catch Async |
JSON Operations
Prefix |
Description |
stringify |
JSON Stringify Formatted - Convert object to formatted JSON string with 2-space indentation |
parse |
JSON Parse - Parse JSON string into JavaScript object |
Console & Debugging
Prefix |
Description |
cl |
Console Log |
cw |
Console Warn |
ce |
Console Error |
ctable |
Console Table |
cclear |
Console Clear |
cassert |
Console Assert |
ctime |
Console Time |
cgroup |
Console Group |
Utilities
Prefix |
Description |
tl |
Template Literal |
okeys |
Object.keys() |
ovalues |
Object.values() |
oentries |
Object.entries() |
🌐 HTML Snippets
Prefix |
Description |
metatags:seo |
SEO Metatags - Complete SEO optimization with Open Graph support for better search rankings |
metatags:robots |
Robots Metatags - Control search engine indexing and crawling behavior |
metatags:viewport |
Viewport Metatag - Responsive design viewport configuration for mobile optimization |
metatags:charset |
Charset Metatag - UTF-8 character encoding declaration for proper text rendering |
metatags:favicon |
Favicon Metatag - Website favicon integration for browser tabs and bookmarks |
🐍 Python Snippets
Core Python
Prefix |
Description |
main |
Main Script Boilerplate - Create main script entry point for Python executable scripts |
imp |
Import Specific Items - Import specific functions, classes or variables from module |
ima |
Import Module with Alias - Import entire module with custom alias name |
Dictionary Operations (Object Methods Equivalent)
Prefix |
Description |
dkeys |
Dictionary Keys Access - Get dictionary keys view object (equivalent to Object.keys) |
dvalues |
Dictionary Values Access - Get dictionary values view object (equivalent to Object.values) |
ditems |
Dictionary Items Access - Get dictionary key-value pairs (equivalent to Object.entries) |
lkeys |
List of Dictionary Keys - Convert dictionary keys to list for iteration |
lvalues |
List of Dictionary Values - Convert dictionary values to list for iteration |
litems |
List of Dictionary Items - Convert dictionary items to list of tuples |
List/Array Methods
Prefix |
Description |
lc |
List Comprehension - Create new list by transforming elements with expression |
lcif |
List Comprehension with Filter - Create filtered list with condition using comprehension |
map |
Map Function Application - Apply function to all items in iterable (equivalent to JS map) |
filter |
Filter Function Application - Filter items from iterable based on condition function |
lmap |
Lambda with Map - Apply lambda function to all items using map |
lfilter |
Lambda with Filter - Filter items using lambda condition function |
reduce |
Reduce Function (functools) - Reduce iterable to single value using accumulator function |
sort |
Sort List In-Place - Sort list in-place using key function |
sorted |
Create Sorted List - Create new sorted list from iterable using key function |
List Operations
Prefix |
Description |
append |
List Append - Add single item to end of list |
extend |
List Extend - Add all items from iterable to end of list |
remove |
List Remove - Remove first occurrence of item from list |
pop |
List Pop - Remove and return item at index |
index |
List Index - Find index of first occurrence of item |
count |
List Count - Count occurrences of item in list |
any |
Any Function Check - Check if any element in iterable satisfies condition |
all |
All Function Check - Check if all elements in iterable satisfy condition |
Advanced Loops
Prefix |
Description |
forin |
For Loop Iteration - Iterate over items in iterable collection |
forenum |
For Loop with Index (Enumerate) - Iterate with both index and value using enumerate |
forzip |
For Loop with Multiple Iterables (Zip) - Iterate over multiple iterables simultaneously with zip |
forrange |
For Loop with Range - Iterate over numeric range with start, end, and step |
Dictionary Comprehensions
Prefix |
Description |
dc |
Dictionary Comprehension - Create dictionary using comprehension with key-value pairs |
dcif |
Dictionary Comprehension with Filter - Create filtered dictionary using comprehension with condition |
Class Definitions (Auto-Capitalization)
Prefix |
Description |
class |
Class Definition Template - Create Python class with constructor method |
dataclass |
Data Class Definition - Create data class with automatic method generation |
init |
Constructor Method (init) - Create class constructor/initializer method |
str |
String Representation (str) - Create human-readable string representation method |
staticmethod |
Static Method Declaration - Create static method (no self or cls parameter) |
classmethod |
Class Method Declaration - Create class method with cls parameter |
property |
Property with Getter/Setter - Create property with getter and setter methods |
Decorators & Utils
Prefix |
Description |
decorator |
Function Decorator Pattern - Create decorator function with wrapper pattern |
HTTP & Networking
Prefix |
Description |
httprequest |
HTTP Request Template - Create HTTP request with response handling and error checking |
Exception Handling
Prefix |
Description |
tryexcept |
Try-Except Block - Handle exceptions with try-except block |
Utility Collections
Prefix |
Description |
utils:terminalcolors |
Terminal Colors Utility Module - Complete terminal color utilities module with ANSI codes and helper functions |
🎨 CSS Snippets
CSS Reset & Boilerplate
Prefix |
Description |
! |
CSS Complete Reset & Boilerplate - Complete reset with modern boilerplate (REM system, viewport optimization) |
reset:sizing |
CSS Reset - Box Model & Spacing - Reset margin, padding, outline and set box-sizing for all elements |
reset:font |
CSS Reset - Typography & REM System - Setup REM system with optimized font rendering |
Layout & Flexbox
Prefix |
Description |
flex-container |
Flexbox - Complete Container Setup - Create complete flex container with all properties |
flex |
Flexbox - Display Flex - Set element to flex display |
align |
Flexbox - Align Items - Control cross-axis alignment of flex items |
justify |
Flexbox - Justify Content - Control main-axis alignment of flex items |
Transitions & Timing
Prefix |
Description |
transition |
Transition - All Properties - Add transition for all animatable properties |
transition:150 |
Transition - Quick (150ms) - Fast transition for hover effects and micro-interactions |
transition:300 |
Transition - Standard (300ms) - Standard transition for UI interactions |
transition:500 |
Transition - Slow (500ms) - Slow transition for dramatic effects |
🎬 Animation Library (animate:...
) - GAME CHANGER
Ready-to-use professional animations with keyframes and classes. Just add the class to your element!
Prefix |
Description |
animate:pulse |
Animation - Pulse Effect - Breathing pulse for call-to-action buttons and attention-grabbing |
animate:fade-in |
Animation - Fade In - Smooth fade in effect for revealing content and page transitions |
animate:fade-out |
Animation - Fade Out - Smooth fade out effect for hiding content and element removal |
animate:slide-in |
Animation - Slide In - Slide in from left with fade - great for mobile menus and sidebar navigation |
animate:bounce |
Animation - Bounce Effect - Playful bounce effect - ideal for notifications and success messages |
animate:shake |
Animation - Shake Effect - Attention-grabbing shake for error states and form validation |
animate:spin |
Animation - Spin Rotation - Continuous rotation animation - perfect for loading spinners and icons |
animate:zoom-in |
Animation - Zoom In - Scale up with fade in - great for modal appearances and image previews |
animate:zoom-out |
Animation - Zoom Out - Scale down with fade out - perfect for modal exits |
animate:flip |
Animation - Flip Effect - 3D flip effect on Y-axis - cool for card reveals |
Utility Styles
Prefix |
Description |
shadow |
Box Shadow - Subtle Drop Shadow - Add subtle box shadow with customizable values |
rounded |
Border Radius - Fully Rounded - Create perfectly rounded corners for pills/buttons |
📋 Requirements
- VS Code 1.101.0 or higher
- Works with HTML, JavaScript, TypeScript, JSX, TSX, Python, CSS, SCSS, PostCSS, and Markdown files
- HTML files support both CSS and JavaScript ES6+ snippets for seamless development
⚙️ Extension Settings
This extension doesn't add any VS Code settings. Just install and start using the snippets!
💡 Usage Examples
Basic Component
Type rfc
and press Tab:
function ComponentName () {
return (
);
};
Component with Props (Concise)
Type ercp
and press Tab:
interface ComponentProps {
prop: string;
}
export const Component = ({ prop }: ComponentProps) => <div></div>;
useState Hook
Type state
and press Tab:
const [count, setCount] = useState(0);
useEffect with Async
Type effecta
and press Tab:
useEffect(() => {
const fetchData = async () => {
try {
} catch (error) {
console.error(error);
}
};
fetchData();
}, [dependencies]);
Arrow Function
Type af
and press Tab:
const functionName = (params) => {};
Python Class (Auto-Capitalization)
Type class
and press Tab, then type myclass
:
class MyClass:
def __init__(self, args) -> None:
pass
Python List Comprehension
Type lc
and press Tab:
[expression for item in iterable]
Python Dictionary Operations
Type dkeys
and press Tab:
dictionary.keys()
Terminal Colors Utility
Type utils:terminalcolors
and press Tab:
"""
Terminal Color Utilities
A utility module for colorizing terminal output using ANSI escape codes.
Provides a comprehensive set of colors and text formatting options.
...
"""
📝 Markdown Documentation (Notion-Style!)
Type /meeting
and press Tab:
# 📅 Meeting - Project Kickoff
**Date:** 02/07/2025
**Time:** 09:00 - 10:00
**Attendees:** John Doe, Jane Smith
## 📋 Agenda
1. Project Overview
2. Timeline Discussion
3. Resource Allocation
## 📝 Notes
Discussion notes and meeting highlights
## ✅ Action Items
- [ ] Create project roadmap - Responsible: John
- [ ] Setup development environment - Responsible: Jane
## 🔄 Next Steps
Follow-up actions and next meeting scheduling
� JSON Operations (Fast Debugging!)
Type stringify
and press Tab:
JSON.stringify(object, null, 2);
// Perfect for debugging - formatted with 2-space indentation
Type parse
and press Tab:
JSON.parse(jsonString);
// Convert JSON string back to JavaScript object
�📚 Markdown API Documentation
Type /api
and press Tab:
# 🔌 API: User Management
## 📖 Description
Complete user management API with authentication
## 🌐 Base URL
https://api.example.com/v1
## 🔒 Authentication
Bearer Token authentication required
## 🛰️ Endpoints
### GET /users
**Description:** Retrieve all users
**Parameters:**
- `limit` (number) - Maximum number of users to return
**Response:**
{
"users": [...]
}
**Status Codes:**
- `200` - Success
- `401` - Unauthorized
CSS Animation (Game Changer!)
Type animate:pulse
and press Tab:
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.pulse {
animation: pulse 2s infinite;
}
Then just add class="pulse"
to any HTML element for instant professional animation!
CSS Complete Reset
Type !
and press Tab:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
outline: 0;
}
html {
font-size: 62.5%;
}
html,
body {
min-height: 100svh;
max-width: 100vw;
overflow-x: hidden;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
body {
font-size: 1.6rem;
}
🎯 Tips
- All snippets use placeholder variables - press Tab to navigate between them
- Component names are automatically synced across interface and component definitions
- Hook snippets include proper TypeScript support and common patterns
- Choose between verbose (full return blocks) and concise (inline JSX) variations based on your needs
- Use JavaScript ES6+ snippets for modern JavaScript development
- Console snippets help with debugging and performance monitoring
- Python class names automatically capitalize (e.g.,
myclass
→ Myclass
)
- Python snippets mirror JavaScript functionality where applicable (e.g.,
dkeys
= Object.keys()
)
- Use
utils:terminalcolors
for complete terminal color functionality
- Python dictionary operations work seamlessly with modern Python patterns
- 🎬 CSS Animation System (
animate:...
) - Revolutionary approach to animations:
- Each animation snippet includes both
@keyframes
and ready-to-use CSS class
- Just add the class to any HTML element for instant professional animation
- Perfect for modern web apps, landing pages, and interactive components
- CSS Reset & Boilerplate - Type
!
for complete modern CSS foundation
- Flexbox made easy - Complete container setup with property selection
- Transition presets - Quick, Standard, and Slow durations for consistent timing
- HTML Metatags (
metatags:...
) - Professional SEO and document structure:
- Use
metatags:seo
for complete Open Graph and SEO optimization
metatags:viewport
ensures mobile-responsive design
- All metatag snippets follow web standards and best practices
🐛 Known Issues
No known issues at this time. Please report any problems on the GitHub repository.
📝 Release Notes
For detailed release notes and changelog, see CHANGELOG.md.
🛠️ Development
This extension was built for the Codelab community to speed up React/TypeScript development.
Author: iuritorres