Creating Snippets in Visual Studio Code

Visual Studio Code has an easy system to create snippets. If you wish to view Microsofts documentation you can go here.

In this tutorial we will create a simple snippet that will create a Material UI React Functional Component.

To turn on snippets based on tab completion you must enable the setting in your preferences.

Code > Preferences > User Settings

Now go under the user defined snippets section.

Code > Preferences > User Snippets

Select New Global Snippets file.

Name the snippets file React.code-snippets.

Now we will create our first snippet.

The main property is the name of the snippet. The prefix is what you will type to add the snippet into your file. The body is the actual code that will be inserted.

The body is an array of code lines that will be inserted into your file. To add a blank line just add a “”. To add a tab character use “\t”. To add cursors to immediately start typing the name of the component use “$1”.

Now you have a snippet that will create a simple functional component for you.

In Visual Studio Code type “mfc” and hit tab and it will insert the snippet. If you need more information go to the link at the beginning of the article.

Happy Coding!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store