✨ 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

Metatags & SEO

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