Git and Preferences in Visual Studio Code

Visual Studio Code has a good symbiosis with allowing you to customize the editor through styling, preferences, keyboard mappings, tasks, and more. Here are some examples of how to get started.

Visual Studio Code Series

Follow this series to learn more about what you can do with Visual Studio Code!

  1. Introducing Visual Studio Code
  2. Getting Started with Visual Studio Code
  3. Intellisense
  4. Refactoring
  5. Debugging
  6. Git Integration and Preferences

Git Integration

VSCode integrates well with git. When you make changes to your files you see red and green indicators in the left hand gutter of the editor. These markers show the changes you just made at those locations. Red indicates removed lines, green indicates added lines, and blue indicates changed lines.

git0

You can then click the git icon in the sidebar and see all of the changes. From here you can clean them (revert) one by one or as a group. You can also commit them all, add a commit message, and even push them right to the remote git repository.

git1

If you click on the file in the git view, VSCode will show you a side by side of the current state of the file as compared to its previous state.

git2

Preferences

You can adjust the setting sin VSCode by visiting the preferences and then overriding the default values with your own settings. You can access VSCode’s preferences by either using the menu or via CMD+,.

preferences menu

When you open preferences you open 2 files. The default settings (which are read only) and the settings.json file, where you can adjust your own preferences.

Simply add your settings to the object in the settings.json and VSCode will use those instead of the defaults. These are stored in the .settings folder. I like push this file in github with my source control.

preferences

Styling

Light or dark theme? Zooming in? VSCode can do that too. I expect more to come when the rumored extensions are opened.

You can zoom in on the entire code window using CMD++ or CMD+-, same as a browser.

You can swap between the light and dark themes from the menu View then Theme then Light Theme or Dark Theme.

theme-light

theme-dark

Keyboard Mapping

You can override the keyboard mappings for VSCode, too. These are exposed in a keyboard.json file and can be accessed via the Code menu and then selecting Preferences and Keyboard Shortcuts.

keyboard menu

You will see 2 files again: 1 for the default keybindings and 1 for the overrides (keybindings.json). Unmapped actions appear as comments at the bottom of the default list of key bindings.

keyboardbindings

While in the keybindings you will enjoy intellisense and auto completion.

Be sure not to set 2 key combinations to the same action.

Tweet Post Share Update RSS

Hi, I'm John Papa. I author this blog, create courses for Pluralsight and am a Google Developer Expert and Microsoft Regional Director. I travel speaking at events and train technology thought leaders