Github Codespacesによるエンドツーエンド開発者経験

我々がこのポストに飛び込む前に、Githubユニバース2020はエキサイティングなコンテンツをたくさん持っていました.Build community-driven software projects on GitHub
あなたのプロジェクトの最新の変更を行ったどのデバイスについて心配しないことを想像してください.あなたのラップトップからGithubにプッシュし、まだあなたの表面を移動または計算されたを使用して移動を続けることができることを忘れて想像してください.あなたがコードをデバイスに絶対的な自由がある世界を描く.

聞いたに違いないCodespaces そして、どのように、あなたはあなたのブラウザーまたはVsコードからコードを書くことができます.あなたがおそらくする時間がなかったかどうかをCodespacesのような感じの最初の手の経験を持ってどのように有益なことができます.私がこの記事を書いた理由は、あなたにCodesaceの感触を与えることです.

Codespacesの設定

CodeSpaceを作成するには、次の手順を実行する必要があります.

倉庫

少なくとも倉庫のファイル

Codespaces要件
基本的なノードプロジェクトを作成し、リポジトリにコミットすることによって、これらの要件を取り出そう

# Create a project directory
mkdir oauth-with-github && cd oauth-with-github

# Add a server and .gitignore files
echo "console.log('Welcome to Codespaces')" >> server.js
echo "node_modules" >> .gitignore

# Add a package.json file
npm init -y

# Install nodemon for watching
npm install -D nodemon

加えるdev 文字列package.json nodemonコマンドを起動してサーバを監視するために使用できるファイル

# ./package.json
"scripts": {
    "dev": "nodemon server.js"
}

Create an empty repository READMEまたは他のファイルを使用せずに、作成した新しいプロジェクトをプッシュします.

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin <REPO URL>
git push origin main

# Feel free to delete the project locally
# 1. You don't need it anymore since you will be cloud-coding
# 2. You safe your future self the confusion of having 2 copies
cd ../
rm -rf oauth-with-github

CodeSpacesを使ったオープンリポジトリ
Githubのプロジェクトを持ったら、クローンまたはダウンロードボタンをクリックしてCodeSpacesでプロジェクトを開くことができます.

ドロップダウンメニューからCodeSpacesで開くをクリックし、このリポジトリに作成したすべてのCodeSpacesを公開します.あなたが何も作成していないので、それは新しいものをつくるためにボタンで空になります.

ボタンをクリックし、GithubをクリックしてCodeSpaceを初期化します

一旦それがされるならば、あなたは非常に身近な観察で示されます-対コード:

ローカルコード対コード

それはまだあなたが直接ブラウザからコードをコードを感じることはありません-私はそれを得る.私は、あなたに時間がないということを理解しますpersonalize the browser-based VS Code あなたの現在のローカル設定に一致する.「それは暗いテーマでさえありません」、私はあなたを聞きます.
スピードアップするために、我々がすることができることはあなたのCodespacesに対するSSHです.

あなたのコードは雲であるので、それは装置非依存です

あなたのお気に入りのエディタを使用してお好みと設定

すべてのシェルコマンドを実行できるように、リモートターミナルにアクセスできます

コードコードからCodeSelaceに接続するには、次の手順を実行する必要があります.

Visual Studio CodeSpaces拡張モジュールをGithubアカウントに接続する

CodeSaceをVSコードから開きます.

完全な最初のステップは、次のthese setup steps CodeSpaces対コード拡張をインストールし、Githubアカウントにアクセスする権限を付与します.
CodeDapces拡張モジュールがインストールされ、承認されたら、2番目のステップに移動できます.VSコードサイドバーからリモート探索サイドバーメニューを開き、すべてのコードパスを見つけてください.

CodeSpaceの上にホバリングするときに表示されるCodePaceアイコンに接続をクリックします.

数秒後に接続すると、コードを開くあなたのcodesaceを開く必要があります.以下のスクリーンショットから、あなたは、私のテーマとVSの設定がちょうどそれが好きであることを見ることができます

CodeSpaceをCodeSelame名でVSコードの左下に区別できます.
言及する1つの最後の涼しいものは、あなたがGithubに変化を押すほうを選ぶことができるということです.あなたはもっと学ぶことができますhow to do this from VS Code .