Visual Studio Code

Visual Studio CodeでGitを操作

はじめに

Visual Studio Code(VSC)には、標準でGit連携機能が用意されています。VSC自身はGit機能を搭載していないのですが、ローカルにインストールされたGitにコマンドを発行して連携することができます。そのため、ローカル環境にGitがインストールされている必要があります。

Git連携機能を使うには、左端のアクティビティーバーにあるソース管理アイコンをクリックして(下の図参照)、ソース管理サイドバーを表示させます。ソース管理サイドバーには、ステージされているファイルの一覧と、変更があったファイルの一覧が表示されます。それぞれのファイルに対してステージやコミットの操作が行えます。

ソース管理アイコンの横に数値が表示されている場合がありますが、その数値はリポジトリにある現在の変更数を表しています。

事前準備

VSCでGitを操作するには、システムにGitがインストールされている必要があります。macOSの場合は初期状態でGitがインストールされていますが、Windowsの場合はインストールが必要です。

Git for Windows

リモートリポジトリをGithubにする場合はGithubのアカウントを作成してください。

Github

これでVSCからGitに連携することができます。Gitを操作するには、左端のアクティビティーバーにあるソース管理アイコンをクリックして(下の図参照)、ソース管理サイドバーを表示させます。Git操作のほとんどはこのパネル上で行います。

機能の紹介

次はGitに関連する各ボタンの機能を紹介します。ソース管理パネルの最上段にあるアイコンは左から[ツリーとして表示][コミット][最新の情報に更新][ビューとその他のアクション]が並びます。[ビューとその他のアクション]をクリックすると、プルやプッシュ、ブランチ操作などの項目がメニューで表示されます。ほとんどのGit操作はこのメニューから実行可能です。

[変更]一覧のバーには[すべての変更を破棄][すべての変更をステージ]アイコンが並びます。このバーにあるアイコンはプロジェクト全体を一括で操作するためのものです。一番左にある[すべての変更を破棄]アイコンをクリックすると、最後のコミット以降に作業した内容すべてが破棄されます。その右隣の[すべての変更をステージ]アイコンをクリックすると、最後のコミット以降に作業した内容をすべてコミットします

ファイル毎に[ファイルを開く][変更を破棄][変更をステージ]アイコンが並びます。[変更を破棄][変更をステージ]アイコンは、それぞれ[すべての変更を破棄][すべての変更をステージ]と機能が同じですが、ここにあるアイコンは該当するファイルだけが対象となります。[ファイルを開く]アイコンをクリックすると、該当するファイルが編集状態で開かれます。

[ファイルを開く]アイコンより左側、ファイル名のあたりをクリックすると、以前コミットした状態と現在の状態の差分が表示されます。前回コミットからの変更点を確認したいときに便利です。

リポジトリの作成とクローン

フォルダを開いていない状態では、ソース管理のサイドバーに[フォルダーを開く][リポジトリのクローン]ボタンが表示されます。

すでにリポジトリがあるフォルダを開く場合は[フォルダーを開く]ボタンを押してください。Githubなどにあるリポジトリをローカルに複製したい場合は[リポジトリのクローン]ボタンを押します。このとき、まだGithubのアカウントと連携できていないときはアカウント連携の許可を求められるので、画面の説明に従って操作してください。

リポジトリがないワークスペースを開いている場合は、[リポジトリを初期化する]ボタン、[Githubに公開]ボタンが表示されます。どちらのボタンでも、現在のワークスペースにリポジトリを作成します。[Githubに公開]の場合はローカルにリポジトリを作成するのと同時に、Githubに公開することができます。

Githubと連携する

リモートリポジトリをGithubにしたい場合、VSCだと簡単です。まだリポジトリを作成していない場合は前段で紹介している[Githubに公開]ボタン、リポジトリを作成済みの場合はメニューから[リモートの追加]ボタン(下の図参)をクリックします。

Githubと連携していない場合、[Githubに公開]ボタンや[リモートの追加]ボタンをクリックするとGithubとの連携ウィザードが始まります。ポップアップでGithubとの連携の許可ウインドウ(下の図参)が表示されるので、[許可]ボタンをクリックします。

[許可]ボタンをクリックすると、公開用リポジトリとして登録するか、非公開リポジトリとして登録するかのプルダウンが表示されます。このとき、リポジトリ名は開いているフォルダ名になります。どちらかを選択するか、他のリポジトリにしたい場合はそのリポジトリを入力します。

リポジトリを選択すると、ワーキングディレクトリ内のファイルがプルダウンに表示されます(下の図参)。ステージングしたくないファイルがあればチェックマークを外してください。問題なければ[OK]ボタンを押してステージングを確定します。

Githubからサインアウト

Visual Studio CodeからGithubに一度連携すると、別のプロジェクトでもそのアカウントがデフォルトで使われます。Githubアカウントが1つだけであれば問題ありませんが、場合によってはGithubのアカウントを変更する必要があります。そのような際は、一度サインアウトしてから、再度サインインします。

サインアウトをするには、アクティビティーバーのアカウントアイコンをクリックし、サインアウトしたいアカウント名を選択します。サブメニューが表示されるので、そこから[サインアウト]をクリックします。これでGithubとの連携が外されます。

ターミナルを使う

リポジトリの作成やクローンでリポジトリをローカルに作成したら、ユーザ名とメールアドレスを設定しましょう。Gitはコミットとユーザ名を関連付けて記録するので、あらかじめユーザ名とメールアドレスの設定する必要があります。このときのユーザ名はGithubユーザ名と同じである必要はありません。

WindowsであればコマンドプロンプトからGitコマンドを発行できますが、VCSからでも発行できます。VSCに用意されたターミナルを使うには、メニューから[ターミナル]-[新しいターミナル]を選択します。ターミナルのパネルが表示されるので、そこでGitコマンドを発行します。

ターミナルパネルにシェルが表示されているので、そこでコマンドを発行することができます。

ユーザ名の設定

それでは、ユーザ名とパスワードを設定してみましょう。設定はgit configコマンドを使います。git configで設定した名前は、以降のコミットだけに影響しこれまでのコミットには適用されません。

まずは、すでにユーザ名が設定されているかを確認します。設定には適用範囲があり、システム全体の --sysytem、使用ユーザの --global、設定したリポジトリ --localとオプションを使って指定できます。一般的には --global でユーザ単位で設定します。

グローバルの設定一覧を表示
git config --global -l

ユーザ名を設定する際は user.name オプションを使います。

グローバルにユーザ名を設定
git config --global user.name [ユーザー名]

これで現在のユーザを使っている限りここで設定したユーザ名が使われます。次にメールアドレスも設定しましょう。メールアドレスは user.email です。

グローバルにメールアドレスを設定
git config --global user.email [メールアドレス]

これでユーザ名とメールアドレスが設定されました。git configで正常に設定されているか確認してみましょう。

git config --global -l

一覧に先程設定したユーザ名とメールアドレスが表示されていれば成功です。これでコミットの際にこの設定が使われます。

コミット

VSCでリポジトリの作成かクローンもしくはリポジトリのあるワーキングディレクトリを開いている場合、Git連携による操作ができます。ここでは、コミットの方法を紹介します。VSCのコミットはボタンやメニューからコミットを実行する方法と、コミットメッセージを入力してからコミットする方法の2種類が用意されています。

[コミット]ボタンßを押すと、コミットメッセージの入力が促されるので、コミット内容を説明するメッセージを入力してください。ステージしていないファイルがある場合、すべての変更をステージするかの確認モーダルが表示されます。問題なければ[はい]を押してください。メッセージ入力後は[Ctrl]+[Enter](macOS:[⌘]+[Enter])でコミットを確定します。メッセージを改行する場合は[Enter]です。

[コミット]ボタン以外にも、コミットメッセージを入力するための[メッセージ]というテキストボックス(下の図参)も用意されています。この[メッセージ]にコミットメッセージを入力しても、同じくコミットすることができます。

メニューからGitコマンドを発行する

プル、プッシュはソース管理パネルの一番右にある[ビューとその他のアクション...](下の図参)から実行できます。そのほか、クローンやブランチの操作など、ほとどの操作はこのメニューから実行可能です。

ここで開いたターミナルはプロジェクトのルートがカレントです。git initを実行すればプロジェクト内でリポジトリが作成されます。

関連記事