Setting Up a Web Development Environment with Git, GitHub, and VS Code - johnverz22/webdev1-lessons GitHub Wiki

Setting Up a Web Development Environment with Git, GitHub, and VS Code

This guide will walk students through setting up a web development environment using Git and GitHub with the command line, along with Visual Studio Code (VS Code) and essential extensions for efficient development.

Prerequisites

Step 1: Install and Configure Git

git_github

  1. Verify Git Installation: Open a terminal and run:

    git --version

    If Git is not installed, download and install it from the link above.

  2. Set Up Global Configuration: Configure your Git username and email (this will apply globally to all repositories on your computer):

    git config --global user.name "Your Name"
git config --global user.email "[email protected]"

Step 2: Create a New Repository on GitHub

  1. Log in to GitHub and click the + icon in the top-right corner > New repository.
  2. Fill in the repository name and description.
  3. Choose Public or Private.
  4. Click Create repository.
  5. Copy the repository HTTPS URL.

Step 3: Set Up Your Local Repository

  1. Open a terminal and navigate to your project folder:

    cd path/to/your/project

  2. Initialize a Git repository:

    git init

  3. Connect your local repository to GitHub:

    git remote add origin https://github.com/your-username/repository-name.git

Step 4: Perform Basic Git Operations

  1. Stage Changes: Add files to the staging area:

    git add .

  2. Commit Changes: Save changes to the repository:

    git commit -m "Initial commit"

  3. Push to GitHub: Log in and push changes:

    git push -u origin main

  4. Pull updates from GitHub: Log in and pull(download) updates:

    git pull -u origin main
    • This will fetch latest update from remote repository to local working directory.

git_workflow

Clone an Existing Repository

If existing GitHub repository is present, you can clone it down to your development computer. Follow the following steps.

  1. Copy the repository URL from GitHub.
  2. In the terminal, navigate to the directory where you want to clone the project: 
    cd path/to/your/desired/folder
  3. Clone the repository: 
    git clone https://github.com/username/repository-name.git
  4. Open the cloned folder in VS Code: 
    code repository-name

Logging Out of GitHub on Shared Computers

On Windows

  1. Open the terminal and run:

    git credential-manager github list

    This lists all the currently logged accounts.

  2. To logout individual listed account run:

    git credential-manager github logout <username>

On macOS/Linux:

Clear saved credentials from the Git credential store:

git credential-cache exit

Install and Use VS Code Extensions

  1. Open VS Code: Navigate to your project folder and open it in VS Code:

    code .

  2. Install Extensions:

    • Prettier:
      • Search for "Prettier - Code Formatter" in the Extensions Marketplace.
      • Install it to automatically format your code.
      • Configure Prettier in settings.json: 
        {
  "editor.formatOnSave": true,
  "prettier.singleQuote": true,
  "prettier.tabWidth": 2
}
    • Live Server:
      • Search for "Live Server" in the Extensions Marketplace.
      • Install it to launch a development server and preview your changes in real time.
      • To use Live Server, right-click an HTML file and select Open with Live Server.

  3. Brief Explanation of Tools:

    • Prettier: Ensures consistent code formatting across your project, making your code cleaner and easier to read.
    • Live Server: Automatically refreshes the browser whenever you save changes, enhancing development efficiency.
⚠️ **GitHub.com Fallback** ⚠️