CS-Cart VS Code Snippet Extension

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

Please fill out all the fields after selecting the New Code Snippet option to construct the directory structure for the 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