Visual Studio Code with React

A few years back I worked on a web development project for a client where I used Facebook’s React as the main development framework.

For code writing, I’d previously used JetBrains’s WebStorm as my main editor, but on this project, I opted to try out VS Code which was gaining some traction in the dev world, and to be frank, I just fell in love.

I recently formatted my laptop to start fresh and I came back to set it up for some more web development work. As a reference for me in future, and for you to possibily use if you are just starting out, this is how I set up my Code environment, specifically for React on the Windows platform.

This is just a start to go from nothing to a working environment. I will add things like linting and other extensions as I go.

Let’s go!

Install Chocolatey

I’ve found web development in general to be quite bitty with a requirement for lots of small packages even to do the most basic of things. This can get messy, so I’ve found using a central Windows package manager to look after all of it to be quite useful.
The best of these is Chocolatey.

Head to the Chocolatey install page and follow the guide to install it with a few easy PowerShell scripts.
As I do love a good GUI, I like to install Chocolatey GUI to act as a nice, easy to use front end where I can see all the packages I have installed on my machine.

Install Node.js & Yarn

You don’t need to be using node as your apps backend, but it does need to be installed to enable NPM which is used to fetch packages for your web apps.
Search for and install the latest version using Chocolatey, or you can find a classic Windows installer over at nodejs.org.

While you are here, you can install yarn which is another package manager. This one was created by Facebook and uses the same registry as npm but does some other fancy stuff like caching downloaded packages

Install VS Code

Time to install the editor - grab it from here and install away.

Once installed, open up a new terminal windows and run node –version  & npm –version to check everything is working

Change the default Terminal to VS2019 Developer Command Prompt

Out the box, Code will use PowerShell as the default built-in terminal. I like to use the Developer Command Prompt and you switch to this by modifying the settings.json file for your Code installation.

In VS Code, press Ctrl+Shift+P to open the command palette. Start typing “Settings” and select Preferences: Open Settings (JSON) to open the raw view of your settings file.
On a clean installation, this should be empty.

Copy and paste the below into this file, and hit Ctrl+S to save the file. Restart will be required!

{
    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
    "terminal.integrated.shellArgs.windows": [
        "/k", "C:\\Program Files (x86)\\Microsoft Visual Studio\\2019\\Professional\\Common7\\Tools\\VsDevCmd.bat"
    ]
}

The Visual Studio Command Prompt is really just an instance of the default command line tool with a batch file passed in as an argument. This batch file does a bunch of stuff which includes setting up environment variables.

This batch file, as well as other build tools, are installed along with most versions of the full Visual Studio. If you don’t have 2019 you can modify the file path to point to another version (and it might be worth checking the file exists in said location).

If you dont have Visual Studio 2019, or you want to use the build tools for 2019 but dont want to install the full product, toy can download the build tools for free from the visual studio downloads page, expanding Tools for Visual Studio 2019 and hitting download next to Build Tools for Visual Studio 2019

Create-React-App

Let’s create a base React app using one of the many base templates. For this example I’ll create one using the fakebook’s own create-react-app.

In the VS Code terminal, navigate to the folder where you like to keep your source code - be it “Source”, “Repos”, “DevProjects” or other such name, and then run the relevant command for whichever package manager you want to use.

I’m using yarn so yarn create react-app my-app does the trick for me, where my-app is the top-level name for the project.

Have a browse through the create-react-app documentation on GitHub for more information on what it does and how to do it with other package managers

In the terminal window you will see your manager resolve, fetch and link packages and install react, react-dom & react-scripts.

When thats done If you check your source folder you should have a top-level folder named after the value you supplied for my-app and inside are all the base files for your new app.

In VS Code, open this folder by pointing to File -> Open Folder and you will see the project has now been opened in the editor.

In the terminal, spin up your new project by running yarn start and the template should run successfully.

Extensions

VS Code is Extension based. If you want to add more functionality to the app, you need to install (or even create) an extension. Here are a few I like to use

Material Icon Theme by Philipp Kief - Changes the default icon for different file types in the explorer tree view

Debugger for Chrome by Microsoft - Enables debugging in the Chrome browser