Live Share Integration with Peacock and VS Code
Tags: vscode, webdev, javascript, fun
Published: 2019-06-03 15:56:02

---
title: Live Share Integration with Peacock and VS Code
published: true
description: Peacock now has integration with the Live Share VS Code extension.
tags: vscode, webdev, javascript, fun
cover_image: https://thepracticaldev.s3.amazonaws.com/i/coa26j3s758fwxqxknwv.png
canonical_url: https://johnpapa.net/live-share-integration-with-peacock/
---

One the of the coolest part of creating Open Source Software (OSS) is that ideas can be extended by any of us in the community to create even more valuable software! This past week I reviewed, collaborated, and merged some Pull Requests into Peacock that enable it to work with both VS Code's [Remote Development](https://code.visualstudio.com/docs/remote/remote-overview?wt.mc_id=devto-blog-jopapa) and [Live Share](https://code.visualstudio.com/blogs/2017/11/15/live-share?wt.mc_id=devto-blog-jopapa) features!

![](https://media.giphy.com/media/XHjjLWPSfR4ZA7PXmc/giphy.gif)

## Live Share

[Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock&wt.mc_id=devto-blog-jopapa) detects when the [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare&wt.mc_id=devto-blog-jopapa) extension is installed and automatically adds two commands that allow the user to change color of their Live Share sessions as a Host or a Guest, depending on their role.

> Live Share is a VS Code extension that adds collaboration capabilities to the editor. Using Live Share one can share their local files, terminals, local servers and debugging sessions with someone remote.

The commands allow users to pick a color from the favorites that can be used during Live Share session.

| Command                                  | Description                                                                    |
| ---------------------------------------- | ------------------------------------------------------------------------------ |
| Peacock: Change Live Share Color (Host)  | Prompts user to select a color for Live Share Host session from the Favorites  |
| Peacock: Change Live Share Color (Guest) | Prompts user to select a color for Live Share Guest session from the Favorites |

When a [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare&wt.mc_id=devto-blog-jopapa) session is started, the selected workspace color will be applied. When the session is finished, the workspace color is reverted back to the previous one (if set).

- Learn more about [Live Share here](https://code.visualstudio.com/blogs/2017/11/15/live-share?wt.mc_id=devto-blog-jopapa)
- Get the [Live Share extension here](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare&wt.mc_id=devto-blog-jopapa)
- Get the [Live Share extension pack](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack&wt.mc_id=devto-blog-jopapa), which now includes Peacock

## Remote Development

Peacock also now has support for the Remote Development feature of VS Code.

VS Code distinguishes two classes of extensions: UI Extensions and Workspace Extensions. Peacock is classified as a UI extension as it makes contributions to the VS Code user interface and is always run on the user's local machine. UI Extensions cannot directly access files in the workspace, or run scripts/tools installed in that workspace or on the machine. Example UI Extensions include: themes, snippets, language grammars, and keymaps.

In version 2.1.2 Peacock enabled integration with the Remote Development by adding `"extensionKind": "ui"` in the extension's `package.json`.

- Learn more about [VS Code Remote Development](https://code.visualstudio.com/blogs/2019/05/02/remote-development?wt.mc_id=devto-blog-jopapa)
- Get the [VS Code Remote Development Extensions](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack&wt.mc_id=devto-blog-jopapa)

## Thanks!

Special thanks to both [Oleg Solomka](https://twitter.com/legomushroom) and [Jonathan Carter](https://twitter.com/lostintangent) for implementing the Live Share integration. Also to [Matt Bierner](https://twitter.com/mattbierner) for implementing the Remote Development integration.