Windows上のVSCodeでWSLのgitを使う

投稿日：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 "<ユーザ名>"
Shell

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.
Shell

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

公開鍵を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 #公開鍵の中身をクリップボードにコピー
Shell

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

SSHの設定と接続

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

vim ~/.ssh/config
Shell

下記をconfigファイルに追記

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

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

$ chmod 600 ~/.ssh/config
Shell

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

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

接続確認をします。

$ ssh -T git@github.com
Hi <githubアカウント名>! You've successfully authenticated, but GitHub does not provide shell access.
Shell

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

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

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

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

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

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

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

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

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

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

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

$ git remote add origin 
$ git fetch
Shell

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 ↩︎