GeekImage

Creating custom snippets in Visual Studio Code?

Jai Lakhmani on Tue Jul 19 2022

What is Visual Studio Code?

Visual Studio Code or vscode is Microsoft's most popular IDE(integrated
development environment). It was created on 29 April 2015 for the sole
purpose of Web development. But after sometimes it started supporting other
languages like Java, PHP, Python, C++, etc. It combines the simplicity of a
source code editor with powerful developer tooling, like IntelliSense code
completion and debugging.

If you are a coder you must have worked on vscode sooner or later. 

What are vscode Snippets?

Code snippets are templates that make it easier to enter repeating code
patterns, such as loops or conditional statements.VS Code has built-in snippets
for several languages such as JavaScript, TypeScript, Markdown, and PHP. But
for a coder, these snippets are not enough.

How to create your Custom Snippets?

Creating a custom snippet is easy, just follow the given steps.

  • Open vscode. 
  • Click on the manage icon on the bottom left.
  • Click on Configure UserSnippets.
Configure User SnippetsNew Snippets
  • Click on New Snippets.
  • Enter the name of your Snippet.
Geek-Snippets
  • Specify the scope of your Snippet. Be aware if you have specified the language your snippet won't work in any other programming language. And if you have not specified the
    scope, your snippet will work in every language. 
  • Specify the prefix. A prefix is a shortcut to your snippet. You can just have to type your prefix to call your snippet. 
Boiler Plate
  • Enter the Snippet body you want to create inside the body tag. 

Here you can user \n and \t give next-line and
tab-space respectively. Here you can specify where to point your cursor
automatically when the snippet is called. Specify $1 to point your first
cursor, and $2 for the next cursor, and so on.

  • Save the snippet.   

Now just write your snippet prefix in your file to see it in action

Geekloop

Screenshot (145).png