✨ 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

React Arrow Function Components

Components with Props (TypeScript)

Concise Components (Less Verbose)

Props Interfaces

React Hooks

Custom Hooks & Patterns

JavaScript ES6+ Features

Destructuring

Array Methods

Import/Export

Promises & Async

JSON Operations

Console & Debugging

Utilities

🌐 HTML Snippets

Metatags & SEO

🐍 Python Snippets

Core Python

Dictionary Operations (Object Methods Equivalent)

List/Array Methods

List Operations

Advanced Loops

Dictionary Comprehensions

Class Definitions (Auto-Capitalization)

Decorators & Utils

HTTP & Networking

Exception Handling

Utility Collections

🎨 CSS Snippets

CSS Reset & Boilerplate

Layout & Flexbox

Transitions & Timing

🎬 Animation Library (animate:...) - GAME CHANGER

Ready-to-use professional animations with keyframes and classes. Just add the class to your element!

Utility Styles

📋 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