How to Push Code Directly from VSCode to Github

I have a confession. Though I am getting better, I sometimes find navigating my terminal pretty tricky. I had not used it before this year with any frequency and largely ignored the fact that it existed.

Recently, I decided to challenge myself and use the terminal to practice using GitHub. I’d been using GitHub desktop for my coding projects which made it pretty easy to push code to the remote repository with a few clicks. My transition to the terminal only was kind of a mess filled with error messages I’d eventually figure out. Lucky for me, I learned that pushing code directly from VSCode to GitHub is relatively pain free.

https://cdn.hashnode.com/res/hashnode/image/upload/v1655934151174/S64uTYPrs.gif

During a virtual meeting with a developer who was helping me with a project, they showed me how to push changes to my code right in VScode.

https://cdn.hashnode.com/res/hashnode/image/upload/v1655934231372/JUfLxPv_W.gif

If you’ve never tried this before and use VScode, I encourage you to try it yourself with the below steps!







1 . Open up VS Code

https://cdn.hashnode.com/res/hashnode/image/upload/v1655932194183/62ZSu0YDR.png

2 . Drag the file you want to work on into VS Code as usual

https://cdn.hashnode.com/res/hashnode/image/upload/v1655932223749/Jb2Wjufdz.png

https://cdn.hashnode.com/res/hashnode/image/upload/v1655932501340/WfbnTYia9.png

3 . Open Github in your browser and create a new repository for your project you’d like to push

https://cdn.hashnode.com/res/hashnode/image/upload/v1655932456128/BB37KvEkm.png

https://cdn.hashnode.com/res/hashnode/image/upload/v1655932528818/9aQ2-QzJX.png

4 . Go back to VScode and click on source control on the lefthand side of the page

https://cdn.hashnode.com/res/hashnode/image/upload/v1655932537764/eyIJxH6id.png

https://cdn.hashnode.com/res/hashnode/image/upload/v1655932668080/3PPDB7Qa8.png

5 . Click on “Initialize repository”

https://cdn.hashnode.com/res/hashnode/image/upload/v1655932642081/r1YcvHV6a.png

6 . Type in the commit message and click the check mark to commit (or command enter)

https://cdn.hashnode.com/res/hashnode/image/upload/v1655932716043/cD8CQbCyJ.png

7 . Select “Yes” for committing changes

https://cdn.hashnode.com/res/hashnode/image/upload/v1655932752092/Hw-36Wkyf.png

8 . Click on the 3 tiny circles near the check mark

https://cdn.hashnode.com/res/hashnode/image/upload/v1655932776868/yv_2JRZmo.png

9 . Click on “Push”

https://cdn.hashnode.com/res/hashnode/image/upload/v1655932825467/ZBsYEcoji.png

https://cdn.hashnode.com/res/hashnode/image/upload/v1655932860906/6F8RB2vbR.png

11 . Type in the remote name and hit enter

https://cdn.hashnode.com/res/hashnode/image/upload/v1655932914657/aIl1Kx-DT.png

12 . Click on the 3 dots again and select “Push to”

https://cdn.hashnode.com/res/hashnode/image/upload/v1655932963207/gD9DNx9uA.png

13 . Select the repository you want to send it to

https://cdn.hashnode.com/res/hashnode/image/upload/v1655933021384/plieNWnf_.png

14 . Your code should be in the remote repository now, Yay!

https://cdn.hashnode.com/res/hashnode/image/upload/v1655933051027/ClhINkVZd.png

15 . Check your GitHub repo to see if all the files have transferred by refreshing page

https://cdn.hashnode.com/res/hashnode/image/upload/v1655933104574/80vxzZeWk.png

16 . Yay files were transferred for version control!

https://cdn.hashnode.com/res/hashnode/image/upload/v1655933129839/oUAQDBFdi.png



I hope this was helpful for anyone who didn’t know pushing directly from VSCode was possible. What is your preferred method for pushing to your remote repository?