Recently I’ve been learning how to develop user interfaces using React on VSCode. And one of the things I liked about it are the available extensions that makes development easier. Now this list contains an extension that is specific to React but the others are mostly extensions that, in my opinion, enhances the overall experience while using VSCode.

So far, here’s the list of extensions that I found very useful:

ES7 React/Redux/GraphQL/React-Native snippets

As the (lengthy) name suggests, this is a collection of ES7-compliant code snippets for React, Redux, GraphQL and React Native. Yes, I just re-stated what the name said. It basically saves a whole bunch of keystrokes which is why this is helpful when developing React UIs.

Instead of typing out import React from 'react';, I would just need to type imr then hit tab.

Instead of typing out import PropTypes from 'prop-types';, I just type in impt then hit tab.

For importing other modules like custom ones or from third-parties, instead of typing out import customModuleName from 'customModule';, I just type imp then hit tab, type in whatever is the actual name of customModule is then hit tab again to type in the corresponding customModuleNamethen another tab which brings me to the end of the line for the ;

You call it lazy, I call it productive! Potayto, potahto.

 

ESLint

This extension integrates ECMAScript (ES) standards and code linting (Lint) into VSCode. It checks your code as you type it and generates suggestions if it finds some patterns of code that does not follow the (coding) standards set.

Without being technical about it and its origin, ECMAScript is a standard that is followed by scripting languages which includes JavaScript.

Code Linting on the other hand is a type of static code analysis that finds pieces of code that does not adhere to the standards and/or is problematic from the point of view of certain coding guidelines.

There’s a wide range of configurable settings that can be fine-tuned to fit your coding style or just follow the default. What I like about this is that it give suggestions on how to fix your code and is also non-obtrusive.

 

Prettier – Code Formatter

This extension re-writes your code based on a specific set of (configurable) rules which then forces a consistent coding style. This actually works hand-in-hand with ESLint – at least with how I configured my VSCode settings.

Are you using tabs or spaces? What tab size are you using for JS? How about your brackets, are they inline or next line? When will we start wrapping code when a one-liner is too long?

The code re-write can be triggered manually for the whole file or for a code selection via key bindings. It can also be triggered for the whole file before committing code in your repository using pre-commit hooks or automatically upon saving the changes you made in VSCode.

 

IntelliSense for CSS Class Names in HTML

When you have bootstrap, material design, font awesome, themes and other custom styles for your UI, CSS class names can sometimes be hard to remember. With the IntelliSense for CSS Class Names in HTML extension, you get an auto-suggested class name once you start typing on the class or className attribute. It also throws in auto-completion for added laziness productivity. It caches the CSS class definitions on your workspace and on files referenced through the link element in the html header.

 

Bracket Pair Colorizer

Have you ever wasted time looking for that missing closing bracket because of your elegantly copy-pasted written code? Fear no more as Bracket Pair Colorizer …erm… colorizes your bracket pairs!

Angle brackets/chevrons requires a bit of tinkering as well as custom character brackets but works well with square brackets and round brackets/parenthesis and curly brackets/braces/handlebars/mustache. Unless of course if you are color blind… wait, I think this can be configured for that too.

 

Honorable Mentions

JavaScript Console Utils

CTRL+SHIFT+L gives you console.log();

Select a variable then CTRL+SHIFT+L gives you console.log('variable_name: ', variable_name);

CTRL+SHIFT+D removes all console.log statements in the current document.

Code Spell Checker

Because who wants to read code AND comments with wrong spelling, right? Yeah right, comments on your code. Haha.