DOCSEARCHbyAlgolia
Submit Docs

GitHub Actions for VS Code

repository·main·Indexed 20 days ago

https://github.com/github/vscode-github-actions

An extension that allows developers to manage, monitor, and author GitHub Actions workflows for github.com hosted repositories directly within the VS Code editor. It provides capabilities to cancel, rerun, and pin workflows, view job logs, and manage repository and environment secrets.

Tokens
12.3K
Snippets
41
Records
52
Agent score
68%

What's inside vscode-github-actions

  1. Manage workflows and runs in VS Code

    main

    You can manage your CI/CD lifecycle directly within the editor using the GitHub Actions icon in the left navigation bar:

    • Monitor Workflows: View your workflow run history and keep track of CI builds and deployments.
    • Investigate Failures: View logs and investigate specific workflow run failures without leaving VS Code.
    • Manage Configuration: Modify settings such as Environments, Secrets, and Variables.

  3. Set up local development environment

    main

    This project uses npm workspaces to link multiple packages. To develop locally, you should create a dedicated workspace folder to house the repository and its dependencies.

    1. Create a workspace directory:
      mkdir ~/vscode
cd ~/vscode
    2. Clone the repository and run the bootstrap script to pull in required repositories:
      gh repo clone github/vscode-github-actions
cd vscode-github-actions
script/bootstrap
    3. Install workspace packages and build:
      cd ~/vscode
npm i
npm run build -ws

    Note: If npm run build -ws fails due to incorrect package installation, re-run script/bootstrap and then run npm ci to ensure working packages.

    mkdir ~/vscode
cd ~/vscode
gh repo clone github/vscode-github-actions
cd vscode-github-actions
script/bootstrap
cd ~/vscode
npm i
npm run build -ws

  4. Update package-lock.json files for individual packages

    main

    Because npm workspaces hoists all dependencies into a shared node_modules folder at the workspace root and creates a single package-lock.json for the entire workspace, the local lockfiles in individual package directories may not be correct for pushing back to their respective repositories.

    To generate correct, individual package-lock.json files for each package, run the update-package-locks.sh script located in the workspace root directory (/workspaces/ or ~/vscode/). This script performs an npm install in every package directory without using workspaces.

  5. Develop and debug the extension

    main

    To make changes and test the extension:

    1. Open the Workspace: In VS Code, use File -> Open Workspace from File... and select the .code-workspace file.
      • On Codespaces, use: /workspaces/vscode-github-actions.code-workspace
      • For local development, use the path to your created folder (e.g., ~/vscode/vscode-github-actions.code-workspace).
    2. Build Changes: After modifying any package, run npm run build -ws from the workspace root directory.
    3. Prepare VS Code: Uninstall or disable the existing Actions extension in your development instance of VS Code to avoid conflicts.
    4. Launch: Use the Watch & Launch Extension configuration from the VS Code "Run and Debug" side panel.
    5. Test: Open a workspace in the remote extension host that contains .github/workflows files.

  6. Install and set up GitHub Actions for VS Code

    main

    To use the GitHub Actions extension, follow these steps:

    1. Install the extension: Search for and install GitHub Actions from the Visual Studio Code Marketplace.
    2. Authenticate: Sign in with your GitHub account and grant the GitHub Actions extension permission to access your account.
    3. Open a repository: Open a GitHub repository locally in VS Code.

    Note on Remote Repositories: The extension does not currently support remote repositories (such as github.dev or vscode.dev). For the best experience, use the extension with locally cloned GitHub repositories.

    Note on Enterprise Server: Support for GitHub Enterprise Server is currently in experimental beta. To use it, enable the use-enterprise setting to authenticate via your GitHub Enterprise Server Authentication Provider settings.

  7. Author workflows with syntax highlighting, validation, and completion

    main

    The extension provides advanced tooling for editing .github/workflows/*.yml files to ensure accuracy before committing:

    • Syntax Highlighting: Provides visual clarity for workflow YAML and GitHub Actions Expressions, making it easy to identify values inserted at execution time.
    • Integrated Documentation: Hover over workflow schema elements, expression functions, or event payloads to see descriptions via tooltips.
    • Validation and Code Completion:
      • Provides instant validation for the YAML schema and GitHub Actions Expressions.
      • Offers code completion for the workflow schema, expression functions, event payloads, and job or step outputs.
    • Smart Validation for Actions and Reusable Workflows: The extension automatically parses parameters, inputs, and outputs for referenced actions and called reusable workflows to provide context-aware code completion and validation.

  8. Connect to an Actions Job Debugger

    main

    You can start a debugging session by connecting to a specific GitHub Actions job using its URL.

    1. Run the command github-actions.debugger.connect from the VS Code Command Palette.
    2. When prompted, paste the URL of the Actions job you wish to debug. A valid URL follows this format: https://github.com/owner/repo/actions/runs/123/job/456
    3. The extension will attempt to fetch the debugger tunnel URL via the GitHub API. You may be prompted to sign in to GitHub if you are not already authenticated.

    Note: Debugging is only available in the VS Code Desktop application and requires the job to be running with debugging enabled.

    github-actions.debugger.connect

  9. Enable GitHub Actions job debugging

    main

    To use the debugger for GitHub Actions jobs, you must explicitly enable it in your VS Code settings. If you enable it in an empty window, you must reload VS Code manually for the extension to activate and prompt you.

    Add the following to your settings.json:

    "github-actions.debugger.enabled": true

  11. Add a repository or environment secret

    main

    You can add new secrets to your GitHub repository or a specific environment using the github-actions.settings.secret.add command.

    When triggered, the extension will prompt you for:

    1. Name: The name of the new secret.
    2. Value: The sensitive value to be stored.

    The command automatically determines whether to create a Repository Secret or an Environment Secret based on the context provided by the UI (e.g., if you are accessing the command from an Environment settings node). After a successful addition, the GitHub Actions explorer is refreshed to show the new secret.

    // This command is typically invoked via the VS Code Command Palette or UI tree views
// using the command ID:
// github-actions.settings.secret.add

  12. Open a workflow YAML file via command

    main

    The github-actions.explorer.openWorkflowFile command allows opening a specific workflow file within the current VS Code workspace. This command is typically triggered from the GitHub Actions explorer. It requires a GitHubRepoContext and a Workflow object to resolve the file's URI and open the corresponding text document.

    // Note: This command is intended to be invoked by the extension's internal UI (e.g., the Explorer view).
// If calling via vscode.commands.executeCommand, you must provide the required arguments:

await vscode.commands.executeCommand("github-actions.explorer.openWorkflowFile", {
  gitHubRepoContext: myGitHubRepoContext,
  wf: myWorkflowObject
});