header image
  • プログラム・ソフト
  • 物理学・工学
  • ガジェット
  • 当サイトについて
  • お問い合わせ
  • プログラム・ソフト
  • 物理学・工学
  • ガジェット
  • 当サイトについて
  • お問い合わせ
  • HOME
  • プログラム・ソフト
  • Windows上のVSCodeでWSLのgitを使う

Windows上のVSCodeでWSLのgitを使う

投稿日:2020年12月24日 更新日:2022年3月18日

  • Tags: [git], [VSCode], [WSL], [環境構築],

nocap

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

  • 事前準備
  • gitの初期設定
  • GitHubの初期設定
    • アカウント登録する
    • 鍵生成
    • 公開鍵をGibHubに登録
    • SSHの設定と接続
  • VSCode上でgitを使う流れ(ローカルリポジトリのみ)
    • 作業ディレクトリをVSCodeで開く
      • WSLの端末からVSCodeを起動する方法
      • VSCodeを立ち上げてからWSLのディレクトリを開く方法
  • VSCode上でのgitの操作
    • git init
    • git add
    • git commit
    • git status
    • git diff
    • git log
  • リモートリポジトリを利用する
    • リモートリポジトリの登録、情報取得
    • git pull/push
    • ローカルのディレクトリを直接リモートリポジトリに登録する
  • 最後に

事前準備

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

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

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

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

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

リモートリポジトリ(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 ↩︎

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Vimのレジスタの種類とコマンドの使い方・構造

マウスでロボットアームを制御してみる【Python】

Win11にWSLインストール(エラー発生したので備忘録)

Vimで便利な小技(よく使うコマンド集)

VSCodeのPython(Jupyter)のショートカットと表示設定

【動画あり】Vimのコマンドを一覧にまとめてみた

【初心者向け】FreeCADの基本的な使い方と手順の流れ

【超初心者向け】Vim(Vi)でなんとかファイル編集する方法

  • プロフィール

  • Yoshiharu

  • 現在、ひよっこ光学系エンジニアをやっている一般人です。我流でプログラムをいじったりしています。備忘録、知識整理を兼ねてアウトプットをしていく予定です。

    • 【ラズパイ】格安な抵抗式・静電容量式の土壌湿度センサーを実際に使って比較

      2022.11.23

      【ラズパイ】格安な抵抗式・静電容量式の土壌湿度センサーを実際に使って比較


    • ELEGOO Neptune 2Sをレビュー!2万円台3Dプリンターの実力を実際に使って評価!

      2022.11.03

      ELEGOO Neptune 2Sをレビュー!2万円台3Dプリンターの実力を実際に使って評価!


    • 自作ラズパイゼロケースを3Dプリンター用にモデリング【FreeCAD】

      2022.10.13

      自作ラズパイゼロケースを3Dプリンター用にモデリング【FreeCAD】


    • 【初心者向け】FreeCADの基本的な使い方と手順の流れ

      2022.10.11

      【初心者向け】FreeCADの基本的な使い方と手順の流れ


    • 【Python】ラズパイでLチカ:LEDの取り扱い~抵抗値の計算

      2022.09.07

      【Python】ラズパイでLチカ:LEDの取り扱い~抵抗値の計算


  • アーカイブ

    • 2022年11月
    • 2022年10月
    • 2022年9月
    • 2022年8月
    • 2022年5月
    • 2022年4月
    • 2022年3月
    • 2022年1月
    • 2021年11月
    • 2021年9月
    • 2021年8月
    • 2021年7月
    • 2021年2月
    • 2021年1月
    • 2020年12月
    • 2020年10月
    • 2020年9月
    • 2020年8月
    • 2020年7月
    • 2020年3月
    • 2020年2月
    • 2020年1月
  • カテゴリー

    • Vim
    • ガジェット
    • プログラム・ソフト
    • 光学
    • 情報処理
    • 物理学・工学
    • プログラム・ソフト
    • 物理学・工学
    • ガジェット
    • 当サイトについて
    • お問い合わせ
    Y Lab Desk

    Copyright © Y Lab Desk, 2022 All Rights Reserved.