https://github.com/iuritorres/codelab-snippets
✨ Handy code snippets for fast and efficient TypeScript development
https://github.com/iuritorres/codelab-snippets
components hooks interface javascript jsx next props react reacthooks snippets tsx typescript
Last synced: 5 months ago
JSON representation
✨ Handy code snippets for fast and efficient TypeScript development
- Host: GitHub
- URL: https://github.com/iuritorres/codelab-snippets
- Owner: iuritorres
- License: mit
- Created: 2025-06-28T21:10:43.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-07-05T02:51:26.000Z (6 months ago)
- Last Synced: 2025-07-18T23:22:57.769Z (5 months ago)
- Topics: components, hooks, interface, javascript, jsx, next, props, react, reacthooks, snippets, tsx, typescript
- Language: JavaScript
- Homepage:
- Size: 149 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ✨ 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:
```typescript
function ComponentName () {
return (
);
};
```
### Component with Props (Concise)
Type `ercp` and press Tab:
```typescript
interface ComponentProps {
prop: string;
}
export const Component = ({ prop }: ComponentProps) =>
;
```
### useState Hook
Type `state` and press Tab:
```typescript
const [count, setCount] = useState(0);
```
### useEffect with Async
Type `effecta` and press Tab:
```typescript
useEffect(() => {
const fetchData = async () => {
try {
} catch (error) {
console.error(error);
}
};
fetchData();
}, [dependencies]);
```
### Arrow Function
Type `af` and press Tab:
```typescript
const functionName = (params) => {};
```
### Python Class (Auto-Capitalization)
Type `class` and press Tab, then type `myclass`:
```python
class MyClass:
def __init__(self, args) -> None:
pass
```
### Python List Comprehension
Type `lc` and press Tab:
```python
[expression for item in iterable]
```
### Python Dictionary Operations
Type `dkeys` and press Tab:
```python
dictionary.keys()
```
### Terminal Colors Utility
Type `utils:terminalcolors` and press Tab:
```python
"""
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:
```markdown
# 📅 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:
```javascript
JSON.stringify(object, null, 2);
// Perfect for debugging - formatted with 2-space indentation
```
Type `parse` and press Tab:
```javascript
JSON.parse(jsonString);
// Convert JSON string back to JavaScript object
```
### �📚 Markdown API Documentation
Type `/api` and press Tab:
```markdown
# 🔌 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:
```css
@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:
```css
* {
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](./CHANGELOG.md).
---
## 🛠️ Development
This extension was built for the Codelab community to speed up React/TypeScript development.
**Author**: [iuritorres](https://github.com/iuritorres)