# @adityasinghal26/plugin-github-codespaces 中文文档

规范地址：https://npmcn.com/package/%40adityasinghal26/plugin-github-codespaces/

版本：1\.0\.4
npm 元数据更新时间：2024-03-16T14:20:48.720Z
中文译文更新时间：2026-11-06T08:44:39.217Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40adityasinghal26/plugin-github-codespaces
原文对照：https://npmcn.com/package/%40adityasinghal26/plugin-github-codespaces/?lang=original
项目主页：https://github.com/adityasinghal26/backstage-plugins#readme
源码仓库：https://github.com/adityasinghal26/backstage-plugins

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：125 kB，19 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：11 个
- peer 依赖：react ^16\.13\.1 \|\| ^17\.0\.0
- 首次发布：2023-12-20T18:23:38.738Z
- 最新版本发布：2024-03-16T14:20:48.303Z
- 近 30 天下载量：3740（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 0 个）

## 中文简介

直接从后台平台与您的 GitHub 代码空间交互 .

## 安装

```sh
npm install @adityasinghal26/plugin-github-codespaces
```

也可以使用：`pnpm add @adityasinghal26/plugin-github-codespaces`、`yarn add @adityasinghal26/plugin-github-codespaces`、`bun add @adityasinghal26/plugin-github-codespaces`

## README

# GitHub 编码空间插件

直接从后台平台与您的 GitHub 代码空间交互 .

GitHub Codespaces 允许您从您的 GitHub 寄存器创建 Devcontainer 并立即进入开发模式 。 更多文件,请访问文件下方。 您也可以在登录到 GitHub 后, 通过下面的网站链接查看您的代码空间 .

联合国 [https://docs.github.com/en/codespaces (中文(简体) )](https://docs.github.com/en/codespaces)

网站: [https://github.com/ 编码空间](https://github.com/codespaces)

## 特征

-   以 Github( 有“ repo” 和“ 代码空间” 权限) 认证用户
-   列出所有认证用户的代码空间
-   为认证的用户在项目仓库中列出代码空间
-   列出以显示名称作为认证用户实体名称的代码空间
-   创建/ 启动一个实体的新代码空间( 显示名称为实体名称)
-   密码空间的插座

## 截图

1.  GitHub 代码空间菜单

![GitHub Codespaces](https://npmcn.com/package/%40adityasinghal26/plugin-github-codespaces/images/GithubCodespacesPage.png)

2.  开始代码空间部件

![Start Codespaces](https://npmcn.com/package/%40adityasinghal26/plugin-github-codespaces/images/EntityGithubCodespacesWidget.png)

3.  开始和列出代码空间卡

![Start and List Codespaces](https://npmcn.com/package/%40adityasinghal26/plugin-github-codespaces/images/EntityGithubCodespacesCard.png)

4.  列表代码空间内容( 为实体过滤)

![List Codespaces Entity](https://npmcn.com/package/%40adityasinghal26/plugin-github-codespaces/images/EntityGithubCodespacesContent.png)

5.  列表代码空间内容( 为项目仓库过滤)

![List Codespaces Repository](https://npmcn.com/package/%40adityasinghal26/plugin-github-codespaces/images/EntityGithubCodespacesRepoContent.png)

## 设置

### 一般要求

1.  提供 OAuth 证书 :
    
    1.  [创建 OAuth 应用程序](https://developer.github.com/apps/building-oauth-apps/creating-an-oauth-app/) 在 GitHub 组织中,调用 URL 设置为 `http://localhost:7007/api/auth/github/handler/frame`。 。 。 .
    2.  从新创建的应用程序设置页面中取取客户端ID和客户端机密并将其放入 `AUTH_GITHUB_CLIENT_ID` 财务报告和审定财务报表 `AUTH_GITHUB_CLIENT_SECRET` 环境变量.
2.  用正确的 GitHub 动作存储器和所有者注释您的组件 :
    
    注释键是 `github.com/project-slug`。 。 。 .
    
    示例
    
    ```yaml
    apiVersion: backstage.io/v1alpha1
    kind: Component
    metadata:
      name: backstage
      description: backstage.io
      annotations:
        github.com/project-slug: 'backstage/backstage'
        # Add below annotation for a custom devcontainer configuration with
        # relative path of devcontainer.json file from root of the repository
        github.com/devcontainer-path: .devcontainer/devcontainer.json 
    spec:
      type: website
      lifecycle: production
      owner: user:guest
    ```
    

### 独立应用程序要求

1.  在您的后台应用程序包中安装插件依赖性 :

```bash
# From your Backstage root directory
yarn add --cwd packages/app @adityasinghal26/plugin-github-codespaces
```

2.  添加到应用程序 `EntityPage` 组件 :

```tsx
// In packages/app/src/components/catalog/EntityPage.tsx
import {
  EntityGithubCodespacesWidget,
  EntityGithubCodespacesCard,
  EntityGithubCodespacesContent,
  EntityGithubCodespacesRepoContent
  isGithubCodespacesAvailable,
} from '@adityasinghal26/plugin-github-codespaces';

// Create the codespaces tab content for Github Codespaces
const codespacesContent = (
  <>
    {/* Add this entity switch to view the list 
    of codespaces filtered with entity name */}
    <EntitySwitch>
      <EntitySwitch.Case if={isGithubCodespacesAvailable}>
        <Grid item xs={12}>
          <EntityGithubCodespacesContent />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>
    {/* Add this entity switch to view the list 
    of codespaces filtered with repository */}
    <EntitySwitch>
      <EntitySwitch.Case if={isGithubCodespacesAvailable}>
        <Grid item xs={12}>
          <EntityGithubCodespacesRepoContent />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>
  </>
);

// You can add the overview widget and card to overviewContent as below
// this overview content can be used any number of pages
const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
    {/* other grids... */}
    {/* Add this entity switch to add the Start Codespace widget  */}
    <EntitySwitch>
      <EntitySwitch.Case if={e => Boolean(isGithubCodespacesAvailable(e))}>
        <Grid item md={6} xs={12}>
          <EntityGithubCodespacesWidget />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>
    {/* Add this entity switch to add the Start and List Codespace card.
    You can set enableStart as 'true' to show the Start Codespace button.
    If left unset or set as 'false', the Start Codespace button will be unavailable.   */}
    <EntitySwitch>
      <EntitySwitch.Case if={e => Boolean(isGithubCodespacesAvailable(e))}>
        <Grid item md={6} xs={12}>
          <EntityGithubCodespacesCard enableStart={true} />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>
  </Grid>
);

// You can add the tab to any number of pages, the service page is shown as an
// example here
const serviceEntityPage = (
  <EntityLayout>
    {/* other tabs... */}
    <EntityLayout.Route 
        if={isGithubCodespacesAvailable} 
        path="/github-codespaces" 
        title="GitHub Codespaces">
      {codespacesContent}
    </EntityLayout.Route>
```

3.  运行应用程序 `yarn start` 后端为 `yarn start-backend`。 。 。 . 然后导航到 `/github-codespaces/` 在任何实体之下.

### 应用程序菜单要求

确保所需软件包如上第1个步骤所安装.

1.  添加到应用程序 `App.tsx` 组件 :

```tsx

// In packages/app/src/App.tsx
import { GithubCodespacesPage } from '@adityasinghal26/plugin-github-codespaces';

// Add the route to the App path routes
const routes = (
  <FlatRoutes>
  {/* other routes here */}
      <Route path="/github-codespaces" element={<GithubCodespacesPage />} />
  </FlatRoutes>
);
```

2.  添加到应用程序 `Root.tsx` 组件 :

```tsx

// In packages/app/src/components/Root/App.tsx
import { GitHubIcon } from '@backstage/core-components';
import { GithubCodespacesPage } from '@adityasinghal26/plugin-github-codespaces';

// Add the menu to the Root menu sidebar
export const Root = ({ children }: PropsWithChildren<{}>) => (
  <SidebarPage>
    <Sidebar>
    {/* other sidebar items here */}
    {/* add inside "Menu" SidebarGroup */}
      <SidebarItem icon={GitHubIcon} to="github-codespaces" text="Codespaces" />
    {/* other sidebar items here */}
    </Sidebar>
    {children}
  </SidebarPage>
);
```

## 限制

-   任何开始使用实体GithubCodespacesWidget或实体GithubCodespacesCard动作的代码空间都会创建一个与实体名称完全相同的显示名称的新代码空间.
-   一旦创建了代码空间,只能从部件/卡片动作开始代码空间.
-   该插件尚未支持 GitHub Entertainment 。 该功能将在下一期中被扩展.

## 常见问题

### @adityasinghal26/plugin-github-codespaces 是什么？

直接从后台平台与您的 GitHub 代码空间交互 \.

### 如何安装 @adityasinghal26/plugin-github-codespaces？

在项目目录运行 npm install @adityasinghal26/plugin-github-codespaces，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.13\.1 \|\| ^17\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @adityasinghal26/plugin-github-codespaces 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @adityasinghal26/plugin-github-codespaces 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @adityasinghal26/plugin-github-codespaces 可以商用吗？

@adityasinghal26/plugin-github-codespaces 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @adityasinghal26/plugin-github-codespaces 的下载量有多少？

根据 npm 官方下载统计，@adityasinghal26/plugin-github-codespaces 在 2026/10/05 – 2026/11/03 这 30 天内被下载 3,740 次，日均约 125 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @adityasinghal26/plugin-github-codespaces 还在维护吗？

最新版本 1\.0\.4 发布于 2024/03/16（2 年前）；至今共发布 8 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/12/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。