VisualStudioCodeでGit統合を使用する方法

序章

Visual Studio Code（VS Code）は、Web開発で最も人気のあるエディターの1つになりました。ソース管理統合などの多くの組み込み機能、つまり Git のおかげで、このような人気を博しています。 VS Code内からGitのパワーを活用することで、ワークフローをより効率的かつ堅牢にすることができます。

このチュートリアルでは、Gitを使用したVSCodeでのソース管理統合の使用について説明します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

マシンにGitがインストールされています。これを実現するための詳細については、Gitの使用開始チュートリアルを確認してください。
マシンにインストールされているVisualStudioCodeの最新バージョン。

ステップ1—[ソース管理]タブに精通する

ソース管理の統合を利用するために最初に行う必要があるのは、プロジェクトをGitリポジトリとして初期化することです。

Visual Studio Codeを開き、組み込みターミナルにアクセスします。 Linux、macOS、またはWindowsでキーボードショートカットCTRL + ` を使用して、これを開くことができます。

ターミナルで、新しいプロジェクト用のディレクトリを作成し、そのディレクトリに変更します。

mkdir git_test
cd git_test

次に、Gitリポジトリを作成します。

git init

Visual Studio Codeでこれを実現する別の方法は、左側のパネルで[ソース管理]タブ（アイコンは道路の分割のように見えます）を開くことです。

次に、フォルダを開くを選択します。

これにより、ファイルエクスプローラーが現在のディレクトリに開きます。優先プロジェクトディレクトリを選択し、開くをクリックします。

次に、リポジトリの初期化を選択します。

ここでファイルシステムを確認すると、.gitディレクトリが含まれていることがわかります。これを行うには、ターミナルを使用してプロジェクトディレクトリに移動し、すべてのコンテンツを一覧表示します。

ls -la

作成された.gitディレクトリが表示されます。

Output.
..
.git

リポジトリが初期化されたので、index.htmlというファイルを追加します。

そうすると、ソース管理パネルに、新しいファイルの横にUという文字が表示されます。 U は、 untracked file の略で、新規または変更されたが、まだリポジトリに追加されていないファイルを意味します。

index.htmlファイルリストのplusアイコン（ + ）をクリックして、リポジトリでファイルを追跡できるようになりました。

追加すると、ファイルの横の文字がAに変わります。 A は、リポジトリに追加された新しいファイルを表します。

変更をコミットするには、ソース管理パネルの上部にある入力ボックスにコミットメッセージを入力します。次に、チェックアイコンをクリックしてコミットを実行します。

そうすると、保留中の変更がないことがわかります。

次に、index.htmlファイルにコンテンツを少し追加します。

Emmet ショートカットを使用して、!キーを押してからTabキーを押すと、VSCodeでHTML5スケルトンを生成できます。 <body>に<h1>の見出しのようなものを追加して保存します。

ソース管理パネルで、ファイルが変更されたことがわかります。その横にMという文字が表示されます。これは、変更されたファイルを表します。

練習のために、先に進んでこの変更もコミットしてください。

ソース管理パネルの操作に慣れてきたので、ガターインジケーターの解釈に移ります。

ステップ2—ガターインジケーターの解釈

このステップでは、VSCodeで「Gutter」と呼ばれるものを見ていきます。側溝は、行番号の右側の細い領域です。

以前にコード折り畳みを使用したことがある場合は、最大化および最小化アイコンが側溝にあります。

<h1>タグ内のコンテンツの変更など、index.htmlファイルに小さな変更を加えることから始めましょう。そうすると、変更した線の側溝に青い縦のマークが表示されます。青い縦のマークは、対応するコード行が変更されたことを示します。

ここで、コード行を削除してみてください。 index.htmlファイルの<body>セクションの行の1つを削除できます。側溝に赤い三角形があることに注意してください。赤い三角形は、削除された行または行のグループを示します。

最後に、<body>セクションの下部に、新しいコード行を追加して、緑色のバーに注目してください。縦の緑色のバーは、追加されたコード行を示します。

この例は、変更された行、削除された行、および新しい行のガターインジケーターを示しています。

ステップ3—ファイルの違い

VS Codeには、ファイルに対して差分を実行する機能もあります。通常、これを行うには別のdiffツールをダウンロードする必要があるため、この組み込み機能を使用すると、より効率的に作業できます。

差分を表示するには、ソース管理パネルを開き、変更されたファイルをダブルクリックします。この場合、index.htmlファイルをダブルクリックします。左側に現在のバージョンのファイル、右側に以前にコミットされたバージョンのファイルが表示された典型的な差分ビューが表示されます。

この例は、現在のバージョンで行が追加されたことを示しています。

ステップ4—ブランチの操作

一番下のバーに移動すると、ブランチを作成して切り替えることができます。エディターの左下を見ると、ソース管理アイコン（道路の裂け目のように見えるアイコン）の後にマスターが続くはずです。または現在の作業ブランチの名前。

ブランチを作成するには、そのブランチ名をクリックします。メニューがポップアップ表示され、新しいブランチを作成できるようになります。

先に進み、testという名前の新しいブランチを作成します。

次に、テキストthis is the new test branchを追加するなど、新しいtestブランチにいることを示すindex.htmlファイルに変更を加えます。

これらの変更をtestブランチにコミットします。次に、左下のブランチ名をもう一度クリックして、masterブランチに戻ります。

masterブランチに戻った後、testブランチにコミットされたthis is the new test branchテキストが存在しなくなったことに気付くでしょう。

ステップ5—リモートリポジトリの操作

このチュートリアルでは詳しくは触れませんが、[ソース管理]パネルから、リモートリポジトリを操作するためのアクセス権があります。プル、同期、公開、スタッシュなどの使い慣れたコマンドに気付く前に、リモートリポジトリを操作したことがある場合。

ステップ6—便利な拡張機能をインストールする

VS CodeにはGitに多くの組み込み機能が付属しているだけでなく、機能を追加するための非常に人気のある拡張機能もいくつかあります。

Gitのせい

この拡張機能は、現在選択されている行のステータスバーにGitBlame情報を表示する機能を提供します。

これは恐ろしいように聞こえるかもしれませんが、心配する必要はありません。 Git Blame拡張機能は、誰かを気分を害することよりも実用性を重視しています。コードの変更について誰かを「非難する」という考えは、彼らを恥じることではなく、特定のコードについて質問する適切な人を見つけることです。

スクリーンショットでわかるように、この拡張機能は、下部のツールバーで作業しているコードの現在の行に関連する微妙なメッセージを提供し、誰がいつ変更を加えたかを説明します。

Gitの履歴

VS Codeに組み込まれている機能を使用して、現在の変更を表示したり、差分を実行したり、ブランチを管理したりできますが、Gitの履歴を詳細に表示することはできません。 GitHistory拡張機能はその問題を解決します。

下の画像でわかるように、この拡張機能を使用すると、ファイル、特定の作成者、ブランチなどの履歴を徹底的に調べることができます。下のGit履歴ウィンドウをアクティブにするには、ファイルを右クリックして Git：ファイル履歴の表示を選択します。

さらに、ブランチとコミットを比較したり、コミットからブランチを作成したりできます。

Gitレンズ

GitLensは、VisualStudioCodeに組み込まれているGit機能を強化します。 Gitの非難アノテーションとコードレンズを介してコードの作成者を一目で視覚化し、Gitリポジトリをシームレスにナビゲートして探索し、強力な比較コマンドを介して貴重な洞察を得るのに役立ちます。

Git Lens拡張機能は、コミュニティで最も人気のあるものの1つであり、最も強力でもあります。ほとんどの場合、前の2つの拡張機能のそれぞれをその機能に置き換えることができます。

「非難」情報については、現在作業中の行の右側に微妙なメッセージが表示され、誰が変更を行ったか、いつ変更したか、および関連するコミットメッセージが通知されます。コードの変更自体、タイムスタンプなど、このメッセージにカーソルを合わせるとポップアップする追加情報がいくつかあります。

Gitの履歴情報については、この拡張機能は多くの機能を提供します。ファイル履歴の表示、以前のバージョンとの差分の実行、特定のリビジョンを開くなど、さまざまなオプションに簡単にアクセスできます。これらのオプションを開くには、下部のステータスバーにあるテキストをクリックします。このテキストには、コード行を編集した作成者と、それが編集されたのはどのくらい前かが含まれています。

これにより、次のウィンドウが開きます。

この拡張機能には機能が満載されており、提供するすべてのものを取り込むにはしばらく時間がかかります。

結論

このチュートリアルでは、ソース管理とVSCodeの統合を使用する方法について説明しました。 VS Codeは、以前は別のツールのダウンロードが必要だった多くの機能を処理できます。