vscode.dev(!)

Name: Visual Studio Code
Author: Microsoft

2021년 10월 20일, Chris Dias, @chrisdias 작성

2019년 .dev 최상위 도메인이 개방되었을 때, 저희는 vscode.dev를 구입하여 웹사이트 code.visualstudio.com으로 바로 연결했습니다 (제가 사는 보스턴 지역처럼 "pahked it"이라고 하죠). 많은 .dev 도메인 구매자들처럼, 저희도 이 도메인으로 무엇을 할지 전혀 몰랐습니다. 그리고 10년 이상 이어져 온 비전을 실현하게 될 줄은 상상도 못 했습니다.

VS Code를 브라우저로 가져오기

오늘날, https://vscode.dev로 접속하시면 브라우저에서 완전히 실행되는 VS Code의 경량 버전을 볼 수 있습니다. 로컬 폴더를 열고 코딩을 시작할 수 있습니다.

설치 불필요.

vscode.dev를 통해 브라우저에서 완전히 서버리스로 실행되는 개발 도구를 만들겠다는 원래 비전을 마침내 실현하게 되었습니다. 자세한 내용은 Erich Gamma의 VS Code Day 강연 "VS Code: 10년이 걸린 하룻밤의 성공"을 확인해 보세요.

그렇다면 웹용 VS Code에서 무엇을 할 수 있을까요? 꽤 많습니다…

클라우드 도구를 사용한 로컬 개발

File System Access API(File System Access API)를 지원하는 최신 브라우저(현재 Edge 및 Chrome)는 웹 페이지가 (사용자 허가를 받아) 로컬 파일 시스템에 액세스하도록 허용합니다. 로컬 머신에 대한 이 간단한 게이트웨이는 VS Code for the Web을 제로 설치 로컬 개발 도구로 사용하는 흥미로운 시나리오를 빠르게 열어줍니다. 예를 들어:

로컬 파일 보기 및 편집. Markdown으로 빠르게 메모하고 미리 볼 수 있습니다. 전체 VS Code를 설치할 수 없는 제한된 컴퓨터를 사용하더라도 vscode.dev를 사용하여 로컬 파일을 보고 편집할 수 있습니다.
브라우저 디버깅 도구와 함께 클라이언트 측 HTML, JavaScript, CSS 애플리케이션을 빌드합니다.
VS Code를 (쉽게) 설치할 수 없는 Chromebook과 같이 성능이 낮은 기기에서 코드를 편집합니다 (참고).
iPad에서 개발하세요. 파일을 업로드/다운로드하고 (파일 앱을 사용하여 클라우드에 저장할 수도 있습니다), 내장된 GitHub Repositories 확장을 사용하여 원격으로 리포지토리를 열 수 있습니다.

그리고 로컬 파일 시스템 API를 지원하지 않는 브라우저를 사용하는 경우에도 파일을 업로드 및 다운로드하여 개별 파일을 열 수 있습니다.

Local File System Access is Unsupported message dialog

더 가벼운 경험

웹용 VS Code는 브라우저 내에서 완전히 실행되므로 데스크톱 앱에서 가능한 것과 비교할 때 일부 경험은 자연스럽게 더 제한될 수 있습니다. 예를 들어, 터미널과 디버거는 사용할 수 없습니다. 브라우저 샌드박스 내에서 Rust 또는 Go 애플리케이션을 컴파일, 실행 및 디버그할 수 없기 때문입니다 (물론 Pyodide 및 웹 컨테이너와 같은 신흥 기술이 언젠가는 이를 변경할 수도 있습니다).

더 미묘한 점은 코드 편집, 탐색 및 브라우징 경험입니다. 데스크톱에서는 일반적으로 파일 시스템, 런타임 및 컴퓨팅 환경을 예상하는 언어 서비스 및 컴파일러에 의해 구동됩니다. 브라우저에서는 이러한 경험이 브라우저 내에서 완전히 실행되는 언어 서비스(파일 시스템, 런타임 없음)에 의해 구동되어 소스 코드 토큰화 및 구문 강조, 완성, 그리고 많은 단일 파일 작업을 제공합니다.

결과적으로 브라우저 내에서의 경험은 일반적으로 다음과 같은 범주로 나뉩니다.

좋음: 대부분의 프로그래밍 언어에 대해 vscode.dev는 코드 구문 강조, 텍스트 기반 완성 및 괄호 쌍 색상 지정을 제공합니다. Tree-sitter 구문 트리를 사용하여 C/C++, C#, Java, PHP, Rust 및 Go와 같은 인기 있는 언어에 대해 개요/기호로 이동 및 이름으로 기호 열기와 같은 추가 경험을 제공할 수 있습니다.

더 좋음: TypeScript, JavaScript 및 Python 경험은 모두 브라우저에서 네이티브로 실행되는 언어 서비스에 의해 구동됩니다. 이러한 프로그래밍 언어를 사용하면 "좋음" 경험에 더해 풍부한 단일 파일 완성, 의미론적 강조, 구문 오류 등을 얻을 수 있습니다.

최고: JSON, HTML, CSS, LESS와 같은 많은 "웹 관련" 언어의 경우 vscode.dev에서의 코딩 경험은 데스크톱과 거의 동일합니다 (Markdown 미리 보기 포함!).

확장

테마, 키맵, 스니펫과 같은 대부분의 UI 사용자 정의 확장은 vscode.dev에서도 작동하며, 설정 동기화를 통해 브라우저, 데스크톱 및 GitHub Codespaces 간에 로밍을 활성화할 수도 있습니다.

OS별 모듈을 사용하거나 로컬 실행 파일로 셸을 호출하는 Node.js 코드를 실행하는 확장은 검색 결과에 여전히 표시되지만, 사용할 수 없다는 표시가 명확하게 붙습니다.

Notification that extension is not available in Visual Studio Code for the Web

그렇긴 하지만, 브라우저에서 작동하도록 업데이트된 확장이 점점 늘어나고 있으며 매일 더 많은 확장이 추가되고 있습니다.

참고: 확장 프로그램 작성자이고 브라우저에서 확장 프로그램(저희도 그렇게 하고 싶습니다!)을 사용하고 싶다면 웹 확장 작성 가이드를 확인하세요.

예를 들어, Luna Paint - Image Editor 확장을 사용하면 VS Code에서 직접 래스터 이미지를 편집할 수 있습니다. 이 확장은 VS Code에 풍부한 디자인 도구(예: 레이어 및 혼합 도구)를 제공하며, 당연히 이미지를 로컬 디스크에 저장할 수 있습니다.

GitHub Issue Notebooks 확장은 Notebook 경험을 GitHub Issues에 제공합니다. 이를 통해 쿼리, 결과, 그리고 쿼리의 목적을 설명하는 Markdown까지 하나의 편집기에서 조합할 수 있습니다.

GitHub

GitHub에 저장된 소스 코드와 함께 작동하는 VS Code 확장이 많이 있습니다. 예를 들어, CodeTour 확장을 사용하면 코드베이스에 대한 안내 워크스루를 만들 수 있으며, WikiLens 확장은 VS Code와 리포지토리를 강력한 메모 도구(양방향 링크 포함)로 바꿔줍니다. GitHub의 코드에 쉽게 액세스할 수 있도록 웹용 VS Code에는 GitHub Repositories, Codespaces, Pull Request 확장 프로그램이 내장되어 있습니다. 빠른 편집, PR 검토, 그리고 더 강력한 언어 경험이 필요하거나 병합하기 전에 변경 사항을 빌드, 실행 및 테스트해야 하는 경우 로컬 복제본 또는 더 나은 GitHub Codespace로 이동할 수 있습니다.

Continue on dropdown showing Clone Repository Locally or Create New Codespace

와우, github.dev와 매우 비슷하지 않나요? 둘은 다른가요? 같은가요? 왜 두 개씩이나 있나요?

좋은 질문입니다! github.dev는 GitHub에 깊숙이 통합된 웹용 VS Code의 사용자 정의 인스턴스입니다. 로그인은 자동으로 이루어지며, URL 형식은 github.com의 /organization/repo 모델을 따르므로 단순히 .com을 .dev로 변경하여 리포지토리를 편집할 수 있으며, 라이트 및 다크 테마로 GitHub에 맞게 사용자 정의되었습니다.

GitHub의 리포지토리 외에도 웹용 VS Code는 Azure Repos(Azure DevOps의 일부)를 지원합니다. 두 가지 모두 사용하려면 웹용 VS Code는 vscode.dev/github와 vscode.dev/azurerepos 두 가지 경로를 지원합니다. 하지만 기억할 필요는 없습니다. 단순히 URL 앞에 "vscode.dev"를 붙이면 됩니다.

예를 들어, https://github.com/microsoft/vscode를 'https://vscode.dev/github.com/Microsoft/vscode'로 변경하세요.

Azure Repos의 경우에도 마찬가지입니다. https://dev.azure.com/…를 'https://vscode.dev/dev.azure.com /…'으로 변경하세요.

현재 Azure Repos 지원은 리포지토리 읽기 모드에서 미리 보기 상태이지만, 가능한 한 빨리 완전한 읽기/쓰기 기능을 제공하기 위해 노력하고 있습니다.

GitHub나 Azure DevOps를 사용하지 않는 경우, 데스크톱과 마찬가지로 확장을 통해 추가 리포지토리 호스팅 서비스를 지원할 수 있습니다. 위에서 언급했듯이 해당 확장은 브라우저에서 완전히 실행될 수 있도록 지원해야 합니다.

URL에 대해 말하자면…

데스크톱에서와 마찬가지로, 거의 모든 백엔드, 언어 및 서비스를 지원하는 풍부한 확장 생태계를 통해 웹용 VS Code를 사용자 정의할 수 있습니다. 데스크톱과 달리, 고유한 vscode.dev URL(앞서 언급한 vscode.dev/github 및 vscode.dev/azurerepos와 같은)을 통해 미리 설치된 확장 프로그램으로 사용자 정의된 환경을 쉽게 제공할 수 있습니다.

예를 들어, https://vscode.dev/theme/sdras.night-owl로 접속해 보세요.

여기서 인기 있는 Night Owl 색상 테마를 @sarah_edo가 만든 것을 다운로드 및 설치 과정 없이 "실시간"으로 경험해 볼 수 있습니다. 설치가 필요 없습니다! 테마 작성자라면 Marketplace에서 직접 테마를 미리 볼 수 있도록 README.md에 배지를 만들 수도 있습니다 (자세한 내용은 웹용 VS Code 사용자 가이드 참조).

이 URL을 사용하여 좋아하는 테마를 친구들과 공유하세요. 개인적으로 @wesbos의 Cobalt2 테마를 아주 좋아합니다. https://vscode.dev/theme/wesbos.theme-cobalt2를 확인해 보세요. 참고로 theme URL은 선언적인 테마(코드가 없는 테마)에만 적용됩니다.

보시다시피 vscode.dev URL은 새롭고 가벼운 경험을 제공하는 강력한 방법입니다. 또 다른 예는 https://vscode.dev/liveshare URL을 통해 브라우저에서 Live Share 게스트 세션을 사용할 수 있다는 것입니다. sessionId는 확장 프로그램에 전달되어 원활한 참여 경험을 제공합니다.

vscode.dev URL의 가능성은 무궁무진하며, 앞으로 몇 달 안에 여러분과 공유할 흥미로운 아이디어가 많이 있습니다.

앞으로 나아갈 방향?

VS Code를 브라우저로 가져오는 것은 제품의 원래 비전을 실현하는 것입니다. 또한 완전히 새로운 비전의 시작이기도 합니다. 브라우저와 인터넷 연결만 있으면 누구나 액세스할 수 있는 일시적인 편집기는 어디서든 무엇이든 편집할 수 있는 미래의 기반이 됩니다.

계속 지켜봐 주세요… 😉

행복한 코딩 되세요,

Chris

추신: 혹시 놓치셨다면, 웹용 VS Code 라이브 스트림을 시청하실 수 있습니다.