React Pro Tip: Use code snippets to increase your productivity and write better code

Code snippets are templates that make it easier to input repeating code patterns such as import statements, React components etc. You can start typing a small prefix e.g. edccs and press Tab or select one of the suggestions to expand it to a multi-line snippet, as shown above.

I really like code snippets, for a variety of reasons:

  • They save time (duh!), since typing 5 characters is faster than typing 50.

Editors like Visual Studio Code make it really easy to create custom code snippets. There are also several extensions that provide code snippets for Javascript, ES6 and React.

I’ve used many of these extensions in the past, but over time I’ve created a set of custom snippets (inspired from existing ones) that are optimized to work well with VS Code’s Intellisense. I recently published them as an extension, and you can download them here:

To enable code completion for filenames and npm modules, you’ll have to add this to your User Settings:

  "editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true
}

Following are some of the snippets I find most useful. The rest are documented on the extension page.

imn : ES6 named imports

  • Notice how you can type the module/file name first. As you start typing, it is auto-completed.

imdn : ES6 default import

  • If you’re importing from a relative path, it’s auto-completed as you type.

imrc : Import React & Component

  • To import just React, use imr.

sl : Stateless component

  • The name of the file is used as the component name, and can be modified if required.

edccs: Component class (with export default)

  • The name of the file is used as the component name, and can be modified if required.

container: Redux container component

While you may or may not find this set of snippets particularly useful, you should definitely look for ones that suit your use case, or consider writing your own. And if you’re part of a team, you should consider having a common set of snippets everyone can use.

Founder, Jovian