One-keystroke git commits with Visual Studio Code
Committing changes to git is laborious. First, you view the changes with git diff
, maybe refine the output with advanced options, then git add
the files and finally git commit
the changes. Make a couple of typos on the way, and the keystrokes add up. The efficient developer in you asks: isn't there a better way?
Microsoft has treated developers with Visual Studio Code. It has a git commit mode so well integrated that it deserves a dedicated article.
Integrated git mode
You can use external tools to help get changes committed to a repository. And there are plenty, ranging from bare-bones gitx and git citool
to more beautiful gitkraken and to IDE’s such as WebStorm.
The problem is that most people write JavaScript in simple editors instead of IDEs. And launching an external git tool is one extra step that you'd like to avoid.
Visual Studio Code solves this problem by providing a simple code editor that includes built-in git integration.
Viewing changes
Visual Studio Code, also known as vscode, provides an informative diff view. It shows inline changes well, something that is hard to decipher from the standard git diff
output. Removed and added lines are clearly displayed with green and red indicator colors. You can edit the right pane to make last corrections - but make sure you run tests before committing big changes.
One-keystroke commit
The most common use case of committing all changed files requires writing a commit message and hitting Cmd+Enter. Apart from typing the commit message text itself, that's only one keystroke! Experiencing git commit this easy after the 40-plus characters in the terminal is liberating.
One-keystroke commits allow you commit more often
There are also other features in the git mode, such as selective commits, merging, and syncing with a repository. You can find more about that in the vscode documentation. Using vscode for git commits reduces the amount of keyboard acrobatics and makes you commit more often as a consequence.
Semantic Versioning Cheatsheet
Learn the difference between caret (^) and tilde (~) in package.json.