In this Git Cheat Sheet, I have put together the most frequently used Git commands for both Git beginners and seasonal professionals.
If you are constantly looking up some common Git commands, or learning Git from scratch this is for you.
Let me know what you think in the comments. Enjoy.
Git reset can be quite overwhelming and scary.
If you don’t know what you are doing, things can go horribly wrong and you can lose some of your work.
In this Git reset tutorial you will learn how to undo your changes in all practical scenarios that I could think off.
Table of content
Are you new to Git? Checkout Git tutorial for beginners and Git branches tutorial.
Your Scenario:
You are working on your local branch and you have staged 2 files using the git add . command.
How do you now unstage one of the files?
The Answer:
git reset readme.me
git reset readme.me would reset only the specified file and move it to the unstaged changes.
What if you wanted to unstage all changes currently staged?
git reset HEAD
git reset HEAD would move all your staged changes to unstaged.
In other words it moves the HEAD pointer to the last commit, resets the staged area and keeps your changes.
What if you wanted to reset and at the same time also wanted to get rid of your changes?
git reset --hard HEAD
git reset --hard HEAD would reset HEAD to the last commit and trash all your changes. The image below shows that the readme.md file has been deleted after the hard reset.
Your Scenario:
You are working on your local branch and you have already created a few commits but you want to revert file to a specific commit.
Firstly you need to find out the hash ID of the commit, run the git log --pretty=oneline command.
Pick a commit that contains the desired version of your file.
If you are not sure which commits contains the changes you are after, use the git diff command.
git checkout cb5f4f0 navigation.md
git checkout cb5f4f0 navigation.md would checkout this file and place it in your staged area.
What if you only want to get a specific changes from this file?
You can choose what to bring back by adding -p and patch your working directory.
git checkout cb5f4f0 navigation.md -p
More on that in the next section.
Your Scenario:
You need to revert changes in one of your files, but you want to choose which lines of code to bring back.
You get a few options when you specify the -p flag:
y yes, bring these changesn no, don’t bring changesq quit and don’t bring any changes. It’s like no but for all files.a stage this change and all other changesd do not stage this change or any other changes in the files split the current change into smallere edit manually the current changes will split a bigger change into smaller ones, this makes it easier to edit.
e will enter a manual mode, where you can choose which lines to bring and which ones not.
To enter the editing mode you need to press i for insert, now you are able to navigate through the changes.
The lines marked with minus - at the start would be removed if we bring this change into our current version of the file.
To ignore removing these lines, simply delete - and replace it with an empty space .
The lines marked with plus + will be added to our current version of the file.
To prevent these lines from being included in the change, we can remove them and they will be ignored .
Here are the changes edited. We want to keep the Categories and 3 bullet points and only bring in Line 1, Line 2 and Line 3.
Adding Heading 1 back to our file will be ignored, because we have manually deleted this line.
To quit the edit mode press Esc and type in :wq and hit enter. w for write, q for quit.
To quit without editing type :q + enter.
Below is the file patched with the recovered code from our previous commit.
Have you enjoyed this Git tutorial? You might also like
If you have enjoyed this article you might also like Git tutorial for beginners and Git branches tutorial.
What is the most confusing Git feature that you would like to see explained in my future tutorials?
Let me know in the comments below.
This Git tutorial will guide you through the most frequently used Git commands and help you feel more comfortable to manage your Git repository in the terminal.
Lets go.
Git is a free and open source distributed version control system.
Distributed version control means that:
The opposite to distributed version control is centralized version control such as Subversion or SVN.
Git is easy to learn and has a very small footprint.
The best part about Git is its staging area, branching and out of the box integration in VSCode.
If you want to follow along with this article, you can clone any Git repository or even better you can create your own on GitHub.
Open your preferred terminal application and navigate to a folder where you want to clone the repo.
Make sure that Git is installed or download it here.
git --version // output git version 2.14.3 (Apple Git-98)
If the above shows a git version you are good to go.
git clone https://github.com/Ihatetomatoes/vscode-git
The above command will create vscode-git folder and save a copy of the source code in that folder.
You can also clone and choose what the folder name should be by specifying it like this:
git clone https://github.com/Ihatetomatoes/vscode-git git-tutorial
Git clone will create a new folder git-tutorial instead of the default vscode-git
Now you can navigate to the cloned folder and open it in VSCode.
cd git-tutorial code .
Easy, now we have a local copy of the code and can start making some changes.
Lets make any change to any of the files and look at the status.
git status
This will print out the current status, in other words it will show you what has changed since you have cloned the repo.
I have made one change to the text in index.html, that is why this file is now marked as modified.
Try to delete a file and look a the status again.
The deleted files are marked as deleted.
Lets try to add a new text file text.txt and check the status.
The deleted and modified files are tracked files because the remote repository already knows about them.
The new file is untracked, because it is completely new.
To make sure that others can pull our new file, we need to add it first.
git add text.txt
Git add will add the file and its content to our Git repository and the status would look something like this.
The newly created file is now added and ready for commit, but the other two changes are still unstaged. Which means that if we would commit at this point, only the new file would be committed.
The stage is an in-between step before commit, but if you want to skip it and add all changes directly use:
git add --all // or git add -A // or git add .
This is a shortcut how to stage all new, modified or deleted files.
Now all files are staged and ready for commit.
Git commit is like a save button, it will take your current changes and save them together with a custom message.
With every commit we need to provide a simple message describing our changes.
This helps you to scan a history of commits later on, in case you need to revert back to a certain commit.
git commit -m "my changes"
New commit has been created with an id 4b8c593.
You can find this in the Git history log and check out this version of you project in the future.
Until now all your changes are only stored locally, nobody will know what you have changed until you push your changes to the remote repository.
git push
Git push will push your local changes (commits) to the server and will let others to pull them to their computer.
git pull
Git pull will pull all new changes from the server. It lets you get the latest version of the project.
On some projects you might want to exclude some files or folders from Git and only keep them locally.
Example of that could be your VSCode workspace settings folder.
If you change some workspace settings (I have changed autoSave to afterDelay), you will see a new folder .vscode created in the root folder of your project.
To exclude this folder from being included with your changes and tracked by Git, you need to create .gitignore file in the root of your project.
Above is .gitignore created but without the .vscode folder, below we are excluding this folder from Git tracking.
When we include .vscode in .gitignore, VSCode recognizes that. It does not show is as untracked and all changes to this folder will be ignored by Git.
This file can include a single file or a path to multiple files or folders. Refer to the gitignore documentation for all the potential patterns.
Git log lets you see a history of all commits made to this repository.
It includes your local commits and also all commits made by someone else before you have cloned it.
The green commit is our local one, the rest of the commits are from the past on the remote.
VSCode also shows the number of local commits in the bottom left corner near the arrow up (push).
If we run git status at this stage we would see that we are 1 commit ahead of master.
You can modify the output of the Git log by specifying some options.
git log --stat git log --pretty=oneline git log --pretty=format:"%an, %ar, %s" git log --pretty=format:"%h %s" --graph
These Git log commands with different options would give you different format of the same log.
Refer to all the Git Log options for more.
To exit Git log, type in :q, :z or press Ctrl + z depending on your platform and OS.
Sometimes you might have a scenario when you do a commit but you forgot something.
You could create another commit with the new change, but you could also amend the change to a previous commit.
git commit --amend
git commit --amend would commit your change into your previous changes and everything will show as one commit.
It would be like the previous commit never happened.
There are a few options when it comes to reverting your local changes.
git reset index.html
Git reset would unstage your changes to index.html.
git checkout index.html
Git checkout reverts this file to what it was when you cloned the repo initially.
git reset --soft HEAD~
Git soft reset reverts your last commit but it would keep your staged changes.
git reset --hard
Git hard reset reverts all your staged changes.
git reset --hard origin/master
This would reset everything including your local commits.
Use reset --hard with caution, this action is irreversible.
If we use the last command we should have everything reverted and could start working on our feature again.
We have covered a lot. Now you know how to:
I hope that this article was useful and all the Git commands are now less scary than before.
What do you like or don’t like about Git version control.
And what would like to learn next? Branching, merging conflicts or anything else?
Let me know in the comments.
Are you looking for some useful VSCode extensions that could speed up your front-end development workflow?
I have been building React and Angular projects in VSCode over the last few years and in the next few posts I will share with you my most popular VSCode extensions.
Hope you will find this collection useful.
The first section will focus on visual enhancements.
These extensions are useful for any projects, not just React or Angular development.
Indent rainbow is a simple extension that makes indentation more readable by colorizing each tab indentation.
By default it comes with a “rainbow” of colors, but if you prefer something more subtle like me, simply past the following configuration into your User Settings.
“indentRainbow.colors”: [
"rgba(16,16,16,0.1)",
"rgba(16,16,16,0.3)",
"rgba(16,16,16,0.6)",
"rgba(16,16,16,0.4)",
"rgba(16,16,16,0.2)"
]
These colors work great with the default VSCode theme and seamlessly blend in the default VSCode color scheme.
If you write React, Vue or Angular code you most likely have quite a lot of brackets in your code.
This extension helps you identify matching brackets with colors and connect them with lines too!
You can disable the vertical and horizontal line around the block of code. Simply add this to your User Settings.
“bracketPairColorizer.showHorizontalScopeLine”: false
Better comments extension lets you highlight certain comments in your code.
Highlight things to do, questions or important notes for other developers.
Color Highlight styles css colors found in your document.
Not only does it recognize colors in your stylesheet but also in other files such as .js, .jsx, .ts, .tsx and other file extensions.
What are some of your favorite extensions that fall into the category of VSCode visual enhancements?
Let me know in the comments.
And don’t forget to check out my other collection of useful extensions for VSCode.
The React license has been a concern for the open source community for some time.
Today Facebook has released a statement that React, Jest, Flow, and Immutable.js will be relicensed under the MIT license.
Great news for everyone.
We're relicensing React, Jest, Flow, and Immutable.js under the MIT license. https://t.co/3XD0z49UsS
— React (@reactjs) September 22, 2017
Facebook is responding to the reaction of the open source community. Since introducing the BSD + Patents license for React, many developers and companies started to look for alternatives to React.
The founding developer of WordPress Matt Mullenweg announced in his On React and WordPress article that his team is taking a step back and will be rewriting the upcoming version of WordPress (Gutenberg) using a different library.
It will be interesting to see if WordPress spends their time and money rewriting Gutenberg using a different library or this React license update will be enough to win them back.
I would love to see WordPress use React for their codebase in the near future.
This update means that everyone can focus on developing and shipping great products instead of worrying about any licensing issues.
No more legal conversations and confusion.
What do you think about the update? Were you confused about the React licensing issue?
Were you looking for alternatives to React and if so which one did you choose and why?
Let me know in the comments.
If you are looking for a quick way to select everything between matching brackets or quotes in VSCode, the following VSCode tips are for you.
This is not a front-end development tutorial and you will not learn any new coding techniques by reading this.
Lets talk state, React state.
The aim of this React state tutorial is to answer the most common questions about React state and explain this concept in a very simple terms.
If you are completely new to React checkout my previous React Tutorial for Beginners first.