VSCodeのインストール【Githubへのpushまで解説】
VSCodeのセットアップ、VSCodeへのGitインストール方法、ローカルリポジトリ作成〜ローカルリポジトリコミット〜Githubへpushまでの手順についてまとめていきます。
VSCodeのインストール
まずはこちらにアクセスして、VSCodeをインストールしましょう。こちらは簡単で1分程度でインストールすることができます。
開くとこのようなVSCodeが展開。
new fileを押すとすぐにエディターが表示されます。
先ほどのダウンロード元ページには以下のようなことが書かれています。
日本語訳すると
とのこと。
今回はGit、Node.jsのセットアップを行なっていきます。
VSCodeの日本語化
VSCodeは初期のままでは英語になっているため、日本語で表示できるようにしておきましょう。
手順
- ①サイドメニューのEXTENSIONSをクリック
- ②検索欄に「Japanese Language Pack for Visual Studio Code」と入力
- ③表示された拡張機能をインストール
次に「command + shift + p」を押して検索窓を表示させ、「configure display langage」と入力します。
選択肢に「en」「ja」が表示されるため「ja」をクリック
「表示切り替えのためにアプリをリスタートさせていいですか？」と確認されるので、「Restart」をクリックします。
これでVSCodeの日本語化が完了しました。
参考：
Visual Studio Code [vsCode] 日本語化 - Qiita
Gitのセットアップ
先ほど引用した「Additional Components」をクリックすると、こちらのページが表示されます。
まとめると…
- インストールした段階では最小限のコンポーネントしか含まれていない。
- エディター、ファイル管理、ウィンドウ管理、設定などの基本機能は含まれている。
- JavaScript/TypeScript 言語サービス と Node.jsデバッガーも含まれている。
- 特定のニーズに応じて追加のコンポーネントをインストールする必要がある。
とのこと。
Git、Node、Typescriptについてはダウンロード方法などについて箇条書きで記されています。
「VS Codeには、Gitを使用したソースコード管理の組み込みサポートがありますが、Gitを個別にインストールする必要があります」とのことなので、早速リンクから飛び、Gitをインストールしていきましょう。
これでGitのインストールが終了しました。
参考：
MacにVisual Studio Codeを導入してみる - Qiita
Gitの初期設定
GitをMacにインストールしたら、それと同時に初期設定も行なっておきましょう。
Macのターミナルを開き、Gitアカウントと紐付けます。
参考：
VSCodeでのGitの基本操作まとめ - Qiita
この２行はGitアカウントと関連する情報を入力します。
$ git config --global user.name 'username'
$ git config --global user.email 'username@example.com'
ここではGitで使用するエディターとマージツールをVSCodeと指定しています。
$ git config --global core.editor 'code --wait' $ git config --global merge.tool 'code --wait "$MERGED"'
「code」というのが「VSCode」を指しており、他のエディター、例えば「Atom」の場合には以下のような記述になります。
$ git config --global core.editor 'atom --wait' $ git config --global merge.tool 'atom --wait "$MERGED"'
最後にGIt pushの方法をしてしています。「default simple」を指定すると、現在のブランチのみをプッシュする設定になります。
$ git config --global push.default simple
参考：
Git – push.default “matching”と “simple”の違いは何ですか？ - コードログ
VSCodeとGitの連携
次にVSCodeとGitの連携方法について解説をしていきます。
リポジトリの作成
ターミナルを開き、以下のコマンドを打ち込んでいきましょう。
Morishimac:~ morishimahiraku$ mkdir git-sandbox
Morishimac:~ morishimahiraku$ cd git-sandbox/
Morishimac:git-sandbox morishimahiraku$ git init
Initialized empty Git repository in /Users/morishimahiraku/git-sandbox/.git/
ここまでの流れを説明します。
Morishimac:~ morishimahiraku$ mkdir git-sandbox
まず「git-sandbox」という名前のプロジェクト用ディレクトリを作成しました。このディレクトリをもとに、後ほどGitのローカルリポジトリを作成していきます。
Morishimac:~ morishimahiraku$ cd git-sandbox/
Initialized empty Git repository in /Users/morishimahiraku/git-sandbox/.git/
次に作成した「git-sandbox」ディレクトリ内に移動します。
Morishimac:git-sandbox morishimahiraku$ git init
そしてgit-sandboxプロジェクトのローカルリポジトリを作成します。
「git init」コマンドは、リポジトリを新規に作成するときに使用するコマンドです。
コミットするファイルの作成
次にVSCodeを開き「フォルダーを開く」を押します。
検索窓に「git-sandbox」と入力し、実際にフォルダ（ディレクトリ）を開きます。
すると以下のような画面が表示されるため、
GIT-SANDBOXフォルダにカーソルを当てると出てくるアイコンメニュー（①）から新規ファイルの作成をクリックし、
「text.md」というファイル名を入力（②）して、マークダウン 形式のファイルを作成しましょう。（ここはどんなファイルを作成しても構いません。）
「text.md」の中身はなんでも構いませんが、せっかくなのでマークダウン形式で記入してみます。
#VSCodeとGitの連携 - まず「git-sandbox」という名前のプロジェクト用ディレクトリを作成しました。このディレクトリをもとに、後ほどGitのローカルリポジトリを作成していきます。 - そしてgit-sandboxプロジェクトのローカルリポジトリを作成します。 「git init」コマンドは、リポジトリを新規に作成するときに使用するコマンドです。 - 次にVSCodeを開き「フォルダーを開く」を押します。
ここまでできたら「command + S」で保存しましょう。
ステージング
次に新規作成したファイルをステージングしていきます。
ステージングとは、新規作成・変更したファイルをコミット予定のエリアに置くことです。
また、コミットとはファイルやディレクトリの追加・変更を、リポジトリに記録する行為のことを指します。
まずはサイドメニューの「ソース管理」アイコンをクリックしましょう。その後、「CHANGES」にカーソルを合わせると「＋」アイコンが出てくるためこちらをクリックします。
ファイル1つずつをステージングする場合には、CHANGESではなく、ステージングしたいファイルにカーソルを当てることで、一つずつ「＋」を押すことができるようになっています。
ステージングが完了すると以下のような表示に切り替わります。
これでステージング完了です。
VSCodeの場合には、自動ステージング機能があるので、その方法については調べて追記します。
コミット
最後にステージングしたファイルやフォルダをローカルリポジトリにコミットします。
手順について少し説明をします。
① コミットをする際にはコメントが必要となります。慣例的に最初のコメントには「first commit」と書き込むことが多いです。もちろんそれ以外のコメントでも構いません。
② 「✔︎」アイコンを押すとコミットが行われます。
③ 正常にコミットが終わると青色のバッジが消えます。
もし正常にコミットされなかったという場合には、この記事の「Gitの初期設定」の手順が行われていないかもしれません。
***番外編 〜Git Historyの導入でコミット履歴を見る〜
VSCodeにはコミットした履歴を見ることができる「Git History」というプラグインがあります。こちらを使用してみましょう。
①の後に検索欄で「Git History」と検索する必要があります！
導入したら「command + shift + p」で検索窓を表示させ、「Git History」と検索してみましょう。
すると、「Git:View Git History」と表示されるので、そちらをクリックします。
そうするとFILE Historyというタブが開き、先ほどのコミット履歴が表示されました。
Githubにpush
次にコミットしたローカルリポジトリをサーバーのリポジトリへpushする方法です。
まずはGithubにアクセスし、新たなリポジトリを作成しましょう。
「command + shift + p」で検索窓を表示させ、「add remote」と入力します。
次に「Please provide a remote name」と尋ねられるので「origin」と入力します。
先ほど作成したGithubのQuick setupページにアクセスし、赤い枠線で囲っているURLをコピーしましょう。
VSCodeに戻り、先ほどコピーしたURLを検索窓（今更ですがコマンドパレットと言うみたいです）にペースト、その後returnを押します。
最後に以下の画面の手順に従ってプッシュします。
