Difficulty: Medium
You will need to install Git and VS Code in your system. The set up in the beginning takes time, but the rest of the development should be a breeze.
Read the documentation from VS Code website:
You will need to install the following applications into your computer:
Please note that you also need to have Python installed in your computer to start developing an app using Python.
Step 1.
Once you have installed VS Code, you will need to install Python as an extension.
To install an extension in VS Code, simply click on the Extensions tab or press Ctrl + Shift + X. Search for the extension name and click Install.
Step 2.
Connect to GitHub (and have access to your public repositories) by signing in.
Click on the Accounts icon at the bottom left corner. Click on Backup and Sync Settings...
Step 3.
In the top center, a dropdown will open. Click Sign In and choose Sign in with GitHub.
Step 4.
A new tab will open in your browser. Click on Authorize Visual-Studio-Code. A prompt will appear. Click Open to go back to VS Code and finalise your sign in.
You know you have successfully signed in if you see your GitHub account when clicking on the Accounts icon.
Make sure you have an existing remote repository in GitHub before following the steps below. If you don't have a remote repository in GitHub yet, read how to create one.
Step 1.
In VS Code, click on the Source Control tab or press Ctrl + Shift + G. Click Clone Repository.
Step 2.
Click on Clone from GitHub. When it asks for permission to sign in using GitHub, click Allow.
Step 3.
A new tab in your browser will open. Click on Authorize Visual-Studio-Code. You will need to re-enter your password to proceed. When a prompt appears asking to open Visual Studio code, click Open.
Step 4.
Upon successful login, you will see a list of repositories from your GitHub account. Choose the repository you wish to clone.
Step 5.
After choosing a remote repository from the list, File Explorer will open asking you to select a repository destination. This is your local repository where the code files in your computer will reside. Once you have chosen an appropriate location, click Select as Repository Destination.
A prompt will open asking if you would like to open the cloned repository. Click Open to see the files in VS Code.
Step 6.
Click on Yes, I trust the authors to proceed.
When you see the files from your remote repository in your VS Code, it means the files have been successfully pulled and a clone of those files have been created inside your computer.
Step 1.
Every time you make changes to your files in VS Code, the Source Control tab will display a bubble badge showing how many files have been changed. You need to save the file before the changes are considered.
When you click on the file/s while in the Source Control tab, you can compare the changes in the file/s.
Step 2.
Click the + icon to stage the changes of that file. You can also select all files, right click and choose Stage Changes.
Step 3.
Write a meaningful commit message and then click on Commit. You can also click on the down arrow and choose Commit and Push if you want to push the changes after committing.
If this is your first time committing in VS Code, a prompt will appear asking you to configure your username and email.
You will need to follow the steps 4 and 5. Else, scroll down to step 6 to see how to push the code changes to GitHub. For now, click Cancel to close the prompt.
Step 4.
Click on Terminal > New Terminal in the top bar.
Step 5.
In the terminal, type the following commands successively:
git config --global user.name "your_username"
git config --global user.email "your_email@example.com"
Make sure to replace your_username and your_email@example.com into your own information.
After you have entered these commands, try clicking Commit again.
Step 6.
Once you have successfully commited your changes, your files should disappear from the staging area.
Click on Sync Changes to push into the remote repository in GitHub.
A prompt will state that the action will pull and push commits from and to "origin/master". Click OK to proceed.
Note: It is not the best practice to push changes into the master (or main) branch.
Step 7.
When you are pushing the changes for the first time, you will need to sign in in GitHub. A prompt will appear so simply click on Sign in with your browser.
Step 8.
In VS Code, a notification on the bottom right corner asking to periodically run git fetch will appear. Click Yes.
Repeat steps 1 through 3 for every code changes that you wish to push.