{"id":384639,"date":"2023-06-01T13:19:17","date_gmt":"2023-06-01T13:19:17","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=384639"},"modified":"2023-06-01T13:19:24","modified_gmt":"2023-06-01T13:19:24","slug":"cs-cart-vs-code-snippet-extension","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/cs-cart-vs-code-snippet-extension\/","title":{"rendered":"CS-Cart VS Code Snippet Extension"},"content":{"rendered":"\n
Efficiency and productivity are essential in the realm of coding. Developers are constantly looking for methods to improve productivity and save time. <\/p>\n\n\n\n
One powerful feature in Visual Studio Code (VS Code) that can greatly boost productivity is the capacity to build customized code snippets.<\/p>\n\n\n\n
What are snippets in VS Code?<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
Follow these steps to make your own VS Code snippet extension:<\/h2>\n\n\n\n
1: Set up a new VS Code extension project:<\/strong><\/h3>\n\n\n\n
\n
If you haven’t already, download and install Node.js and npm (Node Package Manager).<\/li>\n\n\n\n
Run the following command to install the Yeoman generator for VS Code extensions: Open your terminal or command prompt. <\/li>\n<\/ul>\n\n\n\n
npm install -g yo generator-code<\/pre>\n\n\n\n
\n
Create a new folder for your extension project and navigate to it.<\/li>\n<\/ul>\n\n\n\n
\n
Run the following command to create your extension’s fundamental structure: <\/li>\n<\/ul>\n\n\n\n
yo code<\/pre>\n\n\n\n
\n
Select the New Code Snippet<\/strong> option <\/li>\n<\/ul>\n\n\n\n<\/figure>\n\n\n\n
\n
Please fill out all the fields after selecting the New Code Snippet option to construct the directory structure for the VS Code Snippet extension.<\/li>\n<\/ul>\n\n\n\n<\/figure>\n\n\n\n
\n
Below is a diagram of the directory structure.<\/li>\n<\/ul>\n\n\n\n\n<\/figure>\n<\/figure>\n\n\n\n
2: Create a Snippet:<\/strong><\/h3>\n\n\n\n
\n
Find the snippets folder in your extension project directory.<\/li>\n\n\n\n
Create a new code-snippets<\/strong> file and name it something like “mySnippet.code-snippets”<\/strong> to represent your snippet.<\/li>\n\n\n\n
Define your snippet in the code-snippets file using the format shown below.<\/li>\n<\/ul>\n\n\n\n
The ‘prefix’<\/strong>, ‘body’<\/strong>, and ‘description’<\/strong> fields should be modified to correspond to the snippet you want to use.<\/li>\n<\/ul>\n\n\n\n
3: Update the extension manifest:<\/strong><\/h3>\n\n\n\n
\n
Open the ‘package.json’<\/strong> file in the extension project’s root directory.<\/li>\n\n\n\n
Find the “contributes”<\/strong> field and add or update the “snippets”<\/strong> section:<\/li>\n<\/ul>\n\n\n\n
Adjust the “language”<\/strong> and “path”<\/strong> fields to match your snippet’s language and file path.<\/li>\n<\/ul>\n\n\n\n
4: Run the extension and test it:<\/strong><\/h3>\n\n\n\n
\n
In the project root of your extension, launch a terminal or command prompt<\/li>\n\n\n\n
Press Ctrl+Shift+P<\/strong> to open the command palette in Visual Studio Code (or Cmd+Shift+P<\/strong> on a Mac).<\/li>\n\n\n\n
Select Debug: Restart<\/strong> and click enter button.<\/li>\n\n\n\n
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)<\/li>\n\n\n\n
There will be an extensions folder inside this folder; open it and paste the extension code (ex: webkul-cs-cart-snippets folder) inside. <\/li>\n\n\n\n
Restart the VScode editor after closing it if the extension isn’t listed.<\/li>\n\n\n\n
Inside the Vscode editor, go to the extension<\/li>\n<\/ul>\n\n\n\n\n<\/figure>\n<\/figure>\n\n\n\n
\n
Create a PHP file and check the snippet.<\/li>\n<\/ul>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n
There you go! The VSCode snippet plugin you made is simple. <\/p>\n\n\n\n
You can change the way the snippets behave, add more snippets, or give your extension new features. <\/p>\n\n\n\n
![\"VS](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-from-2023-05-31-11-08-52.png\")
<\/figure>\n\n\n\n![\"VS](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-from-2023-05-31-11-28-32.png\")
<\/figure>\n\n\n\n![\"Screenshot-from-2023-06-01-17-52-12\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/Screenshot-from-2023-06-01-17-52-12.png\")
<\/figure>\n<\/figure>\n\n\n\n![\"Screenshot-from-2023-06-01-17-55-46\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/Screenshot-from-2023-06-01-17-55-46.png\")
<\/figure>\n<\/figure>\n\n\n\n![\"Screenshot-from-2023-05-31-12-59-38\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/Screenshot-from-2023-05-31-12-59-38.png\")
<\/figure>\n\n\n\n![\"Screenshot-from-2023-05-31-12-59-52\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/Screenshot-from-2023-05-31-12-59-52.png\")
<\/figure>\n\n\n\n