GitLab Workflow extension for VS Code

The GitLab Workflow extension for Visual Studio Code integrates GitLab Duo and other GitLab features directly into your IDE.

The GitLab Workflow extension streamlines your VS Code workflow with AI-assisted features:

Code Suggestions features

GitLab Duo Code Suggestions provides AI-powered suggestions as you type in VS Code, helping you write code more efficiently. To interact with a suggestion on the current line:

  • To accept the entire suggestion, press Tab.
  • To accept the suggestion word-by-word, press Command + → (right arrow).
  • To accept an entire line, right-click and select Accept Line.

GitLab Duo can also generate code based on comments in the file you’re editing in VS Code. When you write comments in a supported file type, use natural language to describe what you want the code to do. Press Enter to see suggestions from GitLab Duo inline in your current file.

To learn more, see the documentation for Code Suggestions.

Configure more languages for Code Suggestions

To add more languages to Code Suggestions:

  1. Find your desired language in the list of language identifiers for VS Code. You need the Identifier for a later step.
  2. In VS Code, open the extension settings for GitLab Workflow:
    1. On the top bar, go to Code > Settings > Extensions.
    2. Search for GitLab Workflow in the list, then select Manage () > Extension Settings.
    3. In your User settings, find GitLab › Duo Code Suggestions: Additional Languages and select Add Item.
  3. In Item, add the language identifier, and select OK.

Set up the GitLab Workflow extension

This extension requires you to create a GitLab personal access token, and assign it to the extension:

  1. Install the extension from the Visual Studio Marketplace and enable it. If you use an unofficial version of VS Code, install the extension from the Open VSX Registry.
  2. To sign in to your GitLab instance, run the command GitLab: Authenticate in VS Code.
    1. Open the command palette by pressing Command + Shift + P.
    2. In the command palette, search for GitLab: Authenticate and press Enter.
    3. Select your GitLab instance URL from the offered options, or enter one manually.
      • When manually adding an instance to URL to GitLab instance, paste the full URL to your GitLab instance, including the http:// or https://. Press Enter to confirm.
    4. For GitLab.com, you can use the OAuth authentication method.
    5. If you don’t use OAuth, use a personal access token to sign in.
      • If you have an existing personal access token with api scope, select Enter an existing token to enter it.
      • If you don’t, select Create a token first, and the extension opens the token settings page for you. If this method fails, follow the instructions to create a personal access token.
    6. Copy the token. For security reasons, this value is never displayed again, so you must copy this value now.
    7. Paste in your GitLab personal access token and press Enter. The token is not displayed, nor is it accessible to others.

The extension matches your Git repository remote URL with the GitLab instance URL you specified for your token. If you have multiple accounts or projects, you can choose the one you want to use. For more details, see Account management.

The extension shows information in the VS Code status bar if both:

  • Your project has a pipeline for the last commit.
  • Your current branch is associated with a merge request.

Configure extension settings

After you install GitLab Workflow, go to Settings > Extensions > GitLab Workflow in VS Code to configure its settings:

Customize keyboard shortcuts

You can assign different keyboard shortcuts for Accept Inline Suggestion, Accept Next Word Of Inline Suggestion, or Accept Next Line Of Inline Suggestion:

  1. In VS Code, run the Preferences: Open Keyboard Shortcuts command.
  2. Find the shortcut you want to edit, and select Change keybinding ().
  3. Assign your preferred shortcuts to Accept Inline Suggestion, Accept Next Word Of Inline Suggestion, or Accept Next Line Of Inline Suggestion.
  4. Press Enter to save your changes.

Integrate with GitLab

This extension brings the GitLab features you use every day directly into your VS Code environment:

For detailed information on these features, refer to the GitLab Workflow extension documentation.

Create a snippet

Create a snippet to store and share bits of code and text with other users. Snippets can be a selection or an entire file.

To create a snippet in VS Code:

  1. Choose the content for your snippet:
    • For a Snippet from file, open the file.
    • For a Snippet from selection, open the file and select the lines you want to include.
  2. Open the Command Palette:
    • For macOS, press Command+Shift+P.
    • For Windows or Linux, press Ctrl+Shift+P.
  3. In the command palette, run the command GitLab: Create Snippet.
  4. Select the snippet’s privacy level:
    • Private snippets are visible only to project members.
    • Public snippets are visible to everyone.
  5. Select the snippet’s scope:
    • Snippet from file uses the entire contents of the active file.
    • Snippet from selection uses the lines you selected in the active file.

GitLab opens the new snippet’s page in a new browser tab.

Create a patch file

When you review a merge request, create a snippet patch when you want to suggest multi-file changes.

  1. On your local machine, check out the branch you want to propose changes to.
  2. In VS Code, edit all files you want to change. Do not commit your changes.
  3. Open the Command Palette, enter GitLab: Create snippet patch, and select it. This command runs a git diff command and creates a GitLab snippet in your project.
  4. Enter a Patch name and press Enter. GitLab uses this name as the snippet title, and converts it into a filename appended with .patch.
  5. Select the snippet’s privacy level:
    • Private snippets are visible only to project members.
    • Public snippets are visible to everyone.

VS Code opens the snippet patch in a new browser tab. The snippet patch’s description contains instructions on how to apply the patch.

Insert a snippet

To insert an existing single-file or multi-file snippet from a project you are a member of:

  1. Place your cursor where you want to insert the snippet.
  2. Open the Command Palette:
    • For macOS, press Command+Shift+P.
    • For Windows or Linux, press Ctrl+Shift+P.
  3. Type GitLab: Insert Snippet and select it.
  4. Select the project containing your snippet.
  5. Select the snippet to apply.
  6. For a multi-file snippet, select the file to apply.