- Microsoft Teams
- Visual Studio Code (Recommended) and Plugins
- Git for Windows and Github
- Node.js (latest LTS version) and NPM Packages
- Chrome or Firefox (Recommended)
Before class began, you should have received emails and training from CanCode Communities about on how to install, setup, and use Microsoft Teams.
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 the 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 the Download Windows Universal dropdown and select the Stable version.
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. Here are the settings that I use. Be sure to 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.
We would like you to install 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.
You will need to create a Github account if you do not have one.
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:
We recommend you select Use Visual Studio Code as Git's default editor from the dropdown. If you prefer another code editor, you can select it from the list.
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.37.3. Then close out of Git Bash.
Node.js is a JavaScript runtime engine. It allows you to run JavaScript programs outside of Chrome, Safari, Edge or another web browser.
You will need to have the latest LTS version of Node installed as of October 2022 (16.x). 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 16.x.x 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.
To install ESLint, type this in Git Bash:
npm install -g eslintWhen it’s finished, type eslint -v in Git Bash to confirm it has installed.
In Visual Studio Code, press ctrl+shift+p, search for terminal and select Terminal: Select Default Profile. 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, the Install button may have transformed into a Reload button. If you see Reload, click on it.
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 necessary.
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. Using this is optional for now but we will require it for group projects.
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 if necessary.
You can now adjust Visual Studio's settings so that it will format on save and will play nicely with Prettier's defaults. Press command+shift+p, search for settings and click on Preferences: Open Settings (JSON)).
Paste the following into the JSON file. Do not overwrite any settings that you already have.
"editor.formatOnSave": true,
"editor.insertSpaces": true,
"editor.tabSize": 2,You should use any modern browser that has good Developer Tools available. (In other words, not Internet Explorer). We recommend Chrome because we will be demonstrating Chrome's tools in class, or Firefox: