VSCodeでGitを利用する＋Github連携まで（WSL1編）
先日VSCode上から初めてGitとGithubにリポジトリをプッシュしてきたので、備忘録として書く。 batファイルは使いません。
今回の対象読者
前提条件
- WSL1（Windows Subsystem for Linux）にGitをインストールしていること
- Githubのアカウントを所持していること
- Githubにあるリポジトリの新規で作成する方法を知っていること
今回は申し訳ないのですが、WSL1にGitをインストールする方法は省略させていただきます。インストールしてなければ以下の記事にある「インストール」と「gitの設定」の部分だけやっておいてください。
今回使用した動作環境
Windows10 Home Version1903の
Ubuntu 18.04 LTS（WSL1）
サンプルコード
※中身は2つとも同じです
記事で紹介する手順に沿って作成したバージョン github.com
ブログのサンプルコード用リポジトリに置いたバージョン github.com
手順
1.VSCodeにWSL側のディレクトリにアクセスするための拡張機能を導入
Remote-WSLという拡張機能をインストールします。
インストールが終わって、問題なければ左下に><みたいな枠が出現しているはずです。その枠をクリックすると上のコマンド枠から色々項目が出てくるのでその中からRemote-WSL: New Window using Distroを選択します。使いたいWSLのディストリビューションを選ぶことで使用可能になります。
Remote-WSLが使用可能になった後はパソコンのアイコンとリモートエクスプローラーが出現します。
WindowsのエクスプローラーのWSL版みたいなもので、WSL側のディレクトリを読み書き出来るようになります。
2.WSL側のGitをVSCodeに認識させる
まずCtrl+Shift+@でターミナルタブを表示させて、以下コマンドでGitがインストールされていることを確認してください。バージョンが表示されるはずです。
git --version
3.試しにサンプルをGitでソース管理し、コミットする
画面左にある縄みたいなアイコンをクリックしてください。 WSLのGitが認識されてソース管理メニューが出てきます。
ここでWSLのディレクトリを新たに作って、サンプルコードを置いてみましょう。ディレクトリはmkdirコマンドで作成ができます。
今回は以下のコマンドでルートディレクトリ直下にgithub_vscodeディレクトリを作成しました（個人によって変わる部分は伏せ字にしてます）。
〇〇@DESKTOP-△△△△△△:~$ mkdir github_vscode
github_vscodeにディレクトリを移動したあとcode .コマンドでVSCodeを同ディレクトリで開くことができます。
〇〇@DESKTOP-△△△△△△:~/github_vscode$ code .
作成したディレクトリには2つのファイルを設置しました。
- index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sample Page</title>
</head>
<body>
<h1>Sample</h1>
<p>VSCodeからGitをコミットしました</p>
<p>さらにコミットしたものをGithubをプッシュしました</p>
</body>
</html>
- README.md
# 本リポジトリについて Visial Studio Code で Git のコミットから Github へのプッシュまで行う記事のサンプルコードです。 ### ブログリンク https://katanugramer.hatenablog.com/
設置した後、再びソース管理タブに戻ります。今回はリポジトリを初期化するボタンをクリックします。
するとサンプルコードがソース管理タブに出現しているはずです。UアイコンはUntrackedの略でGitにステージされていない状態です。
ここからGitにコミットするまでの基本的な操作の流れはこうなります（あくまで例なので場合によってはその都度対応してください）。
1.変更にフォーカスをおくと表示される+ボタン（すべての変更をステージ）をクリック、ステージング済みの変更タブにファイルが追加される
2.メッセージボックスにコミット用メッセージを入力、チェックボタン（コミット）をクリック（サンプルでのメッセージはfirst commitにしています）
3.変更にフォーカスをおくと表示されるチェックボタン（コミット）をクリック
4.VSCodeで管理したGitからGithubに直接コミットする
Githubで新規リポジトリ（リポジトリ名は何でもいいです）を作成してください。 作成すると次の形式のURLが発行されます。これをVSCodeのGitをGithubにプッシュして登録するためのURLになります。
https://github.com/[アカウント名]/[リポジトリ名].git
VSCodeに戻ってCtrl+shift+pをクリックし画面のように入力、Git: リモートの追加を押してください。
リポジトリURLの入力を指示されるのでさっきの~.gitのURLを入力してください。
そしてURLからリモートを追加するを押してください。そこでさらにリモート名の入力を指示されるので、originと入力します。
最後にVSCodeの左下の雲マークをクリックすると、VSCodeのGitがリモート先のGithubリポジトリへのプッシュが開始されます。少し待って下のスクリーンショットの矢印マークになっていればGithubへのプッシュは成功です。
今回の手順は以上です。お疲れ様でした。
おまけ（オススメ記事の紹介）
今回の記事をもう少し詳しく説明した記事がatmarkITさんの方で記事があがっています。数年前の記事のため、今とアイコンが変わっている箇所がありますが、流れは変わっていません。またサンプルコードはC#で紹介されていますが、別の言語で置き換えてもらえば問題ありません。 本記事で字数的な問題で端折った部分についても詳しく解説されています。
この記事のWSL2版は今月中には導入して動作に慣れてきたら、出そうかなと思ってます（もし方法が変わってなかったら本記事に追記します。。。）。
*1:わからない人はお馴染みサルワカ読んできてください サル先生のGit入門〜バージョン管理を使いこなそう〜【プロジェクト管理ツールBacklog】
