The most perfect setup you could have for React and Node in VS Code.

As web developers working with multiple technologies and frameworks like React, Node, Express, Redux, we all have to deal with multiple files, directories, libraries, packages etc. It becomes overwhelming when the code bases are very large and it is difficult to keep track of things. So to make your lives easier, I will help you setup Visual Studio Code in such a way that will help you save a lot of time and effort.

Must have VS Code extensions.

There are a few extensions available in Visual Studio Code which will greatly enhance your experience and productivity while developing web apps. I will list some of them.

1) Auto Rename Tag: This extension automatically renames paired HTML/XML tags, For example, you have an HTML document which looks like: <div> ... </div> and we want to change this tag to <body>....</body>. For this, we have to edit both the opening and closing tag. But with this extension, the closing tag gets automatically renamed whenever you edit any opening tag. This will save your time specially when you have to edit huge html documents.

2) Prettier – Code formatter: This extension will help you format your code files with all the proper spacing, newlines etc. to make it more readable and easier to debug. Once you install this extension, go to settings, in the search box, type format on save and set it to true. This will automatically format your code whenever you will save your files (Ctrl + S).

3) Bracket pair colorizer: This extension colors the opening and closing pairs of brackets used in the code (curly, square and normal) using multiple colors. This improves the aesthetics of your code and helps you identify opening and closing bracket pairs with a glance of eye.

Notice that the opening and closing pairs of brackets have been colored appropriately.

4) ES7 React/Redux/GraphQL/React-Native snippets: Many times you have to write repetitive code for boilerplate which consumes a lot of time. This extension gives multiple shortcut codes to write such repetitive code. For example, if you have created a file called Login.js and you want to write the following code in it:

import React from 'react'

const Login = () => {
  return (
    <div>
      
    </div>
  )
}

export default Login

Instead of typing it, all you have to do is type rafc and press Enter. This extension will already write the above code with const name according to your file name.

Chrome extensions for React/ Redux.

1) React Develper Tools: For React developers, Facebook offers a cool extension called React Developer Tools on Chrome webstore. This extension can show you the root React components that were rendered on the page, as well as the subcomponents that they ended up rendering. By selecting one of the components in the tree, you can inspect and edit its current props and state as well. This tool comes in handy to keep track of state, props and loaded components in your application

Using React Developer Tools to view components and their props.

2) Redux DevTools: This chrome extension is made for developers who are using Redux for state management. To use it, download it from webstore, and in the store.js file of your application (where you define your createStore() method), you have to make few changes as shown below:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {};

const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  composeWithDevTools(applyMiddleware(...middleware))
);

export default store;

Also in your package.json file, under the “dependencies” tree, add the following line:

"redux-devtools-extension": "^2.13.8",

This will allow the Redux DevTools extension to access your app state. Now open your chrome developer tools (Ctrl + Shift + J) and select Redux to access it.

Using Redux DevTools to check action types and states.

Server management tools.

1) Nodemon: Are you tired of restarting your server every time you make changes in your code in order to test it live? With nodemon, you can auto restart your server without typing any command on your terminal whenever you make file changes. Here is a post I found which explains how to setup and use nodemon: Restart Your Node.js Apps Automatically Using nodemon . Now whenever you will save your files after making changes, server will restart automatically and quickly as well, thus saving your time.

2) Concurrently: Concurrently is a tool to run multiple servers using a single command. Suppose you are building a fullstack web app using Node, Express as backend and React as frontend. So, to run your application, you have to open two terminals, run backend in one and frontend in other one. But with concurrently, you can use a single command to run both servers at the same time. This single command will trigger both servers in the background, thus saving you from the pain of doing so. Here is the official npm page of concurrently which tells you how to install and use it.

That’s it folks! With this setup, you will be coding your web apps more efficiently like a pro! Hope you liked the article. Comment in case of any doubts. Also check out my articles on medium and follow me on twitter. Also check out my other articles on this blog as well!

Leave a Reply

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