"BOKU"のITな日常

62歳・文系システムエンジニアの”BOKU”は日々勉強を楽しんでます

VisualStudioCode(VSCode)のGit機能とGitLensの使い方

VisualStudioCode(VSCode)は、Gitに標準で対応しています。

こちらの使い方もいちおう把握しておこうと思います。

f:id:arakan_no_boku:20190811144704p:plain

 

今回の記事の前提

 

少なくとも。

Git for windows がインストールされていて、GitHubからクローンするなりして、既にGitのリポジトリがある前提です。

リポジトリを初期化するにせよ、クローンするにせよ、VSCodeからGit操作するより、GitBashとかでささっと作業した方が速いです。

現実に使わないことはやめときます。

インストールとGitHub等の初期設定はこちら。

arakan-pgm-ai.hatenablog.com

arakan-pgm-ai.hatenablog.com

を参照ください。

さて、本題です。

 

VSCodeはデフォルトでGit対応です

 

VsCodeはデフォルトでGitに対応してます。

f:id:arakan_no_boku:20190821214619p:plain

上記の白枠のアイコンが「Git」です。

最初は、選んでも「ソース管理プロバイダーが登録されていません」となってます。

でも、大丈夫。

メニューの「フォルダを開く」で、リポジトリフォルダを指定して開くと、勝手に認識して、以下のような画面になります。

f:id:arakan_no_boku:20190821215715p:plain

CHANGESが「0」なのは、実際にコミットが必要な変更がないからです。

上部の「...」を押すと以下のようなメニューが表示されます。

f:id:arakan_no_boku:20190821220043p:plain

 

ブランチを選択する

 

開発用のブランチを切る運用をしていない場合は、ここは読み飛ばしてください。

初期状態の、ブランチはデフォルトの「master」を指しています。

個人開発などで、master一本でやっている場合は、それでいいです。

ただ、masterを本番用の位置づけにして、開発用のブランチを切る運用をしている場合は、画面の左下のステータスバーに注意する必要があります。

以下の例は開発用ブランチを「feature-test」という名前で用意し、そこに切り替わっている状態です。

 

f:id:arakan_no_boku:20190822233719p:plain

上記のようになっていれば、今は「feature-test」ブランチがカレントになってます。

それが適切でない場合は切り替える必要があります。

f:id:arakan_no_boku:20190822234056p:plain

メニューから「チェックアウト先」を選ぶと、以下のような画面が表示されます。

f:id:arakan_no_boku:20190822233934p:plain

ここで切り替えたいブランチを選びます。

もしくは、新たに作業用ブランチを作成することもできます。

その時は「create new branch from...」を選びます。

選ぶと最初にブランチ名の入力が求められるので、「feature-・・・」など、任意のブランチ名を入力します。

Enterを押すと、今度は「元にするブランチ」を選択するように求められます。

標準ブランチ運用に沿ってやるなら、普通は「develop」か「origin/develop」ですね。

とにかく。

ブランチをきる運用の時に大切なのは、自分が今どこのブランチで作業をしているか?を常に意識して、くれぐれも間違った先にコミットしてしまうようなことがないようにすることです。

 

試しに何か変更してみます

 

ひとつファイルを変更し、ひとつ新規につくってみました。

そうすると自動的に、変更が検知されます。

f:id:arakan_no_boku:20190821222730p:plain

CHANGESの下に対象ファイルを表示されてます。

ここで、バージョン管理対象でないファイルがCHANGESに含まれている場合は、リポジトリのフォルダ直下に「.gitignore」というファイルを置いて除外設定をします。

今回は、「.vscode」というフォルダ以下をすべて無視します。

そんな時は、以下のような内容で作ります。

.gitignore

.vscode/

このように最後に「/」を付ければ、そのフォルダ以下すべてを無視します。

f:id:arakan_no_boku:20190824134532p:plain

これで.vscode以下のファイルが変更対象からはずれました。

.gitignoreの他のパターンの書き方はこちらがわかりやすいです。

qiita.com

さて、続けます。

CHANGESのところに「+」ボタンが選択できるようになっています。

マウスをあてると「すべての変更をステージ」とあります。

f:id:arakan_no_boku:20190821223103p:plain

変更をステージというのは、追加(Add)、削除(rm)、リネーム(mv)などしたファイルをコミットの対象として指定することです。

つまり。

これらの変更をリポジトリにコミットするには・・。

  1. すべての変更をステージ
  2. すべてコミット→コミットメッセージの入力

という操作をすることになります。

うまくコミットできれば、CHANGESが「0」に戻ります。

 

 

GitLensというのが良いらしいので試す

 

たまに、ファイルの変更前と後を比較確認したいときがあります。

そんな用途で使える、GitLensが評判が良いので、試してみたいなと思います。

f:id:arakan_no_boku:20190821224510p:plain

インストールできるとこんなアイコンが追加されます。

f:id:arakan_no_boku:20190821224844p:plain

それを選ぶと、左ペインに、リポジトリやヒストリなどのリストが表示されます。

f:id:arakan_no_boku:20190824134907p:plain
そこで、確認したいファイルを選ぶと以下のように2つのウインドウで、変更前(左側)と変更後(右側)を並べて見せてくれます。

f:id:arakan_no_boku:20190821224806p:plain

上記の画像だと小さすぎてわかりづらいですが、実にわかりやすいです。

評判が良いのは当然です。

ということで。

これはアリですね。

今回は、こんなところで。

ではでは。