Essential tools for developing NodeJS,React applications in Visual Studio Code
Visual Studio code is a very popular text editor among developers nowadays . It has lots of benefits over its competitors . One who is not familiar with Visual Studio code might not find things appealing about it at first glance with just installing the core software. Its power lies in its extensions and visual studio marketplace. This article is aimed at first time Visual studio code users who want to get a professional feel about it .Experienced developers can just skim through the extension names to see whether or not you are familiar with the extensions or not.
Firstly I will make some changes in the settings .
Brings up the settings by navigating to File → preferences → settings (ctrl + , )

You will be greeted with the below interface . I have written which is what inside little text boxes. take a look at the below picture

Now what you need to do is navigate to the settings like the new below pic .

After you select that you will come to the below screen . Here we have greater control over the settings . take the time to familarize yourself with the below image and then continue to read .

React front end needs jsx as markup .But the default emmet does not produce abbreviation for jsx by default. So we need to add two settings in the setting . We need to add “javascript” : “javascriptreact” to “emmet.includeLanguages” and “javascript”: “jsx” to “emmet.syntaxProfiles”.
Another thing I use is the “git-bash” on windows instead of power-shell . Download it from here .
https://git-scm.com/download/win
You can also install the Linux bash if you desire. It is available on the windows store. download that if you want to use that from the store . Command prompt and powershell are installed by default in windows. You can choose any integrated terminal by adding any of the following code in the user settings .
// Command Prompt
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe"
// PowerShell
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
// Git Bash
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe"
// Bash on Ubuntu (on Windows)
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\bash.exe"Below is my default settings :

Another setting option you need to remember is “editor.formatOnSave” it is set to “false” by default .Set it to “true” when you install a code formatter.

So my json object for the “user settings ”is the below one :
{"editor.fontSize": 18,"editor.tabSize": 2,"editor.wordWrap": "on","terminal.integrated.fontSize": 18,"emmet.includeLanguages": {"javascript" : "javascriptreact"},"emmet.syntaxProfiles": {"javascript": "jsx"},"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe","editor.formatOnSave": true}
Extensions :
So up until now we have made changes to the settings option . Now we will install extensions for plugins for Visual studio code . Many of these custom extensions are the reason visual studio code has become such a popular text editor among developers.
Bring up the extensions tab by pressing (ctrl + shift + x) then type in the extension name then “Install” and “Reload”.
ES7 React/Redux/GraphQL/React-Native snippets :
This is a must have extension if you want to use React as a front end . It brings up code snippets for react which can increase productivity. Read the detail section and you will know what to type for which snippet.

Bracket Pair Colorizer :
This is a plugin which is helpful to many .It helps you keep track of your closure by coloring the brackets of different closures in different colors.

Prettier — Code formatter :
This is exactly what it does . It is a code formatter. It helps to format your code .You need to have “editor.formatOnSave” to true as I mentioned above . for this to work .
another popular code formatter is beautify (HookyQR) . Always install one in any instance or you might get unexpected results .
Sometimes codes formatter’s change your code from lowercase to uppercase .In those cases investigate how to edit that setitng for an extension.

Live server :
This plugin does a very simple task which is to refresh the application on the browser when you make changes to the code. When you are stressed out over code these little inconveniences will hurt you more . God bless this guy .

Node.js Modules Intellisense :
This plugin auto completes your JavaScript / TypeScript modules in import statements . Which saves you the time of looking at your directory .

nodemon :
This is not a plugin but you need to install it on every project as a “dev- dependency ”. What it does is essentially restart the server every time you make changes to the code and save it .
Install it to your node project by typing in the terminal :
npm install -g nodemonThe above code is for installing nodemon globally on your machine .So all of your projects get access to it .but it is not recommended as nodemon versions can differ by project.
So it is best to use this :
npm install --save-dev nodemonyou can now start the project by typing(server.js is the entry point)
nodemon server.jsAnother thing you might want to do is set the “start” object as “nodemon server.js” in the “package.josn” file .Here “server.js” is my launch page.
"scripts": {
"start": "nodemon server.js",
}Now you will be able to start the application by typing “npm start”
These were the plugins I use now in development with my Visual studio code editor . In the end it all comes down to preference . These were the plugins I like, you might like something else . In cases you like some other plugins I would like to know what it does and why you like it more . Please feel free to share it with me .
Thanks for reading .
