Windows上のVSCodeでWSLのgitを使う

PR 投稿日：2020年12月24日 更新日：

nocap

バージョン管理ソフトのgitをWindowsで使う場合、Windows向けのgitを使う方法と、Windows Subsystem for Linux (WSL)上のLinux向けのgitを使う方法の2種類の選択しがあると思います。システム開発を行う場合は、Linux環境の方が何かと便利ですので、WSL上のgitを使いたいと考えました。とくにVisual Studio Code（VSCode）でWSLを使うことができるので、このVSCodeの中でWSLのgitを使えるようにしてみました。

事前準備

以下を導入しておきます。

  • WSL2 ubuntu (WSL1でもよい）
    • git
  • VSCode
    • 拡張機能：Remote development

Windows上にWSLとVSCodeをインストールし、WSLにはgit（初期状態で入っていると思われる）を、VSCodeには拡張機能のRemote developmentを入れていることを前提とします。

VSCodeにRemote developmentを入れると、WSLが使えるようになります。

gitの初期設定

WSL上の端末（ターミナル）で以下のコマンドを入力し、gitを使うユーザのメールアドレスとユーザ名を登録しておきます。これはgitを使い始める最初に一度入力すれば後は、再度入力する必要はありません。

$ git config --global user.email "<メールアドレス>"
$ git config --global user.name "<ユーザ名>"

GitHubの初期設定

リモートリポジトリとして、ここではGitHubを利用することにします。 初期設定の手順は下記の通りです[1]。 リモートリポジトリを利用しない場合は飛ばしてもらっても構いません。

アカウント登録する

GitHubのアカウントを持っていなければ、https://github.com/にアクセスし登録してください。

鍵生成

WSLのローカルからGitHubにSSH接続するための鍵を生成します。デフォルトの鍵名（id_rsa）をすでに作成しているなら、違う名前にします。以下ではid_git_rsaという名前にしています。

$ cd ~/.ssh  #.sshディレクトリが存在しなければ、 $make ~/.ssh で作成する
$ ssh-keygen -t rsa

Generating public/private rsa key pair.
Enter file in which to save the key (/home//.ssh/id_rsa): /home//.ssh/id_git_rsa # 秘密鍵の名前を指定
Enter passphrase (empty for no passphrase):  #パスワードを入力
Enter same passphrase again:  # もう一度入力
Your identification has been saved in id_git_rsa.
Your public key has been saved in id_git_rsa.pub.

ここで入力したパスワードを忘れないようにしましょう。

公開鍵をGibHubに登録

上記で生成した鍵を、GitHubに登録します。まず、GitHubのサイトにアクセスし、自分のアカウントでログインしてください。そこから右上のアイコンから”Settings” > 左の欄の”SSH and GPG keys” > “New SSH key” を選びます。

gitHubへの公開鍵の登録
Fig.1. gitHubへの公開鍵の登録

表示された画面に以下を入力します。

  • Title： なんでも。わかりやすいものをつける
  • Key：作成した公開鍵（例：id_git_rsa.pub）の中身をコピペする。端末上で以下のコマンド入力でコピーができる。
$ cat ~/.ssh/id_git_rsa.pub | clip.exe #公開鍵の中身をクリップボードにコピー

入力できたら”Add SSH key”を押します。

SSHの設定と接続

configファイルの中身を編集します。

vim ~/.ssh/config

下記をconfigファイルに追記

  Host github
  HostName github.com
  IdentityFile ~/.ssh/id_git_rsa #秘密鍵を指定
  User git

権限を修正します（ホームディレクトリをwslでなくwindows上に変更している場合、下記では変更できない模様[2])

$ chmod 600 ~/.ssh/config

ssh-agentに秘密鍵を登録します。

ssh-add ~/.ssh/id_git_rsa
Enter passphrase for /home//.ssh/id_git_rsa: #鍵のパスワードを入力する
Identity added: /home//.ssh/id_git_rsa

接続確認をします。

$ ssh -T git@github.com
Hi <githubアカウント名>! You've successfully authenticated, but GitHub does not provide shell access.
商品画像
アイリスオーヤマ モニター台 幅59cm ブラック
icon 今すぐ購入
商品画像
Pixio PS1S Wave Black モニターアーム シングル
icon 今すぐ購入
商品画像
UGREEN 当社最小の巻き取り式充電器 45W 急速充電器
icon 今すぐ購入

VSCode上でgitを使う流れ（ローカルリポジトリのみ）

作業ディレクトリをVSCodeで開く

WSL上の作業ディレクトリをVSCodeで開く方法は、主に2つあります。

WSLの端末からVSCodeを起動する方法

WSLの端末からVSCodeを起動すると、Remote development機能でWSLに接続された状態で起動します。

$ cd <作業ディレクトリ>   # 作業ディレクトリがなければ mkdir コマンドで作成しておく
$ code .   # VSCode起動

VSCodeを立ち上げてからWSLのディレクトリを開く方法

VSCode起動後、左下のボタン（下画像参照）からRemote WSLを起動し、”Remote-WSL: Open Folder in WSL”を選んで作業ディレクトリを開きます。

VSCodeでRemote WSLを起動
Fig.2. VSCodeでRemote WSLを起動

作業ディレクトリがまだないのであれば、作成してから開きます。

VSCode上でのgitの操作

基本の基本的な操作のみをここに載せます。VSCodeでgitを操作するときは、左側にあるSourCE CCONTROL（ソース管理）アイコンを押して表示される画面で行います。[3]

VSCodeでのgit操作パネル
Fig.3. VSCodeでのgit操作パネル

git init

SOURCE CONTROL（ソース管理）の”Initialize Repository”（リポジトリを初期化）を押す。

VSCodeでのgit init
Fig.4. VSCodeでのgit init

git add

  • すべてのファイルをインデックスに追加（コマンド：git add . ）: “Changes”（変更）の横の+を押す
  • 特定のファイルをインデックスに追加（コマンド：git add <特定ファイル> ）：”Changes”（変更）下のファイル横の+を押す

VSCodeでのgit add
Fig.5. VSCodeでのgit add

git commit

一言コメントを付けてコミット（コマンド：git commit -m “<コメント>”）：SOURCE CONTROL（ソース管理）欄にコメントを入力して、横のチェックマークを押す。

VSCodeでのgit commit
Fig.6. VSCodeでのgit commit

git status

前回のコミット時との差異は、SOURCE CONTROL（ソース管理）画面に表示されます。ファイル名の右に表示されている意味は以下の通りです。

VSCodeでのgit status
Fig.7. VSCodeでのgit status

  • U：作成されたファイル
  • M：変更点のあるファイル
  • D：削除されたファイル

git diff

前回のコミット時との差異を表示するには、SOURCE CONTROL（ソース管理）画面のファイル名をクリックする。

git log

コミットログをグラフで表示（コマンド：git log —graph）：VSCodeの拡張機能”Git Graph”を入れる。入れるとSOURCE CONTROL（ソース管理）画面の右にGit Graphアイコンが出現するので、これを押すとグラフが現れる。そこから過去のファイルを参照することもできる。

VSCodeでのgit log
Fig.8. VSCodeでのgit log

商品画像
アイリスオーヤマ モニター台 幅59cm ブラック
icon 今すぐ購入
商品画像
Pixio PS1S Wave Black モニターアーム シングル
icon 今すぐ購入
商品画像
UGREEN 当社最小の巻き取り式充電器 45W 急速充電器
icon 今すぐ購入

リモートリポジトリを利用する

リモートリポジトリの登録、情報取得

リモートリポジトリ（GitHub等）を利用する場合はリモートの情報を登録し、ローカルにリモートリポジトリのブランチ情報を取得しておく必要があります。[4]

Visual Studio Code（VSCode）でWSLを使うことができるので、このVSCodeの中でWSLのgitを使えるようにしてみました。 VSCodeのターミナル（ショートカット：Ctrl + Shift + @）から下記のコマンドを入力します。

$ git remote add origin 
$ git fetch

githubのアカウントとパスワードを求められたら入力してください。

git pull/push

SOURCE CONTROL（ソース管理）右の”･･･”ボタンからPull (Push)を選択すると実行されます。初回は確認画面が表示されますが、”OK”を押せばよいです。またウィンドウ左下の更新マークを押してもpull/pushでき、リモートリポジトリとローカルリポジトリが同期されます。更新マーク横の数字はpull/pushされてない変更点の数を示します。

ローカルのディレクトリを直接リモートリポジトリに登録する

ローカルでリポジトリを作らず作業をしていたときに、オンライン上にバックアップしたいことがあるかもしれません。そのときにはディレクトリを直接、リモートリポジトリに登録ができます（ローカルリポジトリも同時に作成される）。一度リモートリポジトリ(GitHub)のアカウント情報を登録しておく必要があるかもしれません （リモートリポジトリの登録、情報取得参照）

ローカルリポジトリなしから、リモートリポジトリへ直接登録
Fig.9. ローカルリポジトリなしから、リモートリポジトリへ直接登録

手順は以下の通りです。

  1. VSCodeでリモートリポジトリに登録したいディレクトリ（ローカルリポジトリはないもの）を開き、SOURCE CONTROLボタンから”Publish to GitHub”（GitHubに公開）を押す。
  2. リモートリポジトリ名を入力し、プライベート（非公開）かパブリック（公開）を選ぶ。
  3. リポジトリにコミットするファイルを選択する。

最後に

Windows上のVSCodeからWSLのgitを使うための設定と簡単な操作方法をまとめました。 gitをローカルのみで使う場合は設定も簡単ですが、リモートも使う場合はSSHの設定やアカウントの登録等も必要なので、設定が煩雑になります。 一度設定してしまえば、多機能なVSCode上でgitも使えるようになるので、コーディングがはかどるのではないでしょうか。

  1. https://qiita.com/mnao305/items/b3c5f5943066a0bb8e2e#diff ↩︎ ↩︎

  2. https://qiita.com/0ta2/items/25c27d447378b13a1ac3 ↩︎

  3. https://qiita.com/roadricefield/items/70ccc1416fe6f3d979a2 ↩︎

  4. https://qiita.com/Nick_ut/items/64012552092556a0a944 ↩︎