Skip to main content

The github.dev web-based editor

Use the github.dev 基于 Web 的编辑器 from your repository or pull request to create and commit changes.

Note: The github.dev 基于 Web 的编辑器 is currently in beta preview. You can provide feedback in our Discussions.

About the 基于 Web 的编辑器

The 基于 Web 的编辑器 introduces a lightweight editing experience that runs entirely in your browser. With the 基于 Web 的编辑器, you can navigate files and source code repositories from GitHub, and make and commit code changes. You can open any repository, fork, or pull request in the editor.

The 基于 Web 的编辑器 is available to everyone for free on GitHub.com.

The 基于 Web 的编辑器 provides many of the benefits of Visual Studio Code, such as search, syntax highlighting, and a source control view. You can also use Settings Sync to share your own Visual Studio Code settings with the editor. For more information, see "Settings Sync" in the Visual Studio Code documentation.

The 基于 Web 的编辑器 runs entirely in your browser’s sandbox. The editor doesn’t clone the repository, but instead uses the GitHub Repositories extension to carry out most of the functionality that you will use. Your work is saved in the browser’s local storage until you commit it. You should commit your changes regularly to ensure that they're always accessible.

Opening the 基于 Web 的编辑器

You can open any GitHub repository in the 基于 Web 的编辑器 in either of the following ways:

  • Press . while browsing any repository or pull request on GitHub.
  • Change the URL from "github.com" to "github.dev".

Codespaces and the 基于 Web 的编辑器

Both the 基于 Web 的编辑器 and Codespaces allow you to edit your code straight from your repository. However, both have slightly different benefits, depending on your use case.

基于 Web 的编辑器Codespaces
CostFree.Costs for compute and storage. For information on pricing, see "Codespaces pricing."
AvailabilityAvailable to everyone on GitHub.com.Available for organizations using GitHub Team or GitHub Enterprise Cloud.
Start upThe 基于 Web 的编辑器 opens instantly with a key-press and you can start using it right away, without having to wait for additional configuration or installation.When you create or resume a codespace, the codespace is assigned a VM and the container is configured based on the contents of a devcontainer.json file. This set up may take a few minutes to create the environment. For more information, see "Creating a Codespace."
ComputeThere is no associated compute, so you won’t be able to build and run your code or use the integrated terminal.With Codespaces, you get the power of dedicated VM on which you can run and debug your application.
Terminal accessNone.Codespaces provides a common set of tools by default, meaning that you can use the Terminal exactly as you would in your local environment.
ExtensionsOnly a subset of extensions that can run in the web will appear in the Extensions View and can be installed. For more information, see "Using extensions."With Codespaces, you can use most extensions from the Visual Studio Code Marketplace.

Continue working on Codespaces

You can start your workflow in the 基于 Web 的编辑器 and continue working on a codespace, provided you have access to Codespaces. If you try to access the Run and Debug View or the Terminal, you'll be notified that they are not available in the 基于 Web 的编辑器.

To continue your work in a codespace, click Continue Working on… and select Create New Codespace to create a codespace on your current branch. Before you choose this option, you must commit any changes.

A screenshot that shows the "Continue Working on" button in the UI

Using source control

When you use the 基于 Web 的编辑器, all actions are managed through the Source Control View, which is located in the Activity Bar on the left hand side. For more information on the Source Control View, see "Version Control" in the Visual Studio Code documentation.

Because the web-based editor uses the GitHub Repositories extension to power its functionality, you can switch branches without needing to stash changes. For more information, see "GitHub Repositories" in the Visual Studio Code documentation.

Create a new branch

  1. 如果当前分支未显示在状态栏中,请在代码空间的底部右键单击状态栏,然后选择 Source control(源控制)
  2. 单击状态栏中的分支名称。 状态栏中的分支
  3. 在下拉菜单中,单击要切换到的分支或输入新分支的名称,然后单击 Create new branch(创建新分支)从分支菜单中选择 Any uncommitted changes you have made in your old branch will be available on your new branch.

Commit your changes

  1. 在活动栏中,单击 Source Control(源控制)视图。 源控制视图
  2. 要暂存更改,请单击已更改文件旁边的 +;如果您更改了多个文件并且要全部暂存,请单击 Changes(更改)旁边的该按钮。 高亮显示暂存按钮的源控制侧边栏
  3. 输入提交消息,描述您所做的更改。 带有提交消息的源控制侧栏
  4. 要提交暂存的更改,请单击源控制侧栏顶部的复选标记。 单击复选标记图标
  5. Once you have committed your changes, they will automatically be pushed to your branch on GitHub.

Create a pull request

  1. 将更改提交到仓库的本地副本后,请单击 Create Pull Request(创建拉取请求)图标。 高亮显示暂存按钮的源控制侧边栏
  2. 检查作为合并来源的本地分支和仓库以及作为合并目标的远程分支和仓库是否正确。 然后为拉取请求提供标题和描述。 高亮显示暂存按钮的源控制侧边栏
  3. 单击 Create(创建)

Working with an existing pull request

You can use the 基于 Web 的编辑器 to work with an existing pull request.

  1. Browse to the pull request you'd like to open in the 基于 Web 的编辑器.
  2. Press . to open the pull request in the 基于 Web 的编辑器.
  3. Once you have made any changes, commit them using the steps in Commit your changes. Your changes will be committed directly to the branch, it's not necessary to push the changes.

Using extensions

The 基于 Web 的编辑器 supports Visual Studio Code extensions that have been specifically created or updated to run in the web. These extensions are known as "web extensions". To learn how you can create a web extension or update your existing extension to work for the web, see "Web extensions" in the Visual Studio Code documentation.

Extensions that can run in the 基于 Web 的编辑器 will appear in the Extensions View and can be installed. If you use Settings Sync, any compatible extensions are also installed automatically. For information, see "Settings Sync" in the Visual Studio Code documentation.

Troubleshooting

If you have issues opening the 基于 Web 的编辑器, try the following:

  • Make sure you are signed in to GitHub.
  • Disable any ad blockers.
  • Use a non-incognito window in your browser to open the 基于 Web 的编辑器.

Known limitations

  • The 基于 Web 的编辑器 is currently supported in Chrome (and various other Chromium-based browsers), Edge, Firefox, and Safari. We recommend that you use the latest versions of these browsers.
  • Some keybindings may not work, depending on the browser you are using. These keybinding limitations are documented in the "Known limitations and adaptations" section of the Visual Studio Code documentation.
  • . may not work to open the 基于 Web 的编辑器 according to your local keyboard layout. In that case, you can open any GitHub repository in the 基于 Web 的编辑器 by changing the URL from github.com to github.dev.