Quickstart for Codespaces

はじめに

In this guide, you'll create a codespace from a template repository and explore some of the essential features available to you within the codespace.

From this quickstart, you will learn how to create a codespace, connect to a forwarded port to view your running application, use version control in a codespace, and personalize your setup with extensions.

For more information on exactly how Codespaces works, see the companion guide "Deep dive into Codespaces."

codespace を作成する

1. Navigate to the template repository and select Use this template.

2. Name your repository, select your preferred privacy setting, and click Create repository from template.

3. Navigate to the main page of the newly created repository. Under the repository name, use the Code drop-down menu, and in the Codespaces tab, click Create codespace on main.

   

Running the application

Once your codespace is created, your repository will be automatically cloned into it. Now you can run the application and launch it in a browser.

1. Since this example uses a Node.js project, start the application by entering npm run dev in the terminal. このコマンドは、package.json ファイルの dev スクリプトを実行し、サンプルリポジトリで定義された Web アプリケーションを起動します。

   

   If you're following along with a different application type, enter the corresponding start command for that project.

2. When your application starts, the codespace recognizes the port the application is running on and displays a prompt to let you know it has been forwarded.

   

3. [Open in Browser] をクリックして、実行中のアプリケーションを新しいタブで表示します。

Edit the application and view changes

1. Switch back to your codespace and open the haikus.json file by double-clicking it in the File Explorer.

2. Edit the text field of the first haiku to personalize the application with your own haiku.

3. Go back to the running application tab in your browser and refresh to see your changes.

   If you've closed the tab, open the Ports panel and click the Open in browser icon for the running port.

Committing and pushing your changes

Now that you've made a few changes, you can use the integrated terminal or the source view to commit and push the changes back to the remote.

1. Activityバーで、Source Control（ソースコントロール）ビューをクリックしてください。
2. 変更をステージングするには、変更したファイルの隣にある [+] をクリックするか、複数のファイルを変更してすべてをステージングする場合は [Changes] の隣をクリックします。
3. 行った変更について説明するコミットメッセージを入力します。
4. ステージングされた変更をコミットするには、ソースコントロールサイドバーの上部にあるチェックマークをクリックします。
   You can push the changes you've made. それにより、変更がリモートリポジトリの上流ブランチに適用されます。 プルリクエストの作成準備が整っていない場合、または GitHub でプルリクエストを作成する場合は、この操作を行うことをお勧めします。
5. サイドバーの上部にある省略記号(...) をクリックします。
6. ドロップダウンメニューで、[Push] をクリックします。

Personalizing with an extension

Within a codespace, you have access to the Visual Studio Code Marketplace. For this example, you'll install an extension that alters the theme, but you can install any extension that is useful for your workflow.

1. 左サイトバーで、[Extensions] アイコンをクリックします。

2. 検索バーに「fairyfloss」と入力し、fairyfloss の機能拡張をインストールします。

   

3. リストから fairyfloss のテーマを選択します。

   

4. Changes you make to your editor setup in the current codespace, such as theme and keyboard bindings, are synced automatically via Settings Sync to any other codespaces you open and any instances of Visual Studio Code that are signed into your GitHub account.

次のステップ

codespace で最初のアプリケーションを正常に作成、パーソナライズ、および実行しましたが、その他にもできることはまだまだたくさんあります。 Codespaces で次のステップを実行するための役立つリソースは以下のとおりです。

• Deep dive: This quickstart presented some of the features of Codespaces. The deep dive looks at these areas from a technical standpoint.
• Setting up your project for Codespaces: These guides provide information on setting up your project to use Codespaces with specific languages.
• Configuring Codespaces for your project: This guide provides details on creating a custom configuration for Codespaces for your project.

参考リンク

• Enabling Codespaces for your organization
• Managing billing for Codespaces in your organization