8 Apr 2020

How to setup and use Gist in Visual Studio Code

Gist Visual Studio Code (VSCode)

Visual Studio Code is currently a hot cake in the software development field. It is pretty lightweight but powerful source code editor that runs on your desktop. It is available for Windows, macOS and Linux. It has rich ecosystem of extensions which is called Visual Studio Marketplace.

If you are into programming, you must have already heard about Gist. Gist is an easy way to share snippets and files. This is one awesome service provided by GitHub. It allows you to store code snippets for later use, you can have as many private gists as you need and you can group multiple gist files under a single gist.
If you frequently use Gist then there is a Gist Extension which helps you to use it the easy way in Visual Studio Code. You can install this extension from the marketplace.

Generating Access Token

You will need Access Token for using Gist in Sublime text.

  • Open up GitHub site.
  • Go to Developer Settings
  • Go to “Personal access tokens”
  • Click “Generate new token”
  • Enter some meaningful name in “Note”
  • Under “Select scopes”, select “gist”
  • Click “Generate token”
  • Copy the token and keep safe. You will need it in VS Code settings.

Setting up Gist in Visual Studio Code

  • Open Visual Studio Code
  • Press CTRL + ALT + = (in Windows/Linux) or Control + Option + = (in MacOS)
  • Command palette will open.
  • Select “Create New Profile”
  • Select your Github profile.
  • Enter Access Token you have generated from GitHub site.
  • Give a profile name.

Setup is now complete.

Using Gist in Visual Studio Code

After setup is complete, you can access all Gist options from the command palette. Press Control + Shift + P, and command palette will open. Type “Gist” and you will see all Gist commands.

Creating Gist

Say you want to create Gist from the current file. Open command palette with Control + Shift + P, and select “GIST: Create New Gist”. Give file name for the Gist and press Enter key. Then enter Gist description and press Enter. Then it will ask “Public?”. Enter “Y” to create a public Gist or enter “N” to create a private Gist

Editing Gist

Press Control + Shift + P to open command palette and select “GIST: Open Gist”. Now you will see the list of your Gists. Select your desired Gist and press Enter. You can then edit the files normally and save to update the Gist.

Keyboard Shortcuts

CommandCommand LabelKeyboard Shortcut
extension.gist.openOpen Gistctrl+alt+o
extension.gist.openFavoriteOpen Favorite Gist
extension.gist.createCreate New Gist
extension.gist.openInBrowserOpen Gist In Browserctrl+alt+b
extension.gist.deleteDelete Gist
extension.gist.deleteFileDelete File
extension.gist.addAdd Filectrl+alt+a ctrl+alt+a
extension.gist.insertInsert Text From Gist File
extension.profile.selectSelect Profilectrl+alt+=

Nilambar

PHP Programmer, WordPress and Laravel Developer, Freelancer and a Blogger.

View all posts by Nilambar →

One thought on “How to setup and use Gist in Visual Studio Code

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.