のぴぴのメモ

自分用のLinuxとかの技術メモ

MacでVisual Studio CodeをインストールしGit連携するまでの手順

1.はじめに

職場の人にコード何で書いてるか聞いたら、Visual Studio Code(以下、VS Code)を使っているという話しだったので、Macにセットアップしました。かつgit連携もしたのでメモっておきます。

2.VS Codeのセットアップ

2.1 VS Codeのインストール

MicrosoftのページのMacセットアップ手順に従ってセットアップします。→こちらのページ

  • Download Visual Studio CodeからMac用のイメージをダウンロードします
  • ダウンロードしたファイルをアプリケーションフォルダに移動します

f:id:nopipi:20180421160818p:plain:w500

  • 「アプリケーション」からVC Codeを起動します
  • 必要に応じ、Dockに固定します
    • 起動時のアイコンを2本指でクリック(副ボタン)して
    • 「オプション」→「Dock追加」
  • VC Codeを起動します

2.2 コマンドラインからのVS Code設定

コマンドラインから、”code”でVS Codeが起動するように設定を追加します。

  • VC Code上で「Command Palette (⇧⌘P) 」を実行する
  • "shell command: "と入れて絞られた中から、"shell command: Install 'code' command in PATH"を選択して実行(下図参照)

f:id:nopipi:20180421162931p:plain
ちなみに、これを実行すると、"/usr/local/bin/"にcodeという名前で、”/Applications/Visual Studio Code.app/Contents/Resources/app/bin/code”へのシンボリックリンクができます。実行タイトルや公式サイトのセットアップ手順には以下のように$PATH環境変数VS Codeディレクトリが追加されるような記載がありますが、私はこの方法ではできませんでした。*1

Restart the terminal for the new $PATH value to take effect. You'll be able to type 'code .' in any folder to start editing files in that folder.

3.git連携

3.1 gitのセットアップ

VS Codeとgit連携の前に、gitが入っていない場合はまずgitをセットアップします。

  • gitのインストール手順は、googleで探してください。
  • gitの初期設定は、こちらの記事を参照して下さい。

3.2 git連携設定

  • ターミナルを起動し、gitコマンドのpathを控える
$ which git
/usr/local/bin/git
  • VC Codeで「設定」を開き"git.path"に、gitコマンドのパスを設定する

f:id:nopipi:20180421165608p:plain

{
    "git.path" : "/usr/local/bin/git"
}

4.gitを使ってみる

4.1 gitリポジトリをcloneする

ターミナルから普通に操作しても構わないですが、VC Code内で実行したい場合は「統合ターミナル」を起動し操作します。

  • メニューから開く: 「表示」→「統合ターミナル」
  • ショートカット: 「⌃⇧@」(Control + Shift + @)

クローンの方法は、各自調べて下さい。

4.2 VC Codeでgitリポジトリを開いて操作する

VC Code上でのgit利用方法の詳細は、Visual Studio Code で Git を 使う | 験なきものを思はずは を参考にして下さい。
ちなみに私は、VC CodeからAWS CodeCommit上のリポジトリをcloneして利用しています。AWS CodeCommitの使い方については、下記記事を参照して下さい。
nopipi.hatenablog.com

*1:VS Codeのどこかのバージョンで仕様が変わったのかもしれないですね