README.md

    GitLab VS Code Extension

    Marketplace Version Installs Downloads Rating

    This extension integrates GitLab to VS Code. It helps you:

    • View issues.
    • Create and review merge requests.
    • Validate your GitLab CI configuration.
    • View the status of your pipeline.
    • Create and paste snippets to, and from, your editor.

    Minimum supported version

    GitLab Workflow requires GitLab 13.4 or later. To find your GitLab version, visit /help (like https://gitlab.com/help).

    Features

    You need to set up your access token(s) to use these features, please see Setup section below.

    Browse issues, review MRs

    See your issues, MRs (including changed files) and other custom search results on a dedicated panel in the VS Code sidebar. Read more

    Information about your branch - pipelines, MR, closing issue

    See pipeline status, open MR and closing issue links in the status bar. Read more. This pipeline status automatically updates so you don't need to open GitLab to see your pipeline status.

    Advanced pipeline actions allow you to view pipeline on GitLab, create a new pipeline, retry or cancel current pipeline. Read more.

    _status_bar.gif

    Commands

    You can use Command Palette to run the commands.

    • GitLab: Search project issues (Supports filters). Read more
    • GitLab: Search project merge requests (Supports filters). Read more
    • GitLab: Project Advanced Search (Issues, MR's, commits, comments...). Read more
    • GitLab: Create snippet - Create public, internal or private snippet from entire file or selection. Read more.
    • GitLab: Insert snippet - Insert a project snippet, supports multi-file snippets. Read more.
    • GitLab: Compare current branch with master - Compare your branch with master and view changes on GitLab. Read more.
    • GitLab: Open active file on GitLab - View active file on GitLab with highlighting active line number and selected text block. Read more.
    • GitLab: Validate GitLab CI config - Validate GitLab CI configuration file .gitlab-ci.yml. Read more.
    • GitLab: Open merge request for current branch
    • GitLab: Show issues assigned to me - Open issues assigned to you on GitLab.
    • GitLab: Show merge requests assigned to me - Open MRs assigned to you on GitLab.
    • GitLab: Open current pipeline on GitLab
    • GitLab: Open current project on GitLab
    • GitLab: Create new issue on current project
    • GitLab: Create new merge request on current project - Open the merge request page to create a merge request.

    Commands this extension extends/integrates with:

    • Git: Clone - Search for and clone projects for every GitLab instance you set up. Read more, Official Documentation
    • Git: Add Remote... - Add existing projects as remote from every GitLab instance you set up.

    Other features

    Supports multiple GitLab instances Read more.

    Published also on Open VSX Registry.

    You can use autocompletion of GitLab CI variables in your .gitlab-ci.yml pipeline file. If you have additional pipeline files you would like to use autocomplete with, it matches on any file beginning with .gitlab-ci and ending with .yml or .yaml. For example: .gitlab-ci.production.yml.

    Setup

    To use this extension, you need to create a GitLab Personal Access Token and give it to the extension.

    Step 1: Create your Personal Access Token

    • If you are using
    • On Add a personal access token form:
      • Give a name to your token.
      • Select an expiry date.
      • Select api and read_user permissions.
      • Select Create personal access token.
    • Copy the token. Remember you won't be able to see the value of this token ever again for security reasons.

    Step 2: Add token to GitLab Workflow Extension

    • Open up Command Palette by pressing Cmd+Shift+P.
    • Search for "GitLab: Set GitLab Personal Access Token" and hit Enter.
    • Enter the URL to the GitLab instance the PAT should apply to and hit Enter.
    • Extension will ask for your PAT. Paste your PAT and hit Enter. It won't be visible and accessible to others.
    • If you want to connect to GitLab hosted on a custom domain, additionally set gitlab.instanceUrl in your user or workspace settings, otherwise the extension will try to connect to gitlab.com. See Extension settings for more information.

    That's it. 🏁

    You can start using this extension right away. If your project has a pipeline for last commit and a MR from your current branch, you should see them on VS Code status bar. 🎉

    Multiple GitLab instances

    If you want to use multiple GitLab instances you may want to configure each workspace separately. See the gitlab.instanceUrl configuration option in Extension settings section.

    Extension settings

    To learn how to change the VS Code Settings, read the official Settings documentation.

    gitlab.instanceUrl (required: false, default: "https://gitlab.com")

    If you are using GitLab on a custom domain, you must add this to your user settings file. Example: "gitlab.instanceUrl": "https://my-gitlab-domain.com"

    To enable GitLab Workflow extension to work with different GitLab instances, each token is assigned to a GitLab instance URL. For the extension to select the correct token for a specific workspace, the option gitlab.instanceUrl can be used. This option can be set in the current workspace's .vscode/settings.json file.

    gitlab.showStatusBarLinks (required: false, default: true)

    If you don't want to see GitLab-related links on the status bar, you can set this option to false. If you are using version 1.0.0 or later, you can also find the same links in sidebar. You should restart VS Code after updating this option.

    gitlab.showIssueLinkOnStatusBar (required: false, default: true)

    If you are not using the GitLab issue tracker, you can set this option to false to remove related issue links on the status bar. You should restart VS Code after updating this option.

    gitlab.showMrStatusOnStatusBar (required: false, default: true)

    You can toggle visibility of the merge request link in your sidebar. You can always find a merge request link in GitLab Workflow sidebar. You should restart VS Code after updating this option.

    gitlab.remoteName (required: false, default: null)

    The name of the Git remote link corresponding to the GitLab repository with your merge request and issues. If no setting is provided, the extension will detect it. For example: origin.

    gitlab.pipelineGitRemoteName (required: false, default: null)

    The name of the Git remote link corresponding to the GitLab repository with your pipelines. If no setting is provided, the extension will detect it. For example: origin.

    gitlab.customQueries (required: false)

    Defines the search queries that retrieves the items shown on the GitLab Panel. See Custom Queries documentation for more details.

    Self-signed certificates

    To use self-signed certificates to connect to your GitLab instance, configure them using the following settings. These are community contributed because the GitLab team uses a public CA.

    These settings don't work with http.proxy setting for VS Code (see open issue).

    gitlab.ca (required: false, default: null)

    If your self-managed GitLab instance has a self-signed SSL certificate you would probably need to set this option in to point your certificate file. Implemented in this issue.

    gitlab.cert (required: false, default: null)

    If your self-managed GitLab instance requires a custom cert/key pair you would probably need to set this option in to point your certificate file. Please also see gitlab.certKey option. For more information, read this comment.

    gitlab.certKey (required: false, default: null)

    If your self-managed GitLab instance requires a custom cert/key pair you would probably need to set this option in to point your certificate key file. Please also see gitlab.cert option. For more information, read this comment.

    gitlab.ignoreCertificateErrors (required: false, default: false)

    If you are using a self-managed GitLab instance with no SSL certificate or having certificate issues and unable to use the extension you may want to set this option to true to ignore certificate errors. For more information, read this comment.

    Features in-depth

    Issue and Merge Request details and comments in VS Code

    Issues in Visual Studio Code

    GitLab Workflow allows you to view issue details and comments right in the VS Code. Click an issue link from the sidebar and VS Code will open a new tab to show the issue details. You can also comment on the issue from VS Code.

    You can use GitLab Slash Commands to perform actions directly from VS Code. For example, to assign an issue to @fatihacet, simply add a comment /assign @fatihacet inside VS Code.

    Merge Request Reviews

    GitLab Workflow enables you to review merge requests directly inside the editor:

    Animated gif showing how to review a merge request

    1. In the left-hand sidebar, go to Issues and Merge Requests.
    2. Select the appropriate merge request filter to view a list of merge requests.
    3. Expand a relevant merge request to view the description and files changed.
    4. Select a file to open it, and view the diff.

    From the diff, you can:

    • Review and create discussions.
    • Resolve and unresolve these discussions.
    • Delete and edit individual comments.

    Sidebar - details

    Extension will add a GitLab Workflow panel to sidebar of VS Code. The dedicated panel will allow you to see the list of your issues and MRs (you can decide the exact queries by using the custom queries). Also you will be able to see pipeline, MR and issue links for your current branch.

    You can see the issue and MR details by clicking on the issue item or by expanding the MR item and clicking on "Description". When you expand the MR, you can see all the changed files. When you click on a changed file, the extension opens the MR diff.

    _sidebar.gif

    Pipeline actions

    One of the real power features of this extension is pipeline actions. This feature can be accessible from the status bar by clicking the pipeline status text or command palette and allows you to,

    • View the latest pipeline on GitLab
    • Create a new pipeline for your current branch
    • Retry the last pipeline
    • Cancel the last pipeline

    _pipeline_actions.gif

    Status bar - details

    If your current project is a GitLab project, the extension will do the following things:

    • Fetch pipeline of the last commit and show it on the status bar. Clicking this item will open the pipeline actions menu.
    • Show open MR for current branch and show it on the status bar. Clicking this item will open MR on GitLab.
    • Fetch closing issue of that MR and show it on the status bar. Clicking this item will open Issue on GitLab.

    Search

    GitLab Workflow extension provides you two types of search. Search with filters and Advanced Search.

    Search with filters

    It allows users to search issues/MRs against their title and description fields. In the search input, you can type your search term and hit Enter, for example, Inconsistent line endings for HEX files or Pipelines should ignore retried builds.

    It can become more powerful by allowing you to filter issues/MRs by author, assignee, milestone, title etc. Below is the full list of supported filter tokens

    Token Description Example
    title Search issues/MRs against their title and description. You don't need to add quotes around multiple words. See Important notes section. discussions refactor
    labels Comma separated label list for multiple labels. labels: frontend, Discussion, performance
    label To search with a single label. You can also have multiple label tokens. label: frontend or label:frontend label: Discussion
    milestone Milestone title without %. milestone: 9.5
    scope Searches issues/MRs for the given scope. Values can be created-by-me, assigned-to-me or all. Defaults to created-by-me. scope: created-by-me or scope: assigned-to-me or scope: all.
    author Username of the author without @. author: fatihacet
    assignee Username of the assignee without @. assignee: timzallmann

    Examples

    • title: new merge request widget author: fatihacet assignee: jschatz1 labels: frontend, performance milestone: 10.5
    • title: multiple group page author: annabeldunstone assignee: timzallmann label: frontend

    Important notes

    • : after the token name is necessary. label : is not a valid token name and may return parsing error. Hence label: should be used. However, space after the token name is optional. Both label: frontend and label:frontend is valid. This rule is valid for all tokens above.
    • You don't need to add quotes around multiple words for title token. title:"new merge request widget" may return parsing error. title: new merge request widget should be used.
    • You can have labels and label tokens at the same time. labels: fronted discussion label: performance is a valid query and all labels will be included in your search query. It's equal with labels: fronted discussion performance. You can also have multiple label tokens. label: frontend label: discussion label: performance is valid and equals to labels: fronted discussion performance.

    Advanced search

    Search with Advanced Search

    GitLab provides Advanced Search feature which is backed by Elasticsearch. Please see Advanced Search syntax for more details.

    Create snippet

    You can create a snippet from selection or entire file. You can also select visibility level of your snippet.

    _create-snippet.gif

    Insert snippet

    You can insert public and private project snippets. The insert supports multi-file snippets.

    insert-multi-file-snippet

    Compare with master

    You can see changes in your branch by comparing with master and see them on GitLab.

    _compare-with-master.gif

    Soon, the extension will support comparing your current branch with other branches.

    Open active file

    This command allows you to see active file on GitLab. Extension sends active line number and selected text block to GitLab UI so you can see them highlighted.

    _open_active_file.gif

    Validate GitLab CI Configuration

    Using this command, you can quickly validate GitLab CI configuration.

    Validate CI configuration

    CI variable autocompletion

    Quickly find the CI variable you are looking for with the CI variable autocompletion.

    screenshot of the CI variable autocompletion

    Clone GitLab projects

    This extension integrates with the built-in Git Extension and allows you to search for and clone projects from GitLab (command Git: Clone).

    • You can search for projects on each GitLab instance for which you added an access-token.
    • Only projects where you are a member of are displayed.
    • You can clone with SSH or HTTPS
    • With HTTPS your access-token will be used for cloning the repository and fetching/pushing commits. This is also the case for all GitLab projects that are cloned manually with HTTPS and then opened in VS Code.

    Demonstration of cloning a project from gitlab.com

    Note: Using the access-token for cloning with HTTPS does not work with VS Code version 1.53.x (See discussion)


    Contribution

    This extension is open source and hosted on GitLab. Contributions are more than welcome. Feel free to fork and add new features or submit bug reports.

    A list of the great people who contributed this project, and made it even more awesome, is available. Thank you all! 🎉

    项目简介

    当前项目暂无项目简介

    发行版本

    当前项目没有发行版本

    贡献者 55

    全部贡献者

    开发语言

    • TypeScript 65.8 %
    • JavaScript 21.5 %
    • Vue 6.5 %
    • CSS 3.2 %
    • Less 2.8 %