Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>codelab snippetsNew to Visual Studio Code? Get it now.
codelab snippets

codelab snippets

codelab

|
9 installs
| (5) | Free
| Sponsor
✨ Handy code snippets for fast and efficient development - React, TypeScript, Python, HTML metatags, CSS animations, and Notion-style Markdown documentation
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

✨ 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

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft