62
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

エニプラAdvent Calendar 2024

Day 12

VSCodeとgit(gitHub)を連携してみた

Last updated at Posted at 2024-12-11

gitについてあまり知らなかったため、練習も兼ねて自己学習で作成したソースコードをgit(gitHub)で管理してみようと思い、gitの使用方法やVSCodeとの連携方法について調べました。
初学者のため至らぬ点が多いと思いますが、調べた内容についてまとめておきます。何かの参考になったら嬉しいです。

ここでは以下の内容について触れていきます。
・gitのインストール
・gitHubのリポジトリ作成
・VSCodeからgitHubにコミット、プッシュする

gitのインストール

gitをインストールしていない場合は以下の手順でインストールします。設定は一般的なものを使用しているので、必要に応じて変更してください。


① 公式サイトにアクセスし、インストールファイルをダウンロード
 https://git-scm.com/

② ダウンロードしたexeファイルを開く

③ GNU General Public License
⇒ライセンス確認です。Nextをクリックして進めます。

④ インストール先の選択
デフォルトのままNextで進めます。インストール先を変更したい場合は選択してください。
 
⑤ コンポーネントの選択
Git Bashはよく使うので「Git Bash Here」はチェックしておきます。
その他ほしいものがあれば追加で選択してください。

⑥ スタートメニューに入れるかどうか選択
必要ない場合は「Don't create a Start Menu folder」にチェックを入れます。

⑦ デフォルトのエディタを選択
「Use visual Studio Code as Git’s default editor」を選択するとVSCodeのエディタをデフォルトエディタに設定できます。

⑧ リポジトリ作成時の初期ブランチの名前
デフォルト(Let Git decide)はmasterです。
gitHubなど、デフォルトのブランチ名がmasterからmainになったシステムもあるそうなので、その場合は変更してもよいと思います。
変更する場合は「Override the default branch name for new repositories」を選択し、設定したい名前を入力してください。

⑨ パス設定
デフォルト(Git from the command line and also from 3rd-party software)でOKです。windowsのコマンドプロンプトやpowershell等でもgitのコマンドが使えるようになります。

⑩ HTTP通信時のツールを選択
デフォルト設定(User the OpenSSL library)を選択します。

⑪ 改行コード設定
Windowsの場合はデフォルト設定(Checkout Windows-style, commit Unix-style line endings)でOKです。Linuxの改行コードとWindowsの改行コードを自動変換してくれます。

⑫ Git Bashで使うターミナルの設定
デフォルト設定(User MinTTY (the default terminal of MSY52))を選択します。

⑬ git pull実行時の操作
デフォルト設定(Default)を選択します。

⑭ クリデンシャル・ヘルパ設定
デフォルト設定(Git Credential Manager Core)を選択します。

⑮ 追加オプション
デフォルト設定(Enable file system cathingにチェック)を選択します。
ファイルシステムのキャッシュを行うという追加オプションです。

⑯ Gitの実験的な機能の有効・無効設定
デフォルト設定(無効)を選択します。

⑰ インストールが始まるので待つ

GitHubでリポジトリを作成

① GitHubにアクセスしログイン
https://github.com/
アカウントがない場合は登録してください(手順はここでは紹介しません)

②Top RepositoriesのNewボタンをクリックする
ホーム画面左側の方にあります
image.png

③ Create a new repository
以下の項目を入力します。
・Owner ... 自分のアカウント(他のアカウントにしたい場合は選択する)
・Repository name ... リポジトリ名
image.png

④ リポジトリの公開設定を選択
公開するならpublic、非公開ならprivateを選択します。
今回は個人の学習で使用するのでprivateにしました。
image.png

⑤ 初期設定
リポジトリ作成時に追加するものを選択します。今回は空のリポジトリを作成します。

⑥Create repositoryをクリック
③~⑤の内容を入力したらCreate repositoryボタンをクリックしてリポジトリを作成します。
image.png

VSCodeからコミットする

VSCodeからファーストコミットしてリモートリポジトリにプッシュする手順です。
リポジトリを作成すると連携用のコマンドが表示されるので、コピーしてVSCodeのターミナルに流していきます。

①gitの改行コード設定確認

  1. VSCodeのターミナルで git config --global -l を実行
  2. windowsの場合、core.autocrlf=true が表示されればOK
  3. :q で抜ける

②ローカルリポジトリ作成
※カレントディレクトリはプロジェクトのフォルダにしておく

  1. git init
    ローカルに新しいgitリポジトリを作成する。実行するとカレントディレクトリに.gitディレクトリが作成される。

  2. git add 【ファイル名】
    GitHubのコマンドではREADMEファイルをaddするよう指定していますが、ほかに登録したいファイルがある場合はそのファイルの分もaddコマンドを実行してください。
    すべてのファイルを登録する場合は git add . を実行します。
    ※前述で確認した改行コードの自動変換設定ができていると、LFをCRLFに変換するよという警告が出ることがあります。システムが自動で統一してくれているので、無視してOKです。

  3. git commit -m "first commit"
    addでインデックスに登録したファイルをコミットします。
    -mはコミットメッセージを設定するオプションです。

  4. git branch -M main
    ブランチを強制的にmainブランチに切り替えます。
    既にmainブランチにいる場合は何も起こりません。

リモートリポジトリと連携

  1. git remote ~
    これでローカルとリモートのリポジトリが紐づけられるようになります。

  2. git push~
    ローカルリポジトリの状態をリモートリポジトリにアップロードします。

補足

VSCodeでgitコマンドが使えない場合の対処法

① gitのエディタを確認
gitインストール時のエディタ設定がVSCodeになっていない可能性があるので確認します。gitbash等、gitコマンドが使えるところで以下のコマンドを実行して確認してください。
$ git config --global core.editor

実行結果に code --wait が表示されていればOKです。
・表示される→次の手順へ

・何も表示されない
以下のコマンドで設定します。
$ git config --global core.editor "code --wait"

・他のものが表示される
以下のコマンドで設定を変更します。
$ git config --global core.editor "code --wait" --replace-all


②パス設定
VSCodeにgit.exeのパスを設定します。

  1. VSCOde左下の歯車アイコンから設定を開く
  2. git.pathで検索
  3. setting.jsonを開く
  4. 「git.path」にgit.exeの配置場所を記載する
    ¥はバックスラッシュを2つ書きエスケープします。
    例)AAA¥BBB¥git.exeAAA\\BBB\\ を設定
{
    "git.path": "C:\\~~"
}

設定後、VSCodeを再起動してください。

VSCodeとgitHubのアカウントを連携

VSCodeのターミナルでgitアカウントを登録します。
gitHubに登録しているアカウント情報と同じものを入力してください。

  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"

アカウントが連携できていないとコミット時に以下のようなエラーが発生します。

PS C:\SampleProject\***\> git commit -m "first commit"
Author identity unknown

*** Please tell me who you are.

Run

  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

fatal: unable to auto-detect email address (got '********')
PS C:\SampleProject\***\>

VSCodeの拡張機能

Git Graphという拡張機能を使うと、ブランチの状態などを手軽に確認できます。

参考

以下のリンク先を参考にして連携しました。各項目についてより詳しく記載されています。

▼Gitインストール手順
Git for Windows インストール (日本語訳あり)

▼ローカルリポジトリ作成、リモートリポジトリに登録(リンク先はYouTubeの動画です)
VSCodeでSpringBoot開発 #02.プロジェクト作成

▼Gitのエディタ設定
VSCodeでGitコマンドを使う

▼git.pathの設定
Visual Studio Code で git.exe が 見つからないと言われた場合の対処

62
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
62
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?