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

https://marketplace.visualstudio.com/items?itemName=aakashns.react-power-snippets

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:

  • The help avoid typos and common mistakes, like forgetting to extend React.Component, forgetting the export default etc. which can sometimes lead to rather cryptic errors.
  • They can help enforce coding conventions and maintain consistency across the codebase e.g. you can use a code snippet to ensure that name of the exported component matches the filename ( MyComponent.js exports MyComponent).
  • By eliminating the need to type boilerplate code, they help avoid the frustration of typing import React from 'react' and export default XYZ extends React.Component dozens of times, and thereby encourage you to write several small single-responsibility components .

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

  • Then, as you start typing inside the { }, the item name is auto-completed, since the editor knows where you're importing from.

imdn : ES6 default import

  • If the imported item’s name is same as the filename, it can be auto-completed by the editor too, which is neat!

imrc : Import React & Component

sl : Stateless component

  • If the component has no props, make sure to delete the {}.
  • For a stateless component without a return statement, use slr.

edccs: Component class (with export default)

  • To create a component class without the export default, use ccs.

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

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