VSCode Custom Snippets Made Life Easy (React & Redux )

User Defined Snippets that increased my productivity.

I have been using VSCode as the primary code editor for my projects. And some of the projects require repeated codes or repeated patterns and structure of code blocks.

Snippets in VSCode comes handy when you have to deal with these situations. Although for most of the frameworks you can get extensions that provide some basic snippets that would fulfill your basic needs. But you always have the situation when you need custom snippets.

So here are some snippets and their transformation techniques I have been using in my project. You may incorporate these techniques in yours to increase your productivity.

How to Configure ?

• Go to View -> Command Palette (Shortcut: Ctrl + Shift + P (Windows))
• Search for Snippet
• And Select Configure User Snippets
• Then select the language for which you want to create the snippets
• For Example. If you select JavaScript You Get default snippet like the one below.
• Snippets are defined in a JSON format. The example below is a console.log snippet you would use for JavaScript:

Default Javascript.json Snippet

As VSCode’s Documentation explains:

• prefix defines how this snippet is selected from IntelliSense and tab completion.
• body is the content and either a single string or an array of strings of which each element will be inserted as separate line.
• description is the description used in the IntelliSense drop down.
• $1, $2 are used to specify cursor locations when pressed Tab.

Some Important information like Tabstops, Placeholders, Choices are explained well on the Documentation site.

But the Variables and Variable Transforms were greater use for me.

Variables and their Transformation

For Inserting variable you can use ${name:default} The default value is set when variable isn’t set. Some of the default useful variables are :

• TM_SELECTED_TEXT The currently selected text or the empty string
• TM_CURRENT_LINE The contents of the current line
• CURRENT_YEAR The current year

Complex Transformation

Transformation follows as ${var/regex/format/regex_options}

• TM_SELECTED_TEXT is the selected Text when you insert Snippet.

([a-z]*)_+([a-z]*) -> Regular Expression

Note: The Above regex finds two regex groups that we can use for further applying text transform on matches.
The $1, $2 are regex Groups matched.

${1:/downcase} -> 1st Regex Matched Group which is transformed to lowercase

We can do '${' int ':' '/upcase' | '/downcase' | '/capitalize' '}'

• /g is the global regex option that suggest don’t return after first match.

Some Helpful Snippets in React Redux Projects

The second one has been most useful one to me as i had to create many actions in my redux applications.

• The All three Request, Success & Failed Actions is created automatically when i create snippet with text fetch_course_details_by_id
• You can use similar concepts creating your snippets helping you to increase productivity.
• Thanks 😄 ✌️

Hope you learned something new?

If you’ve got some suggestions, hit the comment section or send me a tweet!

Original Post:

Saad Hassan