Reading list Switch to dark mode

    CS-Cart VS Code Snippet Extension

    Updated 1 June 2023

    Efficiency and productivity are essential in the realm of coding. Developers are constantly looking for methods to improve productivity and save time.

    One powerful feature in Visual Studio Code (VS Code) that can greatly boost productivity is the capacity to build customized code snippets.

    What are snippets in VS Code?

    Code templates that may be quickly added to your code files are called VS Code snippets. They are shortcuts for regular or repetitive code patterns, which can help you save a lot of time and effort.

    Follow these steps to make your own VS Code snippet extension:

    1: Set up a new VS Code extension project:

    • If you haven’t already, download and install Node.js and npm (Node Package Manager).
    • Run the following command to install the Yeoman generator for VS Code extensions: Open your terminal or command prompt.
    npm install -g yo generator-code
    • Create a new folder for your extension project and navigate to it.
    • Run the following command to create your extension’s fundamental structure:
    yo code
    • Select the New Code Snippet option
    VS Code
    • Please fill out all the fields after selecting the New Code Snippet option to construct the directory structure for the VS Code Snippet extension.
    VS Code snippet extension
    • Below is a diagram of the directory structure.

    2: Create a Snippet:

    • Find the snippets folder in your extension project directory.
    • Create a new code-snippets file and name it something like “mySnippet.code-snippets” to represent your snippet.
    • Define your snippet in the code-snippets file using the format shown below.
    {
        "Register Hooks":{
            "prefix": "regHooks",
            "body": [
                "if (!defined('BOOTSTRAP')) { die('Access denied'); }",
                "",
                "fn_register_hooks (",
                "\t'${1:hook_name}'",
                ");"
            ],
            "description": "Template for Register CS-Cart Hooks for scheme 3.0"
        }
    }
    • The ‘prefix’, ‘body’, and ‘description’ fields should be modified to correspond to the snippet you want to use.

    3: Update the extension manifest:

    • Open the ‘package.json’ file in the extension project’s root directory.
    • Find the “contributes” field and add or update the “snippets” section:
    {
      "name": "webkul-cs-cart-snippets",
      "displayName": "Webkul CS-Cart Snippets",
      "description": "This extension allows developers to use snippets for CS-Cart.",
      "version": "0.0.1",
      "engines": {
        "vscode": "^1.78.0"
      },
      "repository": {
    		"type": "git",
    		"url": "https://github.com/webkul/webkul"
    	},
    	"icon": "icon.png",
    	"publisher": "Webkul Software Pvt. Ltd.",
      "categories": [
        "Snippets"
      ],
      "contributes": {
        "snippets": [
          {
            "language": "php",
            "path": "./snippets/snippets.code-snippets"
          }
        ]
      }
    }
    • Adjust the “language” and “path” fields to match your snippet’s language and file path.

    4: Run the extension and test it:

    • In the project root of your extension, launch a terminal or command prompt
    • Press Ctrl+Shift+P to open the command palette in Visual Studio Code (or Cmd+Shift+P on a Mac).
    • Select Debug: Restart and click enter button.
    • Go to the Home directory of your system and find the folder with the name .vscode (this will hidden folder press ctrl + H to show the hidden files)
    • There will be an extensions folder inside this folder; open it and paste the extension code (ex: webkul-cs-cart-snippets folder) inside.
    • Restart the VScode editor after closing it if the extension isn’t listed.
    • Inside the Vscode editor, go to the extension
    • Create a PHP file and check the snippet.
    Screenshot-from-2023-05-31-12-59-38
    Screenshot-from-2023-05-31-12-59-52

    There you go! The VSCode snippet plugin you made is simple.

    You can change the way the snippets behave, add more snippets, or give your extension new features.

    Find the Best CS-Cart
    Development Company
    Find out More

    For additional information on extension development, see the VSCode extension documentation.

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home