Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>BCNNew to Visual Studio Code? Get it now.
BCN

BCN

dev

|
11 installs
| (0) | Free
BCN
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft