Features
- Create custom code snippets with your own keywords
- Use tabstops ($1, $2, etc.) to navigate through snippet insertion points
- Include choice options with ${1|option1,option2,option3|}
- Support for multiple languages (JavaScript, TypeScript, React, HTML, CSS, PHP, Python)
- Easy to add new templates through command or settings
Installation and Activation
Build the extension:
- Navigate to the extension directory in the terminal:
cd d:\extension_custom
- Run
npm install -g vsce if you don't have the vsce tool installed
- Run
vsce package to create a .vsix file
Install in VS Code:
- Open VS Code
- Go to Extensions view (Ctrl+Shift+X)
- Click the three dots (...) at the top right of the Extensions panel
- Select "Install from VSIX..."
- Navigate to your extension directory and select the created .vsix file
- Reload VS Code when prompted
Alternative development mode installation:
- Open the extension directory in VS Code
- Press F5 to run the extension in debug mode
- This will open a new VS Code window with the extension loaded
Using the Extension
Insert predefined templates:
- Type a keyword (e.g., "homepage") in your code
- The snippet will appear in the suggestions list
- Press Tab or Enter to insert the complete template
Current available templates:
homepage : Creates a React Home component with styling
Task Manager App Snippets:
task_addtask : React component for adding new tasks
task_app : Main App component for task manager
task_approute : Routes configuration for task app
task_detailtask : Task details display component
task_edittask : Component for editing existing tasks
task_footer : Footer component with navigation
task_header : Header component with navigation bar
task_home : Home page component for task app
task_rootpage : Root layout component for task app
task_store : Redux store configuration for task app
task_task : Task component for displaying individual tasks
task_taskcard : Reusable task card component
task_taskform : Form component for task creation/editing
task_taskslice : Redux slice for task state management
task_usefetch : Custom hook for API data fetching
task_usetask : Custom hook for task operations
E-commerce Shop Snippets:
shop_app : Main App component with Redux Provider and Router setup
shop_approutes : Routes configuration for shop app
shop_cartmodal : Modal component for shopping cart
shop_cartslice : Redux slice for shopping cart state
shop_checkoutpage : Checkout page component
shop_deliveryorderslice : Redux slice for order management
shop_footer : Footer component for shop layout
shop_header : Header component with navigation
shop_homepage : Home page component for shop
shop_orderspage : Orders history page
shop_productcard : Reusable product card component
shop_productslice : Redux slice for product management
shop_productspage : Products listing page
shop_rootpage : Root layout component
shop_store : Redux store configuration for shop app
Star Products App Snippets:
star_app : Main App component for Star Products
star_appcss : CSS styles for Star Products App
star_index : Index CSS styles for Star Products
star_main : Main entry point with React 18 setup
star_productdetail : Product detail view component
star_productform : Form for product creation/editing
star_productlist : Product listing component
star_productslice : Redux slice for product management
star_store : Redux store configuration for Star Products app
| |