Visual Studio Live Share가 그렇게 할 수 있습니까?

게시 됨: 2022-03-10
빠른 요약 ↬ 사무실 문서 공동 작업은 해결된 문제입니다. 코드에 대한 공동 작업은 여전히 ​​매우 어려운 일입니다. 코드를 공유하는 것만으로는 충분하지 않기 때문입니다. 진정한 협업을 위해서는 개발자가 전체 환경을 공유할 수 있어야 합니다. VS Live Share는 바로 그 일을 할 수 있는 새로운 서비스이며 실제로 얼마나 많은 공유를 할 수 있는지 놀랄 것입니다.

몇 달 전에 Microsoft는 무료 Visual Studio(VS) Live Share 서비스를 출시했습니다. VS Live Share는 코드에 대한 Google 문서 수준 공동 작업입니다. 여러 개발자가 자신의 편집기를 종료하지 않고도 같은 파일에서 동시에 공동 작업할 수 있습니다.

Live Share가 출시된 후 저는 우리 중 많은 사람들이 우리 코드에서 격리되기를 포기했고 VS Live Share와 같은 서비스를 사용하는 더 나은 방법이 있다는 사실조차 알지 못한다는 것을 깨달았습니다. 이것은 부분적으로는 우리가 오래된 습관에 갇혀 있기 때문이고 부분적으로는 VS Live Share가 무엇을 할 수 있는지 알지 못하기 때문입니다. 내가 도울 수있는 마지막 부분!

이 기사에서는 개발자 협업을 "익명의 하마"처럼 쉽게 만들어주는 VS Live Share의 기능과 모범 사례를 살펴보겠습니다.

Google 문서의 익명 동물 목록
Google 문서도구에는 익명 참가자를 처리하는 흥미로운 방법이 있습니다(큰 미리보기).

코드 공유

Live Share는 Visual Studio와 Visual Studio Code(VS Code) 모두에 대한 확장으로 제공됩니다. 이 기사에서는 VS Code에 중점을 둘 것입니다.

vs 코드 라이브 공유 확장 추가 정보 페이지
(큰 미리보기)

다음 확장을 포함하는 VS Live Share 확장 팩을 통해 설치할 수도 있습니다.

  • VS 라이브 공유
  • VS 라이브 공유 오디오
  • Slack 채팅 확장
점프 후 더! 아래에서 계속 읽기 ↓

확장 프로그램이 설치되면 VS Live Share 서비스에 로그인해야 합니다. 명령 팔레트 Ctrl/Cmd + Shift + P 를 열고 "브라우저로 로그인"을 선택하면 됩니다. 로그인하지 않고 새 공유 세션을 시작하려고 하면 그 때 로그인하라는 메시지가 표시됩니다.

대 브라우저로 로그인하는 옵션을 보여주는 코드 명령 팔레트
VS Code 명령 팔레트를 사용하여 새 Live Share 세션 시작(큰 미리보기)

VS Live Share 세션을 시작하는 방법에는 여러 가지가 있습니다. 명령 팔레트에서 수행하거나 하단 도구 모음에서 해당 "공유" 버튼을 클릭하거나 사이드바에서 VS Live Share 탐색기 보기를 사용할 수 있습니다.

vs 실시간 공유 세션을 시작하는 데 사용할 수 있는 UI의 다른 부분 주위에 상자가 그려진 코드
새로운 VS Live Share 세션을 시작하는 방법은 무수히 많습니다(큰 미리보기)

링크가 클립보드에 복사됩니다. 그런 다음 해당 링크를 다른 사람에게 보낼 수 있으며 VS Code도 사용하는 경우 Live Share 세션에 참여할 수 있습니다. 우리 모두가 그렇지 않습니까?

이제 일반 이전 Word 문서에서 작업하는 것처럼 공동 작업을 수행할 수 있습니다.

다른 사람은 코드를 볼 수 있을 뿐만 아니라 편집, 저장, 실행 및 디버그까지 할 수 있습니다. 당신을 위해, 그것들은 이름이 있는 커서로 나타납니다. 당신은 그들의 편집기에 같은 방식으로 나타납니다.

VS Live Share 탐색기

VS Live Share 탐색기는 내 화면의 맨 오른쪽에 있는 아이콘 모음인 작업 모음에 새 아이콘으로 표시됩니다(기본 작업 모음 배치의 경우 가장 왼쪽에 있음). 이것은 모든 VS Live Share에 대한 일종의 "그라운드 제로"입니다. 여기에서 세션을 시작하고 종료하고 터미널, 서버를 공유하고 누가 연결되어 있는지 확인할 수 있습니다.

vs 라이브 공유 뷰렛
VS Live Share Explorer는 Live Share의 모든 것(큰 미리보기)에 대한 헤드업 보기입니다.

이 VS Live Share 탐색기 보기에 바로 가기 키를 바인딩하여 해당 보기와 파일 간에 빠르게 전환할 수 있도록 하는 것이 좋습니다. Ctrl/Cmd + K (또는 Ctrl/Cmd + S )를 누른 다음 "라이브 공유 표시"를 검색하면 됩니다. 내 것을 Ctrl/Cmd + L 에 바인딩했는데 다른 것에 바인딩되지 않은 것 같습니다. 이 단축키는 직관적이고(Live Share의 경우 L ) 키보드에서 누르기 쉽습니다.

vs 라이브 공유 뷰렛에 대해 생성된 바인딩이 있는 vs 코드의 키보드 바인딩 화면
VS Live Share Explorer 뷰렛(큰 미리보기)에 대한 바인딩을 만들 수 있습니다.

코드 읽기 전용 공유

새 공유 세션을 시작하면 이에 따라 알림이 표시되고 작업 공간을 읽기 전용으로 공유할 것인지 묻는 메시지가 표시됩니다. 읽기 전용을 선택하면 사람들이 코드를 보고 움직임을 따라갈 수 있지만 상호 작용할 수는 없습니다.

사용자에게 읽기 전용 공유를 선택하라는 코드 알림 대
공유 세션은 기본적으로 읽기-쓰기이지만 읽기 전용으로 설정할 수 있습니다(큰 미리보기)

이 모드는 반드시 신뢰할 필요가 없는 사람(예: 공급업체, 파트너 또는 전애인)과 공유할 때 유용합니다.

또한 강사에게 특히 유용합니다. 이 글을 쓰는 시점에서 VS Live Share는 5명의 동시 사용자로 잠겨 있습니다. 특히 그룹을 가르치는 경우 읽기 전용 모드에서 그 이상을 원할 것이므로 사용자 설정 파일에 Ctrl/Cmd + , .

 "liveshare.features": "experimental"

기본 조인 동작 변경

링크가 있는 사람은 누구나 Live Share 세션에 참여할 수 있습니다. 그들이 가입하면 알려주는 팝업이 표시됩니다. 마찬가지로 연결이 끊어지면 알림을 받습니다. 이것은 VS Live Share의 기본 동작입니다.

실시간 공유 세션에 참여한 사람의 이름이 포함된 vs 코드 알림
VS Code는 누군가가 세션에 참여할 때마다 경고합니다(큰 미리보기)

누군가가 세션에 참여하기 전에 수동으로 승인해야 하도록 이 값을 변경하는 것이 좋습니다. 이것은 당신이 점심을 먹고 세션 연결을 끊는 것을 잊어버린 경우에 당신을 보호하기 위한 것입니다. 동료는 다시 로그인할 수 없고 데이터베이스 연결 문자열에서 한 글자를 변경한 다음 웃으면서 앞으로 4시간 동안 당신의 인생이 어떻게 그렇게 끔찍하게 잘못되었는지 알아내려고 노력합니다.

이를 활성화하려면 사용자 설정 파일 Ctrl/Cmd + , 에 다음 줄을 추가합니다.

 "liveshare.guestApprovalRequired": true

이제 누군가가 참여하고 싶어할 때 메시지가 표시됩니다. 누군가를 차단하면 세션 기간 동안 차단됩니다. 그들이 다시 참여를 시도하면 알림이 전송되지 않으며 VS Live Share에서 무례하게 거부됩니다.

가서 점심을 즐기십시오. 당신의 컴퓨터는 안전합니다.

초점 추종자

기본적으로 Live Share 세션에 참여하는 모든 사람은 귀하를 "팔로잉"합니다. 즉, 편집기는 사용자가 있는 파일을 로드하고 스크롤할 때마다 스크롤합니다. 파일을 전환하더라도 참가자는 내가 보는 그대로를 보게 됩니다.

어떤 사람이 파일을 변경하면 더 이상 당신을 팔로우하지 않습니다. 따라서 둘 다 함께 파일 작업을 하다가 다른 파일로 이동하면 자동으로 함께 이동하지 않습니다. 이는 다른 사람이 완전히 다른 것을 보고 있는 동안 자신이 있는 파일의 코드에 대해 이야기하는 것과 많은 혼란을 초래할 수 있습니다.

서로에게 현재 위치를 알려주는 것 외에도(btw가 작동함) 명령 팔레트 Ctrl/Cmd + Shift + P 에 "참가자 집중"이라는 편리한 명령이 있습니다.

실시간 공유 포커스 명령을 보여주는 vs 코드 명령 팔레트
VS Code 명령 팔레트에서 "포커스" 명령에 액세스(큰 미리보기)

VS Live Share 탐색기 보기에서 아이콘으로 액세스할 수도 있습니다.

vs 코드 라이브 공유 탐색기 포커스 아이콘
VS Live Share Explorer 뷰렛에서 팔로우 아이콘을 클릭하여 팔로우 요청 보내기(큰 미리보기)

이렇게 하면 참가자가 클릭하거나 스크롤한 다음 항목에 집중할 수 있습니다. 기본적으로 VS Live Share 포커스 요청은 암시적으로 수락됩니다. 사람들이 당신에게 집중하는 것을 원하지 않으면 사용자 설정 파일에 다음 줄을 추가할 수 있습니다.

 "liveshare.focusBehavior": "prompt" 

또한 참가자를 팔로우할 수 있습니다. VS Live Share Explorer 보기에서 이름을 클릭하면 팔로우를 시작합니다.

다른 사람이 코드 편집을 시작하는 즉시 팔로잉이 해제되기 때문에 사람들이 당신을 팔로우할 때와 팔로우하지 않을 때를 정확히 알기 어려울 수 있습니다. 볼 수 있는 한 곳은 VS Live Share Explorer 보기입니다. 그것은 그 사람이 있는 파일을 알려줄 것이지만 그들이 당신을 팔로우하는지 여부는 알 수 없습니다.

좋은 습관은 초점이 항상 변하기 때문에 사람들이 당신이 보는 것을 볼 수도 있고 보지 못할 수도 있다는 점을 기억하는 것입니다.

팀으로 디버그

참가자는 귀하가 실행하는 디버그 세션을 공유할 수 있습니다. 디버그 세션을 시작하면 사용자와 똑같은 경험을 하게 됩니다. 그것이 당신 쪽에서 깨지면 그들의 쪽에서 깨지고 그들은 당신의 모든 코드에 대한 전체 디버그 보기를 얻습니다.

디버그 콘솔에서 한 단계 더 나아가고, 나가거나, 감시를 추가하고, 평가할 수 있습니다. 당신이 할 수 있는 모든 디버깅은 그들도 할 수 있고 그들은 그것을 제어할 수 있습니다.

디버깅은 참가자가 시작할 수도 있습니다. 기본적으로 VS Code는 디버거를 원격으로 시작하는 것을 허용하지 않습니다. 이를 활성화하려면 사용자 설정 파일 Ctrl/Cmd + , 에 다음 줄을 추가합니다.

 "liveshare.allowGuestDebugControl": true

터미널 공유

개발자로서 우리가 하는 많은 작업은 우리 코드에 없습니다. 터미널에 있습니다. 어떤 날은 에디터에서 하는 시간만큼 터미널에서 보내는 것 같습니다. 즉, 터미널에 오류가 있거나 일부 명령을 입력해야 하는 경우 VS Live Share의 참가자가 코드와 함께 터미널을 볼 수 있다면 좋을 것입니다.

VS Code에는 단말기가 통합되어 있어 VS Live Share로 공유할 수 있습니다.

공유 터미널이 선택된 vs 코드 명령 팔레트
VS Code 명령 팔레트에서 "공유 터미널" 명령에 액세스(큰 미리보기)

이렇게 하면 터미널을 읽기 전용 또는 읽기-쓰기로 공유할 수 있습니다.

vs 코드는 터미널을 읽기 전용 또는 읽기-쓰기로 공유하라는 메시지를 표시합니다.
쓰기 권한으로 절대 공유해야 하는 경우가 아니면 항상 터미널을 읽기 전용으로 공유하십시오(큰 미리보기).

기본적으로 터미널을 읽기 전용으로 공유해야 합니다. 터미널 읽기-쓰기를 공유하면 사용자는 터미널에서 직접 임의의 명령을 실행할 수 있습니다. 잠시 동안 가라앉게 두십시오. 무거워

누군가의 터미널에 원격 쓰기 액세스 권한을 갖는 것은 많은 신뢰와 책임이 따른다는 것은 말할 필요도 없습니다. 암시적으로 신뢰하는 사람들과만 터미널 읽기-쓰기를 공유해야 합니다. 소원해진 전 애인은 아마도 테이블에서 벗어났을 것입니다.

터미널을 읽기 전용으로 안전하게 공유하면 라인의 다른 쪽 끝에 있는 사람이 사용자가 입력하는 내용과 터미널 출력을 실시간으로 볼 수 있지만 해당 터미널에 아무 것도 입력할 수 없도록 제한합니다.

다른 사람이 플래그가 많이 포함된 이상한 명령을 안내하는 대신 터미널에 도착하는 것이 더 빠른 시나리오에 처한 경우 터미널 읽기-쓰기를 공유할 수 있습니다. 이 모드에서는 상대방이 귀하의 터미널에 원격으로 완전히 액세스할 수 있습니다. 친구를 현명하게 선택하십시오.

로컬 호스트 공유

위 영상에서 터미널 명령어는 https://localhost:8080에서 실행되는 사이트 링크로 끝납니다. VS Live Share를 사용하면 해당 로컬 호스트를 공유하여 다른 사람이 자신의 로컬 호스트인 것처럼 액세스할 수 있습니다.

공유 디버그 세션을 실행 중인 경우 참가자가 끝에서 해당 localhost URL에 도달할 때 중단점에 도달하면 두 사람 모두에게 중단됩니다. 더 좋은 점은 모든 TCP 프로세스를 공유할 수 있다는 것입니다. 즉, 데이터베이스나 Redis 캐시와 같은 것을 공유할 수 있습니다. 예를 들어 로컬 Mongo DB 서버를 공유할 수 있습니다. 진지하게! 이것은 더 이상 구성 파일을 변경하거나 공유 데이터베이스를 시작하려고 하지 않음을 의미합니다. 로컬 Mongo DB 인스턴스의 포트를 공유하기만 하면 됩니다.

올바른 파일을 올바른 방법으로 공유

공동 작업자가 특정 파일을 보는 것을 원하지 않는 경우가 있습니다. 프로젝트에 소스 제어에 체크인되지 않고 공개 보기에 적합하지 않은 개인 키와 비밀번호가 있을 수 있습니다. 이 경우 Live Share 세션에 참여하는 모든 사람에게 해당 파일을 숨기고 싶을 것입니다.

기본적으로 VS Live Share는 .gitignore 에 지정된 모든 파일을 숨깁니다. 숨기고 싶은 파일이 있으면 .gitignore 에 추가하면 됩니다. 그러나 이것은 프로젝트 보기에서만 파일을 숨깁니다. 공유 디버깅 세션에 있고 .gitignore 에 있는 파일로 들어가면 여전히 편집기에 로드되어 공동 작업자가 볼 수 있습니다.

.vsls.json 파일을 만들어 파일 공유 방법을 보다 세밀하게 제어할 수 있습니다.

예를 들어, .gitignore 에 있는 모든 파일이 디버깅 중에도 표시되지 않도록 하려면 gitignore 속성을 exclude 로 설정할 수 있습니다.

 { "$schema": "https://json.schemastore.org/vsls", "gitignore":"exclude" }

마찬가지로 .gitignore 의 모든 것을 표시하고 .vsls.json 파일에서 직접 파일 가시성을 제어할 수 있습니다. 그렇게 하려면 gitignorenone 으로 설정한 다음 hideFiles excludeFiles 을 사용합니다. 기억하십시오. 제외는 표시되지 않음을 의미하고 숨기기는 "파일 탐색기에 표시되지 않음"을 의미합니다.

 { "$schema": "https://json.schemastore.org/vsls", "gitignore":"none", "excludeFiles":[ "*.env" ], "hideFiles": [ "dist" ] }

공유 및 확장

많은 개발자들에게 VS Code의 매력 중 하나는 대규모 확장 시장입니다. 대부분의 사람들은 몇 개 이상이 설치되어 있을 것입니다. VS Live Share의 맥락에서 확장이 어떻게 작동하는지 또는 작동하지 않는지 이해하는 것이 중요합니다.

VS Live Share는 공유 중인 프로젝트의 컨텍스트와 관련된 모든 것을 동기화합니다. 예를 들어 Vue 프로젝트로 작업하기 때문에 Vetur 확장 프로그램이 설치되어 있는 경우 설치 여부에 관계없이 모든 참가자에게 공유됩니다. 린터, 포맷터, 디버거 및 언어 서비스와 같은 다른 컨텍스트 특정 항목에 대해서도 마찬가지입니다.

VS Live Share는 사용자별 확장을 동기화하지 않습니다. 테마, 아이콘, 키보드 바인딩 등과 같은 것들이 있습니다. 일반적으로 VS Live Share는 화면이 아니라 컨텍스트를 공유합니다. 공유될 것으로 예상되는 확장에 대한 자세한 설명은 이 주제에 대한 공식 문서 문서를 참조하세요.

협업하는 동안 의사 소통

첫 VS Live Share 경험에서 사람들이 가장 먼저 하는 일 중 하나는 코드 주석을 입력하여 의사 소통을 시도하는 것입니다. 이것은 쓰기(알았나요?) 작업처럼 보이지만 실제로 VS Live Share가 사용되도록 설계된 방식은 아닙니다.

VS Live Share는 선택한 채팅 클라이언트를 대체하기 위한 것이 아닙니다. 이미 선호하는 채팅 메커니즘이 있을 수 있으며 VS Live Share는 이를 계속 사용할 것이라고 가정합니다.

이미 Slack을 사용하고 있다면 Slack Chat이라는 VS Code 확장이 있습니다. 이 확장은 아직 개발 초기 단계이지만 매우 유망해 보입니다. VS Code를 분할 모드로 전환하고 오른쪽에 Slack을 포함합니다. 더 좋은 점은 Slack 채팅에서 직접 Live Share 세션을 시작할 수 있다는 것입니다.

대 코드 슬랙 채팅 확장
Slack Chat 확장 프로그램은 Slack을 편집기 내부에 배치합니다(큰 미리보기).

꽤 흥미롭게 보이는 또 다른 도구는 CodeStream입니다.

코드스트림

VS Live Share가 편집기에서 공동 작업을 개선하는 방법을 찾는 동안 CodeStream은 채팅 관점에서 동일한 문제를 해결하는 것을 목표로 합니다.

CodeStream 확장을 사용하면 VS Code 내에서 직접 채팅할 수 있으며 이러한 채팅은 코드 기록의 일부가 됩니다. 토론할 코드 덩어리를 강조 표시할 수 있으며 채팅으로 직접 이동하므로 의견에 대한 컨텍스트가 있습니다. 이 주석은 Git 리포지토리의 일부로 저장됩니다. 또한 코드에 작은 주석 아이콘으로 표시되며 이러한 주석은 사용자가 어느 분기에 있는지에 관계없이 표시됩니다.

VS Live Share와 관련하여 CodeStream은 무료 기능 세트를 제공합니다. 아바타를 클릭하거나 채팅 창에서 직접 새 세션을 시작할 수 있습니다. 새 세션은 코드로 지속하거나 완료되면 폐기할 수 있는 해당 채팅 채널을 자동으로 생성합니다.

채팅만으로는 작업을 완료할 수 없고 1999년처럼 협업해야 하는 경우 전화 한 통이면 도움이 됩니다.

VS 라이브 공유 오디오

VS Live Share는 채팅을 재발명하려고 하지 않지만 전화를 재발명합니다. 거의.

VS Live Share Audio 확장을 사용하면 VS Code 내에서 누군가에게 직접 전화를 걸어 음성 채팅을 할 수 있습니다.

음성 통화 시작 옵션을 보여주는 vs 코드 명령 팔레트
VS Live Share 오디오 확장을 사용하여 VS Code에서 음성 통화 걸기(큰 미리보기)

그러면 상대방이 귀하의 통화에 참여하라는 메시지를 받게 됩니다.

vs 음성 통화에 참여할 것인지 묻는 코드 알림
VS Code는 진행 중인 음성 통화에 참여할 것인지 묻습니다(큰 미리 보기).

통화에 연결되면 하단 상태 표시줄에 스피커 아이콘이 표시됩니다. 해당 스피커를 클릭하여 오디오 장치를 변경하거나 자신을 음소거하거나 통화를 끊을 수 있습니다.

라이브 공유 오디오 확장에 대한 음소거 및 연결 끊기와 같은 옵션을 보여주는 코드 옵션
VS Live Share 오디오 통화 중일 때 오디오 설정을 완전히 제어할 수 있습니다(큰 미리 보기).

마지막으로 알려드릴 팁은 아마도 가장 중요할 것이며, 존재하는지 몰랐던 멋진 기능이나 모호한 설정이 아닙니다.

근육 기억을 바꾸세요

우리는 도움을 받거나 코드를 공유하는 것과 관련하여 수년간 학습된 행동을 가지고 있습니다. 개발자 협업 도구의 상태가 너무 오래되어서 Slack에 코드를 붙여넣거나 "내 화면을 볼 수 있을 때 나에게 알려주세요"로 구성된 어색한 Skype 통화를 시작하거나 모니터 주변에 군중이 모여 있습니다. 지나치게, 즉 스톡 사진 스타일.

컴퓨터 화면을 가리키는 사람들의 그룹
(큰 미리보기)

VS Live Share를 최대한 활용하기 위해 할 수 있는 가장 중요한 것은 실제로 VS Live Share를 사용하는 것입니다. 그리고 그것은 "의식적인" 노력이 필요합니다.

당신의 두뇌는 패턴에 능숙합니다. 당신은 당신이 식별한 패턴을 기반으로 주변 세계를 지속적으로 인식하고 분류하고 있으며, 당신은 그것에 너무 능숙해서, 당신이 그것을 하고 있다는 것조차 깨닫지 못합니다. 그런 다음 이러한 패턴에 대한 기본 응답을 개발합니다. 당신은 본능을 형성합니다. 이것이 당신이 하고 있는 일에 대해 생각조차 하지 않고 기존의 협업 방식을 기본으로 하는 이유입니다. Live Share가 설치되어 있더라도 화면을 공유하는 누군가와 Skype 통화를 하게 됩니다.

저는 VS Code에 대해 많은 글을 썼고 사람들은 때때로 저에게 어떻게 하면 편집기로 생산성을 높일 수 있는지 묻습니다. 저는 항상 같은 말을 합니다. 다음에 마우스가 무언가를 하려고 손을 뻗으면 멈추십시오. 대신 키보드로 할 수 있습니까? 당신은 아마 할 수 있습니다. 바로 가기를 찾은 다음 직접 사용하십시오. 처음에는 속도가 느려지지만 의도적으로 다른 행동을 취하려는 경우 두뇌가 작업을 수행하는 더 생산적인 방법으로 기본 설정되어 있는 속도에 놀랄 것입니다.

라이브 공유도 마찬가지입니다. Live Share를 사용할 수 있다는 생각이 들면 화면을 공유하는 통화를 하게 됩니다. 그 순간, 멈추십시오. VS Code 하단의 "공유" 버튼을 클릭합니다.

예, 상대방이 확장 프로그램을 설치하지 않았을 수 있습니다. 예, 설정하는 데 시간이 걸릴 수 있습니다. 그러나 지금 이 행동을 확립하는 작업을 하고 있다면 다음에 이것을 하려고 할 때 "그냥 작동"할 것이고 머지 않아 그것에 대해 생각할 필요조차 없을 것입니다. 그 시점에서 당신은 마침내 "익명의 하마" 수준의 협업을 달성할 수 있을 것입니다.

추가 리소스

  • VS Live Share 확장 팩
  • VS Code 라이브 공유 문서
  • 확장 및 생태계 지원
  • VS Live Share 시작하기