Visual Studio Code（VSCode）とGitLabを連携させる

GitLab.comに登録
Gitのインストール
1. インストール時の設定
GitLab.comにSSHで接続する
1. OpenSSHのダウンロード
2. 環境変数の設定
Gitの設定
GitLabにコードをPush
Gitについて学ぶ

GitLab.comに登録

GitLabには、クラウドサービス版のGitLab.comとダウンロード型のGitLab CE/EEがあります。
普通にバージョン管理するなら、GitLab.comに登録すればOKです。

まずは、右上の「Log in」にカーソルを持っていき、「Register」をクリックします。

名前、ユーザー名、メールアドレス、パスワードを入力します。または、GoogleアカウントやTwitterアカウントで登録することもできます。

Gitのインストール

次に自分のPCにGitを導入します。ここでは、Windowsでのインストール方法を紹介します。

Git for Windowsのページから、Gitのインストーラーをダウンロードします。
ダウンロードが完了したら、インストーラーをダブルクリックします。

インストール時の設定

画像のとおりに選択して、「Next」を押して進めていけば大丈夫です。

Gitで使用するデフォルトのエディターで、Visual Studio Codeを選択します。

すると、VSCode内で「Ctrl + @」のショートカットキーでコマンドプロンプトを呼び出せば、すぐにGitコマンドを打つことができます。

チェックアウト時の改行コードの自動変換についてです。デフォルト（一番上）だと、行コードがチェックアウト時に「CR-LF」、コミット時に「LF」に自動変換されます。

変換されるのが嫌な人は、「Checkout as-is, commit as-is」を選択しましょう。

以下は、開発中の試験運用オプションです。意図せぬ動作をする場合があるので、不要ならばチェックしないようにしましょう。

Enable experimental support for pseudo consoles.
チェックをすると、Git Bash window上で、PythonやNode.jsのコンソールプログラムが動作するようになります。
Enable experimental built-in file system monitor.
チェックをすると、ワークツリーに多くのファイルがある場合にGitコマンドが高速化します。

最後に「Install」を押すことで、インストールが完了します。

（参考元）WindowsにGitをインストールする手順(2022年12月更新)

GitLab.comにSSHで接続する

VS Code内からGitLabへコードをPushできるようにするためには、SSHで接続する設定を行う必要があります。

以下、やり方を紹介します。

OpenSSHのダウンロード

GitLab.comにSSH接続するのに必要な「OpenSSH」を準備します。

OpenSSHのダウンロードページからZipファイルをダウンロードします。
最新のファイルの64bit版、もしくは32bit版（ほとんどのPCは64bit版）をダウンロードします
（画面が黒いのはPC設定によるものなので、気にしないでください）。

ダウンロード後ファイルを解凍し、フォルダ名をOpenSSHとして「C:\」にコピーします。

環境変数の設定

次に、OpenSSHへのパスを通します。

コントロールパネルを開き、「システムとセキュリティ」→「システム」→「システムの詳細設定」→「環境変数」を選択（以下はWindows11での画面）。

システム環境変数の「Path」に「C:\OpenSSH」を追加し、OKを押します。

システム環境変数に新規で変数名「GIT_SSH」、変数値「C:\OpenSSH\ssh.exe」を追加します。

Gitの設定

次にGitの設定を行います。

まずはコマンドプロンプト、もしくはPowerShellを立ち上げます。

GitLabに登録したときのユーザー名とメールアドレスを設定するために、以下のコマンドを入力。

git config --global user.name "[あなたの名前]"
git config --global user.email [メールアドレス]

[あなたの名前]と[メールアドレス]は、それぞれ自分のものに変更してください。

さらに、git statusで日本語のファイル名が文字化けするのを防ぐために、以下のコマンドを入力します。

git config --global core.quotepath false

SSH鍵の生成

ユーザーアカウントフォルダ内に、「.ssh」フォルダを作成します。

cd C:\Users\[ユーザー名]\
mkdir .ssh

.sshフォルダ内に、公開鍵・秘密鍵を生成するために、以下のコマンドを実行します。

cd .ssh
ssh-keygen -t rsa -f id_rsa_for_gitlab -b 4096 -C "[メールアドレス]"

すると、パスワードの入力を促されます。

Enter passphrase (empty for no passphrase):
Enter same passphrase again:

何も入力しなければ、パスワードなしとなります。

パスワードを設定したほうがセキュリティは強固になりますが、面倒くさいのでパスワードを設定しなくてもOKです。

パスワードを設定しない場合は、そのままEnterを押します。

すると、以下のメッセージが表示され、SSH鍵の生成が完了です。

Your identification has been saved in id_rsa_for_gitlab.
Your public key has been saved in id_rsa_for_gitlab.pub.
The key fingerprint is:
[キーNo.] [メールアドレス]
The key's randomart image is:
+---[RSA 4096]----+
|                 |
|       . .       |
|      * o .      |
|   o B B o .     |
|  . O B S +      |
|  .+ O + + .     |
|  ooO =.o o o    |
|  EO.= +oo +     |
|  +o*oo...o      |
+----[SHA256]-----+

Gitのconfigを追加

以下のコマンドを入力して、.ssh内に「config」というファイルを作成します。

type nul > config

以下のコマンドで、「config」ファイルに設定内容を記載します。

echo Host gitlab.com >> config
echo  User git >> config
echo  Hostname gitlab.com >> config
echo  IdentityFile ~/.ssh/id_rsa_for_gitlab >> config
echo  IdentitiesOnly yes >> config

GitLab.comに公開鍵を登録

作成したSSH鍵をGitLab.comに登録します。

GitLab.comにログインし、右上のアイコンをクリックします。

表示されたメニューの「設定」を選択。

すると、左側にサイドメニューが表示されるので、その中の「SSHキー」を選択します。

表示された画面の「キー」のところに、公開鍵の番号を入力します。「Title」を入力し、有効期限を設定したくなければ、✕ボタンを押して期限を消します。最後に「キーを追加」を押します。

公開鍵の番号は以下のコマンドをコマンドプロンプトに入力することで表示できます。

type id_rsa_for_gitlab.pub

表示された「ssh-rsa」から始まる番号をコピペします。

　
「タイトル」のところは分かりやすいものを入力します。
例えば、秘密鍵のファイル名の「id_rsa_for_gitlab」にしておくといいでしょう。

「Expires at」でSSHキーの有効期限を設定できますが、特に期限を設ける必要がなければ空欄のままでOKです。

入力が終われば、「キーを追加」をクリック。

最後に以下のコマンドで、SSH接続ができるかどうかを確認します。

ssh -T gitlab.com

以下のテキストが表示されるので、「yes」と入力してEnter。

The authenticity of host 'gitlab.com [IPアドレス]' can't be established.
ECDSA key fingerprint is [キーNo.]
Are you sure you want to continue connecting (yes/no)?

うまく設定できている場合、以下のテキストが表示され、SSH接続が完了です。

Warning: Permanently added 'gitlab.com, [IPアドレス]  (ECDSA) to the list of known hosts.
Welcome to GitLab, @[GitLab ID]!

（参考元）
・【GitLab】SSH認証キー（公開鍵）を登録する
・VisualStudioCodeとgitlabを使ってバージョン管理をしてみた備忘録

GitLabにコードをPush

実際にGitLabにコードをPushしてみましょう。

まずは、GitLab.com内にプロジェクトを作成します。

GitLab.comにログインした後のトップページで、右上の「新規プロジェクト」をクリック。

「Create blank project」を選択します。

「プロジェクト名」と「プロジェクトslug」を入力し、「プロジェクトを作成」をクリックします。

これでプロジェクトの作成が完了です。

表示された画面の中ほどに、「既存のフォルダをプッシュ」というものがあります。

そこに書かれたコマンドを実行すれば、GitLab.comにコードをPushできます。

cd existing_repo
git remote add origin https://gitlab.com/[yout git name]/[slug name].git
git branch -M main
git push -uf origin main

Gitについて学ぶ

ここまで、VS CodeとGitLabを連携させる方法を紹介してきました。

これからGitを利用するのであれば、コマンドを短縮化できるエイリアス設定については知っておいたほうがいいです。Gitコマンドの入力が楽になります。

詳しくは別の方が書いた以下の記事にまとまっているので、ご覧ください。

Gitのコマンドを短縮化！エイリアスのおすすめ設定

もしくは、まずは以下のYouTube動画を観て学習し、あとは実際にコードを書きながら慣れていくのがいいでしょう。