Creating Custom Visual Studio Code (VSCode) Snippets

Hi, today i’m going to tell how can we create a custom snippet for vscode. Btw this is my first english blog so if you like this blog please clap and support me.

First Step: Open the VSCode

Okay now we must open vscode then we’ll open the code > prefences > configure user snippets.

Then we choose “New Global Snippets File” in the pop-up window

Type your snippets name. Mine is “screen” for react native.

Now delete to command line and write your snippets.

Example:

This is vscode’s example for users. But we need to customize for us.

Customized Example:

React Native Blank Screen

React Native Blank style.js file

So if i need to explain the code samples:

First: We give a name for our snippets (React Function Screen & React Function StyleSheet).

Second: We give a shortcut ~ prefix for our snippets ( screen & style ).

Third: We write our code line by line. If you want to use “tab”, you should use $1, $2, $3, $4 or ${1:Blank Text1}, ${2:Blank Text2}, ${3:Blank Text3}, ${4:Blank Text4}

Fourth (Optional) : We write the snippet description and it’s done.

Thanks for reading. If you want to more content you should follow me.