Help us understand the problem. What is going on with this article?

VSCodeの機能で最低限必要なGit操作をしたい!

はじめに

タイトルの通りVSCodeで最低限GitHubにあげたりとかGit関連のメモ書きです。
別ツールに移動したり、コマンドのオプションとかなんだっけーと悩まずにVSCode上で完結できるので楽になります。

一応コマンドでの操作と比較しながら見ていきます。

そもそもVSCodeでGit周りを触るには?

サイドバーにある分岐してる感じのマークがありますが、そこがソース管理の場所です。
01.PNG
Gitに関する操作は大体ここからできます。ショートカットキーもありCtrl+Shift+Gでも開くことができます。

Gitコマンド色々

init

Gitリポの初期化

コマンド
$ git init

VSCodeだとこんな感じ
02.PNG
このボタンを押せばリポジトリの初期化ができます。

add

変更したものをインデックスに追加する

コマンド
 $ git add hoge.txt

VSCodeでは変更したファイルはソース管理の部分に一覧がでます。
03.PNG
Uと出てるのが今まで存在しなかったファイル、Mは変更を加えたファイル、Dと出てるのがなくなった消えたファイルです。

一括でインデックスに追加するなら変更ってところにマウスオーバーすると、+マークが出てくるのでそれを押せば全てインデックスに追加できます。
04.PNG

個別に追加するなら同じようにファイルにマウスオーバーすれば一括でのと同じく+マークが出てくるのでそれで個別追加ができます

commit

インデックスに追加されたファイルをコミットする

コマンド
$ git commit -m "コメント"

これもソース管理からコミットしましょう
6.PNG
上に入力欄が出てくるのでそこにコミットメッセージを入力して上のチェックマーク✓を押せばコミットできます。

status

前と比べてどこが変更されてるか

コマンド
$ git status -s

これについては特に操作が必要というわけではなく、常にファイル一覧に表示される。
7.PNG
Uと出てるのが今まで存在しなかったファイル、Mは変更を加えたファイル。

log

コミット履歴が確認できる。--graphをつければツリー状?になる。

コマンド
$ git log --graph

VSCodeでは同等の機能のものはデフォルトではないので以下の拡張機能を入れよう。
Git Graph
demo.gif

branch, checkout

ブランチを作ったり確認したり消したり。
作業ブランチを切り替えたり。

コマンド
$ git branch ブランチ名
$ git branch
$ git branch -d ブランチ名
$ git checkout ブランチ名

上からブランチの新規作成、今あるブランチの確認、そのブランチの削除、そのブランチに作業ブランチを切り替え

VSCodeでは左下にmasterとなってる部分があると思うのでそこをクリック。
8.PNG

そうすると上部に下記みたいなのが出てくるので、ここからブランチの切り替えや新しいブランチの作成ができます。
09.PNG
ブランチの切り替えならそのまま切り替えたいブランチ名をクリックすればOK
新しくブランチを作るなら普通に+新しいブランチを作成をクリックします。
そうすると入力欄が出てくるのでそのまま作りたいブランチ名を入力してエンターすれば作れます。そして自動的に作業ブランチを作ったものに切り替えてくれます。

remote

リモートリポジトリを追加できます

コマンド
$ git remote add 名前 リモートURL
$ git remote remove 名前

これは特にVSCodeで操作できるかが確認できてないです。

push, pull

Gitの変更内容をリモートリポジトリにも反映させる
リモートリポジトリに変更をローカルのGitにも反映させる

コマンド
$ git push
$ git pull

VSCodeではソース管理のを押すと下記みたいなのが出てきます。
10.PNG
ここからプッシュしたりプルしたりできます。

ここからじゃなくても左下のブランチ名の横にあるくるくるマークを押すことでもプッシュ、プルができます。
また、まだプル、プッシュしてないもの変更があったら数字で表示してくれます。
11.PNG

diff

どこをどう編集したか差異がわかります。

コマンド
$ git diff

これまたソース管理からアイコンとかではなくファイルをクリックすれば下記みたいに色と記号で判別できます。
12.PNG

また、編集中から変更したところを行番号の色で判別できます。
13.PNG

緑が新規追加したところ、青が変更したところ、赤が消えたところです。

clone

リモートリポジトリをローカルにクローン(コピー)します。

コマンド
$ git clone リモートURL

これはちょっとめんどくさく、VSCode上でF1をを押すと上部に入力欄が出てくるのでそこにcloneと入力します。
14.PNG
そうするとリポジトリURLが求められるのでリモートリポジトリのURLを入力してエンター。
今度はクローンするフォルダをどこのフォルダに置くかを求められるので任意の場所を入力してエンター

クローンが完了すると右下にクローンしたリポジトリを開きますか?って出てくるので開きましょう。
15.PNG
あとは普通に作業するだけ!

blame

特定の行がいつ変更されたかがわかる

コマンド
$ git blame ファイル名

デフォではないのでこれまた拡張機能を入れましょう。
GitLens — Git supercharged

導入したら普通にエディタ部分の書いたものの右にコミットした人とコミットメッセージ、時間が表示されます。
そこをマウスオーバーするとポップアップで下記みたいにどう変更したかなどがわかります。
16.PNG

また、右上のうっすらしたGitマーク(Toggle File Blame(ryと書いてあるやつ)を押すと
17.PNG

左にコミットメッセージと右にコードって感じの表示モードになります。
18.PNG

最後に

とりあえずこれぐらいできれば基本的に大丈夫だろうものをまとめました。
なんか他に使えるっていうGitコマンドやミスがあればコメントもらえるとありがたいです。

参考

基本的なGitコマンドまとめ
VSCode-GitLensはいいぞ、という話

mnao305
はてなブログの方もよろしく https://mnao305.hatenablog.com/
https://www.mnao305.com/
ipfactory
メンバーが各々の技術分野を追求するサークル、「IPFactory」のOrganizationです。それぞれのアウトプット活動を促進するために発足されました。
https://twitter.com/_ipfactory_
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした