BCN

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

1. 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

2. 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

3. 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

1. 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

2. 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