Use VSCode to view and commit changes on GitHub repos, in your browser. Inspired by github1s.
Change github
to github-vsc
in the URL and press Enter.
E.g. github.com/gao-sun/eul
-> github-vsc.com/gao-sun/eul
- Available for private repos
Cmd + P
(quick navigation) support- Global text search support (on the default branch)
- Document editing with GitHub commits (fork/commit/pull request)
Since there're some huge repos containing thousands of folders/files (imagine someone uploaded node_modules/
), it'll significantly increase the responding time if we fetch all the files from GitHub API. Thus GitHub VSC will only search current folder when you are typing in the Cmd + P
panel.
Say the repo has the structure of foo/a/file1
and foo/b/file2
:
- When you typed
foo/
it will show the result as the combination offoo/a
andfoo/b
. - When you typed
foo/a/
it will show a single resultfoo/a/file1
.
Quote from GitHub docs:
Due to the complexity of searching code, there are a few restrictions on how searches are performed:
- Only the default branch is considered. In most cases, this will be the
master
branch.- Only files smaller than 384 KB are searchable.
Also, the global text search result has NO pagination yet. (It always shows page 1)
GitHub VSC contains only static assets and it's hosted by GitHub Pages. The deployment is in github-vsc-website.
Powered by the Code - OSS project, and use the tag 1.53.2
for building. Would like not to do any modifications to keep it clean, but here comes to the result (I've tried hard, trust me):
src/vs/code/browser/workbench/workbench.ts
for simple workbench and several htmlwindow
related commands.src/vs/code/browser/workbench/one_dark.ts
for One Dark theme.src/vs/workbench/browser/parts/activitybar/activitybarActions.extended.ts
for an extended command to set the index of active side bar. (They just have go prev/next for now, interesting)src/vs/workbench/contrib/welcome/page/browser/vs_code_welcome_page.ts
for customized welcome page.
Heads to extensions/github-vsc
, and 2 webpack configs will be shown:
webpack.extension.js
andextension/
for extension itself which runs in awebworker
environment.webpack.web.js
andcontrol-panel/
for the control panel web view which using React / SASS modules.d.ts/
andtypes/
include shared type definitions.
Make sure you are prepared for the same prerequisites as Code - OSS.
# in ./
# install deps
yarn
# clone and build Code - OSS
yarn build-vsc
# happy hacking on localhost:8080
yarn dev
Heavily inspired by github1s, edited vscode compiling part from vscode-web, and derivated FileSystem implementation from vscode-web-playground.
Also exported the beautiful One Dark theme from vscode-theme-onedark.