VS Codeの神拡張機能「Visual Studio Live Share」のご紹介

目次

はじめに

Visual Studio Live Share がパブリックプレビューになってました!
誰でも利用可能です!

完全に見逃してました。
VSCode使いとして恥ずかしい限りです。
(de:codeを仕事しながらちら見してて何かやってんなーとは思ってたんですよね。。。)
気を取り直して

Visual Studio Live Share とは

↑のリンクを見てもらえば一目瞭然ですが

リアルタイムにソースコードを共同編集できる機能です!

VS Code もしくは VisualStudioをお使いならプラグインを入れるだけで使えます。
もちろん無料です。
ピンときてない方は公式の動画を見てみてください(英語)

どうですか?

  • リモートでペアプロできる
  • 後輩などから「うごかないっす!」って言われたときにリンク貰えばその人の環境でコードとターミナルまでリアルタイムに確認・編集・操作できる
  • ↑ は自分が困ったときに見てもらうのにも有効ですね
  • 単なる画面共有ではありません! 自分の環境のVSCodeで他人のコードをいじれます!
  • なんとソースだけでなくターミナルも共有できます
  • 更にローカルで確認用に立ててるサーバーも共有可能です(localhost:3000」とか)

つづきから↓導入方法(VSCodeのみ)です。

導入編

対象

  • VSCode
    • VSCodeは最新版にしておきましょう
    • 対応OS → Windows (7, 8.1, or 10) or macOS (Sierra+ only), or 64-bit Linux (see details)

拡張機能「VS Live Share」をインストール

拡張機能をインストールしましょう
この作業は初回の1回のみです

  1. ↓にアクセスし、「Install」buttonをclick
    VS Live Share - Visual Studio Marketplace

  2. 画面上部にVSCode開きますか的なやつが出たりするので開く

  3. VSCodeの拡張画面インストール画面が開くので「インストール」を押す

  4. インストール後は「再読み込み」をしてください
    (初回はすこーしインストールに時間かかるかも)

  5. VSCodeの画面下部に新しくこんなのついてたらインストールされています

VS Live Shareにサインインする

  1. VSCodeの画面下部のコレを押す

  2. ブラウザにサインイン画面が開くので「Microsoftアカウント」or「GitHubアカウント」でログインします
    (私は迷わずGitHubでログイン)
    「Ready to collaborate!」とブラウザに表示されたら成功してます。VSCodeの画面に戻ってください。

  3. ログインに成功すると画面下部の「Sign in」だった部分がユーザー名に変わってます

VS Live Shareを使ってみる

自分の環境をシェアするとき(ホスト)

  1. 画面下部の「Share」ボタンを押しましょう

  2. 横文字で注意ダイアログが出ますが「OK」を押しましょう
    接続モードがデフォルトだと「Auto」ですよ 的なこと

    ファイヤーウォールとかいい感じにしてね 的なこと
    が書いてあります(多分)

  3. クリップボードに共有用のURLがコピーされているので、共有したい人にチャットとかで送ります
    URLはこんなやつ → 「 https://insiders.liveshare.vsengsaas.visualstudio.com/join?xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    ※ 間違っても不特定多数の人が見れるような場所には貼らないこと!

  4. ゲストが参加すると画面下部に参加人数が出ます
    「自分の名前」のボタンで共有セッションのコントロール
    「参加人数」のボタンで参加者の確認
    が出来ます

  5. 以上!簡単!

他人の環境に参加するとき(ゲスト)

  1. 参加用のURLを開きます
    ホストに 自分の環境をシェアするとき(ホスト) の手順で共有URLを発行してもらってください

  2. ブラウザが↓のようになっていると思いますので、「Live Share for VS Code を開く」ボタンを押してください。

  3. VS CODEが立ち上がり、ホストのソースコードをリアルタイムに編集できます

  4. 以上!簡単!

おわり

今回は簡単に紹介と最低限の共有方法を紹介しました。
この他にも、ターミナルの共有やローカルサーバーの共有という非常に便利でパワフルでビューティフルな機能もあります。
また、セキュリティ面の設定などもう少し紹介したい内容もあるので近々書きたいです(たぶん)

これまでの開発スタイルをガラッと変えてしまうじゃないか!!ぐらいのインパクトな
Visual Studio Live Share
をぜひ皆さんも使ってみてください!

参考リンク

セキュリティ面が気になる方はこちら