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 this adds up to about 30 keystrokes. The efficient developer in you starts to ask isn't there a better way?

Microsoft has treated us developers with many new tools recently. The most important being the TypeScript language, but there’s also an editor called 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 ease the pain of git commits. And there are plenty, ranging from bare bones gitx and git citool to more beautiful gitkraken and to IDE’s such as WebStorm and eclipse.

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 do without.

Visual Studio Code solves this problem by providing a simple code editor that includes built-in git integration.

Visual Studio Code git mode.
Visual Studio Code provides an integrated git mode.

Viewing changes

Visual Studio Code, also known as vscode, provides an informative diff view. It shows inline changes well, something that is impossible 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.

Visual Studio Code changes.
Changes are displayed clearly and you can edit the right pane.

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 terminal feels invigorating.

Visual Studio Code commit.
Enter message and hit Cmd+Enter. Simple git commits.

Your fingers thank you

There’s 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 the vscode for git commits makes your fingers thank you multiple times.

cover

There are 350 000 NPM packages. Your task: pick one.

Learn what to look for in a reliable NPM package.

Get Guide

Share article: