Guide: Development Environment Setup

git

Navigate to: https://git-scm.com/ (opens in a new tab).

Click on "Downloads" -> "Windows" -> "Click here to download". a

Run the installer executable using the defaults for all installation steps.

GitHub Account

Navigate to https://github.com/ (opens in a new tab).

Create an account if you do not have one. Choose a username that will work well for your professional portfolio. Avoid using a username that contains the word "SAIT". My GitHub username is oakinbode and you can view my public repositories here: https://github.com/oakinbode/ (opens in a new tab).

Login to your GitHub account.

GitHub Desktop

Navigate to https://desktop.github.com/ (opens in a new tab).

Click "Download for Windows (64 bit)" and then run the installer executable.

During installation, click "Sign into GitHub Desktop" and it will use the same account as the previous step.

Close GitHub Desktop app for now.

GitHub Student Developer Pack

Navigate to https://education.github.com/pack (opens in a new tab).

Click "Sign up for Student Developer Pack" and follow the instructions. (You may have already completed this application from CPRG-203.) This will give you access to a number of free software tools, e.g. GitHub Copilot.

Node.js

Navigate to https://nodejs.org/en/ (opens in a new tab).

Download the LTS (long term service) version. Run the installer executable using the defaults for all installation steps.

Visual Studio Code

Note: If you already have VS Code installed, you can skip this step.

Navigate to https://code.visualstudio.com/ (opens in a new tab).

Click "Download for Windows" and run the installer executable. During installation accept the agreement and using the defaults for all installation steps.

Visual Studio Code Extensions

Open VS Code, click the extensions button on the left or press Ctrl + Shift + x.

Search for and then install each of the following extensions:

• GitHub Copilot

  • After installation, click "Sign In" in the pop-up near the bottom right corner of the window and follow the instructions.

• Prettier - Code formatter

  • After installation, perform the following steps to configure it:
    1. Press Ctrl + Shift + p to open the command palette.
    2. Type "format document with" and select "Format Document With..."
    3. Configure default formatter
    4. Choose prettier
  • I also recommend enabling "format on save" enabled by following these steps:
    1. Press Ctrl + , to open the settings.
    2. Search for "format on save" and check the box.

• Tailwind CSS Intellisense

• Code Spell Checker