Getting started with git, github & vscode

Before staring

This first two steps are for those who don't have a github account setup in their vscode and don't have the code command installed.

If you know how to do that or you already have them configured, you can skip this step.

Installing the code command

The code command let's you open vscode windos from your terminal in an easy way, reuse windows, etc.

If you don't have the code command installed, you can quickly do it by going to your vscode and type:

cmd shift p | ⌘ + ⇧ + P
This will pop up a search bar (Command Palette) inside vscode.
Type shell command to find Shell Command: Install 'code' command in PATH command
Install it and you're done. Now you can use the code command in your terminal.

Setup your github account

Now that we have the code command, let's setup a github account in order to be able to push and pull changes from our repositories.

The easiest way is to configure git with the same email as your github account and let vscode handle the rest.

Config your name and username

~ git config --global user.name "Your name here"
~ git config --global user.email "your_email@example.com"

Now, assuming you already have a github account, you are done!
Once you make a push vscode will make you login and will setup your peronsal token.

Cloning the project and installing its dependencies

Let's say we want to make changes to this website:

https://github.com/nuwe-io/blog

The first we need to do is clone it and install the dependencies so we can execute it.

If your don't know how to open your terminal using a command, on mac you can open one doing:

cmd space

and then serach for terminal.

Once open, go to the repository you want to clone the project using cd and simply type in your terminal:

git clone https://github.com/nuwe-io/blog

This command will create a new folder for you plus it will have the .git history inside.

After, go to your newly cloned project.

For that you have several ways, you can either use your terminal and open a new vscode window or refresh the vscode window your are using at the moment.

Going back, open your new projec using:

~ cd blog
~ code -r .#Open the project in the same window
~ code . #Open new window

Once there you need to install your project dependencies:

# With npm or yarn (check the repo)
~ npm install
~ yarn install

Project branches, updates and github config

So, the main commands you need to know navigate and make changes to your code are:

git branch: This will let you know the branch you are currently in (usually main or master if you've cloned a repo from github)
git branch branch_name: it will create a new local branch with the branch_name you set.

Local branches and github branches don't have to be the same ones. A local branch will not become a Github / Github / Bitbuket branch, until you push it.

git add .: this will add all your current changes to the branch your are currently in.
git checkout branch_name you'll switch to branch_name and you'll take all your local changes with you to that new branch.
git pull pull(download) changes from the master branch or git pull origin branch_name pull changes from the specified branch.
git push push(upload) changes from the master branch or git push origin branch_name push changes from the specified branch.

With the previous six commands you can navigate and get started with the basics of source control with git and github.

A quite common flow

There are a lot of git control flows, this one is based on scaled trunk-based development (we will talk more about that in another blog).

Clone the project

~ git clone https://yourproject.com

Install the dependencies

~ npm/yarn install

Create a branch, swith to it and start making changes

~ git branch  my-branch-name
~ git checkout my-branch-name

# or with one command
~ git checkout -b my-branch-name

Make your changes to the code
Add all the changes. You can optionally add just some selected folders or files but for now let's add all.

~ git add .

Commit the changes and push to your branch

~ git commit -m "Your commit title. Use something that represents the changes you've done" -m "This is the description and it is optional"
~ git push origin my-branch-name

And, that is all. Now, you can create a pull request (more info in another blog) or let your team manage that.
Go back to your master branch, pull the changes and start again.

~ git checkout master/main
~ git pull origin main

That is all, now you can make changes to your code, save local changes and push and pull them to your github / gitlab repos.

Bonus

I usually keep only two or three local branches in order to have my git branches clean.

You can remove local branches using:

~ git branch -d branch_name
# or
~git branch -D branch_name  #Force the delete event if there are local changes

And for delete github branches:

~ git push origin --delete branch_name