はんなりと、ゆるやかに

アジャイル、スクラムが好きなITエンジニアが日々から学んだことをアウトプット

ブラウザ上でGitHubのコードを見るときに便利な方法「1s」

cloneするほどではないけど、GitHubのコードを確認したいときに使える便利方法「1s」を知りました。ブラウザ上のGitHubのコードがVisual Studio Code(VSCode)の見た目と操作方法に変わります。しかも、インストール不要。

github.com

操作方法

1.GitHubリポジトリに移動します。
サンプルとしてgitのページに移動してみましょう。

f:id:iucstscui:20210212223325p:plain

2.アドレスをhttps://github1s.com/に変えます。
https://github.com/git/gitgithub.com に「1s」を追加してhttps://github1s.com/git/gitにします。すると、VSCodeの見た目に変わります。
f:id:iucstscui:20210212223712p:plain

メリット

画面左に出るエクスプローラーが便利

GitHubでコードを読んでいるとき、別のコードを見るためにブラウザの戻るボタン使ったり、一度トップページに戻ってからファイルを探したりと不便でしたが、画面左側にEXPLORERが表示されているのでファイルの移動がスムーズです。

ファイルのタブ表示もできる

GitHubでコードを読んでいるとき、コードを開いたまま別のコードを見たいときありますよね。また、そういうときはコードの意味を調べながら読むのでタブが増えすぎて管理できなくなります。
f:id:iucstscui:20210212224553p:plain

「1s」を使うとブラウザのタブとは別にVSCodeのタブとして管理できるので、コードのタブと調べているタブが混ざらず、管理しやすくなります。
f:id:iucstscui:20210212224822p:plain

VSCodeのショートカットも使える

Ctrl+Shift+F で検索できたり、Ctrl + Alt + 矢印 で 画面を分割できたり、コードを読む効率が向上します。

f:id:iucstscui:20210212225958p:plain

まとめ

  • GitHubのアドレスに「1s」をつけるとちょっとしたコードリーディングの速度が向上する
  • インストールが不要で便利