- Visual Studio Code (Recommended) and Plugins
- Git for Windows
- Node.js and NPM Packages
- Chrome (Recommended) or Firefox
- Slack
Visual Studio Code is an IDE, which is an intelligent code editor. We will be teaching with Visual Studio Code and highly recommend that you use it too. If you are experienced with programming and command line, and you believe that you can translate whatever we teach you in Visual Studio Code to your editor of choice, you may opt for another editor, but we will not be able to help you if problems arise.
To install, go to https://code.visualstudio.com and click on Download for Windows.
When it finishes downloading, double click on the downloaded .exe file and accept the License Agreement. You will accept all of the defaults until you get to the Select Additional Tasks screen. I suggest that you check everything below. You should definitely check Add to PATH.
Continue with the installer. When it finishes, Visual Studio Code should open. When it does, close out of it for now. We will revisit Visual Studio Code once we finish installing a few dependencies.
You are required to use Git Bash because it supports Unix style commands. If you have Git installed but not Git Bash, then you should remove Git and follow the instruction below to reinstall.
Git is version control software. It is used for sharing code, combining team members' code and managing different versions of your code.
To install git, got to https://git-scm.com/downloads and click on Windows.
When it finishes downloading, open the installer. If you are asked to allow the app to make changes to your device, click on Yes. Below is the recommended git settings. If you do not see instructions for whatever screen you are on, then accept the defaults.
I suggest you check the following:
If you intalled Visual Studio code, select Use Visual Studio Code as Git's default editor from the dropdown. If you opt for another code editor, you can select it from the list. If it's not there, then choose nano.
To avoid unnecessary merge conflicts (believe me, merge conflicts are very frustrating), please make sure Checkout Windows-style, commit Unix-style line endings is selected.
When you finish installing, you should see Git Bash on your computer. Open it, type git --version to confirm that it works. You should see something like git version 2.20.1. Then close out of Git Bash.
Node.js is a JavaScript runtime engine. Basically, it allows you to run JavaScript programs outside of the browser.
You will need to have the latest LTS version of Node installed as of February 4, 2019 (10.15.1). If you already have Node.js installed, type node -v in Git Bash. If you do not have the latest version, you will need to remove Node.js and reinstall it again.
If Node.js is up-to-date, you should update NPM. You can update it with:
npm install -g npm@latestTo install Node.js, go to https://nodejs.org/en/ and click on the 10.15.1 LTS version.
When it finishes downloading, open the downloaded file. Accept the License Agreement and all of the defaults. If you are asked to allow the app to make changes to your device, click on Yes.
When it’s finished installing, open Git Bash and type node -v to confirm that it has installed. If you had Git Bash open before installing Node.js and you get an error, try reopening Git Bash and see if this resolves the issue.
ESLint is a linter, meaning that it will point out potential errors while you are typing in a code editor like Visual Studio Code, Atom or Sublime.
To install ESLint and its React plugin, type this in Git Bash:
npm install -g eslint
npm install -g eslint-plugin-reactWhen it’s finished, type eslint -v to confirm that it has installed.
In Visual Studio Code, press ctrl+shift+p, search for default shell and select Terminal: Select Default Shell. Then choose Git Bash.
Press ctrl+`. If Git Bash opens inside of Visual Studio Code, then it worked.
Open the Extensions tab on the left, search for ESLint and install ESLint.
Once its installed, click on Reload.
Quokka.js is a sandbox that lets you play with JavaScript inside Visual Studio Code and other popular code editors. Search for Quokka in the Extensions tab on the left and install Quokka.js. Once its installed, click on Reload.
If Quokka prompts you to go Pro, select 'Community' features only.
If you get this Windows Security Alert from Windows when running Quokka, make sure both options are checked and click on Allow access.
Prettier automatically formats your code and you can configure it to format your code whenever you save a file. Installing this is optional for now but we will require it for the final project.
If you would like to use prettier, search for Prettier in the Extensions tab on the left and install Prettier - Code formatter. Once its installed, click on Reload.
You can now adjust Visual Studio's settings so that it will format on save and will play nicely with Prettier's defaults. Press ctrl+, and click on the {} icon in the top right.
In the right-hand panel underneath where it says "USER SETTINGS", append the options to the list and then save. Do not overwrite any settings that you already have.
"editor.formatOnSave": true,
"editor.insertSpaces": true,
"editor.tabSize": 2,
You are required to use Chrome or Firefox because the React and Redux extensions for debugging your code are only available for these browsers. We recommend Chrome because we will be demostrating Chrome's tools in class, but you are free to download any of following:
Before installing Slack, please accept the invite to AlbanyCanCode's channel (albanycancode). You should have received an email before class.
Use can use the web or desktop version. If you would like to use the desktop version, go to https://slack.com/downloads/windows and click on a download option.