序章

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

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

前提条件

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

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

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

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

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

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

  1. mkdir git_test

  2. cd git_test

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

  1. git init

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

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

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

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

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

  1. ls -la

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

  1. Output
    .

  2. ..

  3. .git

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

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

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

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

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

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

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

Emmet ショートカットを使用して、VSCodeでHTML5スケルトンを生成できます。 ! キーに続いて Tab 鍵。 先に進んで、に何かを追加します <body> のような <h1> 見出しとそれを保存します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

に切り替えた後 master ブランチ、あなたはそれに気付くでしょう this is the new test branch にコミットされたテキスト test ブランチはもう存在しません。

ステップ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は、以前は別のツールのダウンロードが必要だった多くの機能を処理できます。