Visual Studio CodeでのGitとの連携方法

Visual Studio Codeには、簡易的なGitとの連携機能が搭載されています。
この記事では、Gitとの連携機能について、簡単に解説していきます。

なお、事前にPCへGitをインストールする必要があります。
(Windows版はこちらからダウンロードできます→https://git-for-windows.github.io/)
また、現状Visual Studio Codeでは設定できないGitの設定があるため、別途Gitクライアントソフトをインストールしておくことをお勧めします。

・Gitリポジトリの作成からプッシュまで

Gitリポジトリとして初期化したいフォルダを開いた上、左メニューの上から3番目のGitアイコンをクリック。
(ここでは、前回のブログで解説した、『padrino-admin』プロジェクト全体をローカルリポジトリとして初期化します)
左にメニューが表示されますので、その中のGitリポジトリの初期化というボタンをクリックします。
1

確認のため、ファイルエクスプローラーで該当フォルダを開くと、隠しフォルダ『.git』が出来ていることが確認できます。
2

この段階では、ローカルリポジトリには今まで作ったファイルが反映されていないため、コミットをして変更を反映させます。
左メニューのテキストボックス内にコメントを入力の上、Ctrl+Enterを押下します。(または、テキストボックスの上のチェックアイコンをクリック)
3
変更したファイル全てがコミットされ、ローカルリポジトリに変更が反映されます。

別途Gitクライアントなどを使用して、リモートリポジトリ及びユーザー設定を指定し、左メニュー内の『…』をクリックして出てきたメニューより『公開』をクリックすると、リモートリポジトリと連携され、リモートリポジトリに今までの変更がプッシュされます。
4a

・ブランチの作成と切替

左下のGitアイコンの隣をクリック。
上部にブランチの一覧が出てくるので、使用したいブランチをクリックすると、参照するブランチの切替ができます。
5a

また、上部ボックスに『git checkout (任意の名前)』と入れてあげると、新しいブランチの作成も出来ます。
6

・変更箇所の確認

先程のソースの一部を変更して保存をします。
再度Gitメニューを開くと、変更したファイルの一覧が出ます。
変更したファイル名をクリックすると、先のコミットからの変更がプレビューで確認できます。
8

・ファイルを選択してのコミット

Gitメニューを開き、変更したファイルにカーソルを当て、右側に出る+マークをクリックします。
9

選択したファイルが『ステージング済みの変更』というグループに移動します。
この状態でコミットを実行すると、ステージングしたファイルにのみコミットが出来るようになります。
10

なお、ステージングを取り消したい場合は、ステージングしたファイルにカーソルを当て、-マークをクリックして取消ができます。
11

以上が、HTMLでリモートリポジトリと同期している場合での説明になります。
なお、SSHでのリモートリポジトリとの同期の場合、Visual Studio CodeがSSHにまだ対応出来ていないため、他のGitクライアントの力を借りることになります。
しかし、コミット及びブランチ操作のようなローカルリポジトリでの操作については、いちいちGitクライアントにアクセスせず実施できるため、手軽にコミットできるかと思います。
(なお、HTMLでのプッシュ及びプルについては、Gitメニュー内の『…』より表示されるメニューより実施できます)

 

補足:マークダウン記法のプレビューについて

Visual Studio Codeでは、GitHubなどでよく使われるマークダウン記法のプレビュー表示にも対応しています。
Gitホスティングサイトとして、GitHubを使っている方も多いかと思いますので、ここで簡単に解説します。

右下の顔マークの隣をクリックし、上部メニューからMarkdownを選択。
12a

Ctrl+Shift+Vを押すことにより、別のタブでMDファイルのプレビューが開きます。
13

元ファイルの編集に応じてリアルタイムで反映されるため、下記画像のようにウインドウを2枚にして並べて編集することも可能なため、非常に使いやすいかと思います。
14

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA