How to create your own custom VS code snippets.

Code snippets can be very useful and can potentially increase productivity and reduce input errors.

With snippets we can insert commonly used code blocks and can create boilerplate templates saving us keystrokes.

Snippets in VS code are written in JSON and to create your own custom snippet.

Snippets can be configured through Preferences (Ctrl + Shift + P) -> Configure User Snippets.

It should look something like this.

Snippets can be configured for every file or specific languages in their JSON file.

Every snippet has 3 main properties

1. prefix - Shortcut by which it will be called.
2. body - Actual code to be inserted
3. description - Description of the code

This is a custom snippet with prefix arfc for generating a React component. It works in following steps.

1. Imports React
2. Creates a functional React component with placeholder name functionName
3. Returns an empty div
4. exports the component

It will yield this code.

Another one of my favorite is

The ftcData will inject this piece of code

A very good tool to generate custom snippets is this Snippet Generator, which works for Sublime and Atom as well.

A very popular VS code extension for JavaScript, React, React-Native, Redux snippets