VS Code의 개발자인 Chris Dias는 오늘 (미국 시간 기준 2021/10/20) Visual Studio Code 공식 블로그를 통해 VS Code의 웹버전 서비스인 https://vscode.dev/을 공개했습니다.

브라우저를 통해 https://vscode.dev/ 주소로 접속 시 별도의 설치 없이 VS Code의 경량화된 버전을 실행할 수 있으며, File System Access API를 지원하는 브라우저(현재 Chrome/Edge)의 경우 로컬의 폴더를 열어 바로 수정할 수 있습니다. 아직 File System Access API를 지원하지 않는 브라우저의 경우 수동으로 파일을 업로드/다운로드해 사용하거나 원격 Git Repository를 열어 사용할 수 있습니다.

Chris Dias가 밝힌 vscode.dev의 사용 예시는 아래와 같습니다.

• 로컬의 파일을 보고 수정. Markdown으로 빠르게 메모를 작성하고 미리 보기. VS Code를 설치할 수 없는 제한된 기기에서도 vscode.dev를 통해 로컬 파일을 보고 수정할 수도 있습니다.
• 클라이언트 사이드의 HTML, JavaScript, CSS를 개발하고, 브라우저 도구를 사용해 디버깅
• 크롬북과 같은 VS Code를 쉽게 설치할 수 없는 저사양 단말에서 코드 수정
• 아이패드에서 개발하기. 파일을 업로드하고 다운로드 해서 수정할 수 있고 (Files 앱을 통해 클라우드에 저장도 가능합니다) 또는 내장된 GitHub 플러그인 등을 사용해 원격 Git Repository도 작업할 수 있습니다.

플러그인의 경우 대부분의 테마, Key Map, Snippet 등의 UI 커스터마이징 플러그인은 전부 작동하며, Settings Sync를 사용해 로컬의 VS Code와 설정을 동기화 하는 것도 가능합니다. OS에 종속적인 모듈이나 로컬 실행 파일을 사용하는 Node.js 코드를 포함하는 플러그인은 검색 결과에는 표시되나 작동하지 않습니다.

고유한 vscode.dev URL을 사용하면 더 맞춤화된 환경 제공도 가능합니다. 예를 들어 https://github.com/microsoft/vscode 주소를 https://vscode.dev/github.com/Microsoft/vscode 주소로 바꾸어 GitHub Repo를 불러올 수 있고, https://dev.azure.com/… 주소를 https://vscode.dev/dev.azure.com/… 주소로 바꾸어 Azure Repos를 사용할 수도 있습니다.

그리고 https://vscode.dev/theme/sdras.night-owl 주소로 들어가면 위의 사진처럼 @sarah_edo의 Night Owl 테마가 적용됩니다.

이제 VS Code의 코드 협업 기능인 Live Share를 웹에서 사용할 수 있습니다. Guest session 생성 시 vscode.dev 주소가 같이 생성되며, 참여자는 VS Code를 설치하지 않고도 협업에 참여할 수 있습니다.