WSL2 上のファイルを VS Code で編集して Git および GitHub と連携させる

概要

WSL2 上のファイルを Visual Studio Code (VS Code) 上で編集して，Git および GitHub を用いてバージョン管理する方法をまとめました．

• 環境構築の所要時間：約10分
• 実行環境：Windows 11
  

本記事は Git や GitHub の環境構築に焦点を当てており，Git の基礎的なことは，書籍や他の記事を参考にされてください．
例えば，以下の書籍は初学者の私にとって重宝しました．

WSL2 のインストール方法については以下の記事をご覧ください．

なお，VS Code の拡張機能 Remote - WSL を予めインストールしておいてください．

目次

1. WSL2 上の Git をバージョンアップさせておく
2. WSL2 上で Git の基本設定を行う
3. SSH 鍵を使って GitHub と連携させる
4. VS Code の設定
5. VS Code 上での基本的な操作

1. WSL2 上の Git をバージョンアップさせておく

WSL2 では Git が既にインストールされています．Ubuntu のターミナルを開いて

Ubuntu

git --version

と入力して

Ubuntu

git version 2.34.1

などと出力されることを確認してください．(バージョンは，2.34.1 ではない可能性があります)

インストールされていない場合は sudo apt install git と入力してインストールしましょう

ただし，デフォルトの Git のバージョンは古い可能性があるので，以下のコマンドを順に実行して，Git をアップデートさせてください．

Ubuntu

sudo add-apt-repository ppa:git-core/ppa
sudo apt update
sudo apt install git -y

インストール完了後，git --version と再度入力して更新されていれば ok です．

参考記事

2. WSL2 上で Git の基本設定を行う

続いて，WSL2 上に Git のユーザー情報を登録していきます．
なお，以下の記事を参考にさせていただきました．

まず，Ubuntu ターミナルを開きます．
次に，以下のコマンドにより，ユーザー名を登録します（外部に見えても良い名前にしてください）．

Ubuntu

git config --global user.name "ユーザー名"

• 安全のため GitHub のユーザー名と同じものを使用してください
• "ユーザー名" において，""マークが必要ですのでご注意ください

続いて，メールアドレスを登録します．こちらも GitHub で登録するメールアドレスと同じものを使用してください（"" マークもお忘れなく）．

Ubuntu

git config --global user.email "メールアドレス"

ここまで完了したら，git config --list と入力して，user.name および user.email が正しく登録されていることを確認してください．間違っている場合は，もう一度上記の手順を行うことで，変更（上書き）できます．

最後に，GitHub との連携に用いる SSH 鍵を生成しておきます．まず

Ubuntu

ssh -keygen -t ed25519 -C "登録したメールアドレス"

を実行してください．すると，SSH 鍵を保存するパスが表示されますので，これを覚えてから Enter を入力してください．通常は ~/.ssh/id-ed25519.pub に保存されるはずです．

その後，SSH 鍵のためのパスフレーズが要求されるので，新たに登録してください (パスフレーズは2回要求されますので，同じものを入力してください)．

3. SSH 鍵を使って GitHub と連携させる

以下の手順により，WSL2 上で設定したユーザー情報を GitHub と連携させます．
ただし，予め GitHub のユーザー登録をしておいてください．

ユーザー登録は，GitHub にアクセス後，GitHub に登録する というボタンをクリックすることで行えます．なお，GitHub のユーザー名やメールアドレスは WSL2 の Git で登録したものと一致させておくと安全です．

1. GitHub の Settings を選択します
2. 続いて，SSH and GPG keys を選択し，New SSH key を選択します
3. Title を適当に入力し， Key type を Authentication Key とし，Key に先ほど作成した SSH 鍵をコピーした後（後述），Add SSH key をクリックして登録します

SSH 鍵は以下のコマンドにより，コピーできます

Ubuntu

cat [ここに SSH 鍵のパスを書く] | clip.exe

ここで，[ここに SSH 鍵のパスを書く] の部分は，例えば ~/.ssh/id-ed25519.pub などが入ります．

これで登録が完了しましたので，以下のコマンドにより確認します．

Ubuntu

ssh -T [e-mail]

SSH 鍵のパスフレーズが要求されますので，先ほど登録したパスフレーズを入力してください．
You've successfully authenticated などと表示されていれば ok です．

4. VS Code の設定

最後に VS code の設定を行います．

1. まず，Ubuntu ターミナルから，WSL2 上の適当なディレクトリを開いてください
   Ubuntu: 適当なディレクトリに移動してから code . を実行 (code と . の間はスペースを空けてください)

   code .
   

2. 次に，VS Code の左軸にある「拡張機能」から Git Graph, Git History, Git Lens をインストールしてください
3. 一度 VS code を閉じて，再度，ターミナルから適当なディレクトリを開けば Git と GitHub が利用可能となります

5. VS Code 上での基本的な操作

これで準備が整いましたので，WSL2 上のファイルを VS Code 上で編集して，Git および GitHub を用いてバージョン管理する方法について簡単に説明します．

通常の Git では，ターミナルから Git コマンドを入力する CUI操作によって，ファイルの管理を行うと思いますが，上記の手順により導入した VS Code の拡張機能によって，Git のほとんど全ての操作が GUI的に実行可能です．
そこで，本記事では「GUI に基づく Git 操作」について概説します．

なお，Git や GitHub の基本的なことは，適当な参考文献をあたってください．
例えば，以下の記事では，CUI 操作に基づく Git コマンドの代表例が整理されています．

5-1. GitHub 上のリモートリポジトリをクローンする

1. Ubuntu ターミナルから，WSL2 の適当なディレクトリで VS Code を開いてください
2. VS Code 上部の検索バーに > git clone と入力して「githubから複製」を選択してください
3. 該当リポジトリを選択した後，クローンを作成したいディレクトリを入力することで，ローカルリポジトリにクローンが生成されます

VS Code の検索バーから脱出したい場合は，キーボードの esc を押してください

5-2. git pull の方法

1. Ubuntu ターミナルからローカルリポジトリを VS Code で開いてください
2. 該当ブランチに移動（ブランチの切り替え方は後述）して，git pull を実行してください

VS Code で git pull を実行する方法は色々あります．例えば

• 左軸の「ソース管理」を選択し，「グラフ」から「プル」の記号を実行
• 左軸の「ソース管理」を選択し，「変更」の右端にある「...」マークから「プル」を実行

などがあります．

5-3. git push の方法

1. ファイルの編集（追加や消去を含む）が完了したら，VS Code 左軸の「ソース管理」を選択してください
2. 「変更」を開き，コミットしたい各ファイルにカーソルを移動させ，「＋マーク」の「変更をステージ」を選択してください
3. ステージングが完了したら，「メッセージ」を入力して「コミット」ボタンを実行してください
4. 「変更の同期」を実行することで，git push されます

ただし，「変更の同期」を実行すると，以下が順に実行されることに留意してください．

1. まず，コンフリクトの有無を確認するため，現在のリモートリポジトリの情報を，ローカルリポジトリに一度 pull する
2. 次に，ローカルリポジトリのコミットを，リモートリポジトリに push する

「変更の同期」は VS Code 特有の操作です．以下の記事が参考になります．

本記事で導入した拡張機能が有効な VS Code では，ファイルの消去も自動的に追跡してくれます（つまり，git rm などは不要です）．

5-4. ブランチを作成する / 切り替える

Git では git branch や git checkout などのコマンドが存在しますが，VS Code では GUI 的に操作できます．VS Code の左下部分にある main あるいは ブランチ名 となっているボタンをクリックすると，これらの操作が簡単に行えます．

その横の 同期マーク を選択すると，リモートリポジトリと同期が取られるため，ご注意ください．

5-5. ブランチを merge する

VS Code でブランチをマージする方法は色々あります．ここでは一例を紹介します．

1. マージ先のブランチに移動してください
2. 左軸の「ソース管理」を選択し，「変更」の右端の「...」マークから branch >> merge を順に実行し，マージ元のブランチを選択してください
3. 「変更の同期」を実行して，リモートリポジトリに merge した情報を push してください

まとめ

WSL2 上のファイルを VS Code で編集して Git および GitHub と連携させる手順について解説しました．
VS Code の拡張機能は非常に有能で，本記事で紹介していない様々な便利機能がございますので，ぜひ活用されてください．
本記事が何かのご参考になりましたら幸いです．

なお，WSL2 上で Python，Fortran，LaTeX を実行するための環境構築に関する記事も執筆しておりますので，興味のある方はご覧ください．