[DevTools] 웹에서 VSCode 사용하기 - github.dev / github1s

웹에서 레포지토리를 살펴보다가 코드를 좀 더 편하게 들여다보고 싶을 때 github1s 서비스를 이용해서 웹 기반 VSCode 환경으로 볼 수 있다. github1s를 사용하려면 github 도메인 뒤에 1s를 붙여서 github1s.com/... 주소로 이동해야 한다. 보통은 주소를 변경해주는 자바스크립트 코드를 즐겨찾기에 추가해 두고 사용한다.

javascript: window.location.href = window.location.href.replace(/github(1s)?.com/, function(match, p1) { return p1 ? 'github.com' : 'github1s.com' })

 

그러다 우연히 Github에서 공식으로 제공하는 github.dev라는 서비스를 발견했다. github1s와 거의 유사하지만 본인 계정으로 로그인되어 있는 로컬 VSCode 환경설정과 부가기능을 동기화할 수 있는 장점이 있다. 

 

github.dev를 사용하려면 레포지토리 페이지에서 . 마침표 키를 누르거나, github.com/user/repo 주소의 최상위 도메인 .com을 .dev로 변경하면 된다. 혹은 github1s 처럼 자바스크립트 코드를 즐겨찾기에 추가해 두고 사용할 수도 있다. 

javascript: window.location.href = location.href.replace(/.com/, '.dev')

 

동기화는 좌측 하단 환경설정 아이콘 → Settings Sync... 메뉴를 클릭해서 동기화할 계정을 선택하면 된다. 어떤 항목을 동기화할지 직접 선택할 수도 있다(환경설정, 단축키, 스니펫, 부가기능, UI State).

 

 

만약 광고 차단 서비스인 AdGuard를 사용하면 VSCode 환경설정 동기화가 안되므로 github.dev 주소를 사용자 규칙에 추가해야 한다.

@@||github.dev^$important,document

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요