Using Git with Visual Studio Code (Official Beginner Tutorial)

Using Git with Visual Studio Code (Official Beginner Tutorial)

Introduction to Source Control and Git

Overview of Source Control

  • Source control, also known as version control, is essential for tracking code and files over time.
  • Git is a program specifically designed for managing source code, while GitHub serves as an online repository hosting service.
  • Visual Studio Code simplifies the integration of Git and GitHub into the development workflow.

Setting Up Your Repository

Initializing a Repository

  • Ensure that Git is installed before starting; installation details can be found on the official site.
  • To initialize a repository in Visual Studio Code, open an existing folder with files and navigate to the source control panel to click "initialize repository."

Branch Management

  • The default branch name after initialization is "Main," which can be renamed using the command palette (Shift+Command+P). For example, it can be temporarily changed to "test branch."
  • Newly added or modified files appear as untracked ('U') until they are staged by clicking the '+' sign next to them. Once staged, they will show as tracked ('A').

Committing Changes

Staging and Committing

  • After staging changes, you must commit them with a descriptive message (e.g., "first commit") for informational purposes. This action is completed by clicking the check mark above the message box.

Branching for New Features

Creating New Branches

  • For new features or code additions, create a separate branch via the command palette (Shift+Command+P) by typing "create branch" and naming it (e.g., "new features"). The active branch will reflect this change at the bottom left corner of Visual Studio Code.

Tracking Changes in Files

  • When editing files, Visual Studio Code visually indicates changes: green lines represent new lines added, blue lines indicate modified lines, and red arrows show deleted lines in the gutter area beside line numbers.

Reviewing Changes

Managing File Changes

  • Icons under 'changes' allow users to open files directly or discard/stage changes made across multiple files efficiently within Visual Studio Code.

Comparing File Versions

  • Built-in diff functionality allows side-by-side comparison of file versions without needing external tools; users can switch between inline view and side-by-side view for better clarity on changes made.

Merging Branches

Merging Feature Branches into Main

  • To merge changes from a feature branch back into main, use the three-dot menu option to select 'merge branch,' choosing your feature branch as the source for merging into main. This updates main with all reflected changes from your feature work.

Publishing to GitHub

Publishing Process

  • To publish your local repository to GitHub, select 'publish branch.' You will need to authenticate through GitHub's extension prompts before proceeding with either public or private repository options during setup.

Cloning Repositories

Cloning Existing Repositories

  • Cloning involves copying an existing repository URL from GitHub; paste this URL into Visual Studio Code's command palette after selecting 'Git clone.' Specify where you want it cloned locally when prompted by Visual Studio Code's interface.

Conclusion on Common Practices

  • The video covers fundamental practices such as creating repositories/branches, staging/committing changes, pushing code via UI interactions, merging branches effectively, and cloning projects—essential skills every developer should master when using Git with Visual Studio Code.
Video description

A brief/compact intro to #Git & #GitHub made easy with #visualstudiocode 0:00 Intro 0:35 Initialize repository 0:55 Rename branch 1:25 Staging files 2:00 Committing files 2:10 Create new branch 2:40 Gutter overview 3:30 Comparing files / inline view 4:30 Merging branches 5:00 Publish to Github 6:00 Clone repository 6:20 Summary Host: @ReynaldAdolphe Download Git: https://git-scm.com/downloads More on #SourceControl #VisualStudioCode & #Git at https://aka.ms/vsc-git See other #intro #tutorials at https://aka.ms/VSCodeIntroPlaylist Also see #VSCode #TikToks at https://www.tiktok.com/@vscode #git #github #vscode