GitPush With (Visual Studio) VS Code

Collaborative coding and version control are integral to modern software development practices. Integrating your Visual Studio Code (VS Code) environment with GitHub provides a seamless experience for managing your codebase, collaborating with others, and tracking changes effectively. In this article, we’ll explore the step-by-step process of adding a GitHub repository to VS Code and pushing code changes using the command line. This integration streamlines your workflow, making it easier to contribute to projects, track changes, and collaborate with fellow developers.

Describe Git

Version control systems like Git are widely used. Since then, Junio Hamano has been responsible for its upkeep. Linus Torvalds designed it in 2005.

Git Used for

Tracking code modifications is one of its uses.
Monitoring the change makers
Cooperative coding

Utilizing Git

Create a repository for a folder by initializing Git on it.
Git now makes a hidden folder to monitor any modifications made to that folder.
A file is deemed modified whenever it is added, altered, or removed.
You decide which edited files to stage.
Git saves a persistent snapshot of the staged files after they are committed.
Git lets you view each commit’s complete history.
It is possible to roll back any prior commitment.
Git tracks the changes made in each commit rather than storing a separate copy of every file!

Steps to create and add Git repository in vs code

Step 1: Open the VS code, then open a new terminal and create a new empty folder using this command: mkdir gfg

then go to this folder (cd gfg) and open this folder.

open terminal

create folder

open folder

Step 2: Then open our folder new terminal and create new react project using this command : npx create-react-app gfgreact.

create react project

Step 3: Then initialize with git repository using this command: git init .

git init

Step 4: Go to the react project and open src folder and open App.js file and add some code then

run this project using this command: npm start

import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h2>Hello GFG</h2>
      </header>
    </div>
  );
}

export default App;

npm start

run

Step 5: Return the vs code terminal and check the status of git repository using this command: git status

git Status

Step 6: Then add all changes in git using this command : git add . and check the status using this command: git status

git add .

git status

Step 7: Then commit all changes using this command : git commit -m “change the app.js file” and check the status using this command: git status

commit all changes

Step 8: These are the changes made in the local system but we want to upload the project which we created in your system to GitHub then follow the below steps to upload :

Go to the GitHub
then click your profile
select your repositories folder

Go to GitHub

profile

select option

go to repository

Step 9: Then click on new button and create new repository and give the name like GFGRepo and check that our repository is created successfully or not then copy the repository link.

new button

repo name

click this button

successfully

copy this link

Step 10: Then go to vs code terminal and get the remote of our git repository using this command : git remote add origin https://github.com/HerryVaghasiya/GFGRepo.git(copy into the above).

get remote

Step 11: check that repository remote is success fully added or not using this command : git remote -v

check our git repository branch using this command: git branch

change our branch name master to main because GitHub change its default branch name master to main so rename our branch name using this command: git branch -M main

check branch name : git branch

check remote

check branch

change and check branch name

Step 12: Then push our code in GitHub repository using this command: git push -u origin main

(Note : -u means set upstream. If you want to work on the same project for a long time, there is a shortcut key that will set the branch name as default so that you don’t have to give the same branch name every time. )

push the code

Step 13: Then Go to GitHub repository and refresh the page and check that our project is successfully pushed or not.

project successfully pushed

Conclusion

In conclusion, integrating a GitHub repository in VS Code streamlines version control and collaboration. Leveraging the command line with git push facilitates seamless code contributions, fostering an efficient and collaborative development workflow. This combination enhances productivity and ensures effective code management in your projects.

GitHub repository in VS Code – FAQ’s

How to push code to GitHub from Visual Studio command line?

To push code from VS Code command line to GitHub, initialize Git, commit changes, and use git push origin master (replace master with your branch). Ensure your GitHub repository is linked using git remote add origin <your_repo_url>.

How do I push my code to my GitHub repository?

After committing changes, use git push origin <branch> to publish code to your GitHub repository. Make sure git remote add origin <your_repo_url> is assigned to your repository as the remote origin.

Article Tags :

Git