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.

arfc result

Another one of my favorite is
fetch data

The ftcData will inject this piece of code

fetch api

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
vs code extension


Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

Easily create presentation board using React

RailTel Corp, C-DoT to Help India With Telecom Expansion