はじめに
こんにちは WESEEK でわりと何でもやっている haruhikonyan です。
皆さんは日々 GitHub 使ってますでしょうか？仕事では GitHub やその他を使っている方でもエンジニアであれば GitHub でコードを見たりすることはあると思います。
しかしなかなかコードの全文検索がうまくいかなかったり、見たいだけなので clone するまでもなくちょっとした作業とかをしたいこともあるあるなんじゃないかなと思います。
そんな時には clone せずとも VSCode とほぼ同じ使用感でコードを参照できる GitHub のモードです。
同僚で知らなかった人がいたので便利さを簡単に紹介してみようと思います。
起動方法
起動する方法は大きく二つあります。あたりまえですがどちらも共通して開きたい GitHub 上のリポジトリをブラウザで開いておく必要があります。
. を押す
これが間違いなく一番楽ですね。ほんと . をただ押すだけでブラウザ上に VSCode が展開されます。
URL の .com を .dev に切り替える
これもわかりやすさでは一番かと思います。URLを自分で書き換えリロードするとエディタになります。
便利ポイント
全文検索
VSCode と同じで ctrl(command) + shift + f もしくは左側の虫眼鏡ボタンを押すと出てくる検索ボックスをクリックします。
素の Github にある左上の検索ボックスよりはるかに楽で精度も高く、利用頻度ナンバー1なんじゃないかなと思います。
もちろん検索対象はリポジトリのコードのみなので、issue や wiki などの内容を検索したい場合は素の Github の検索ボックスを使いましょう。
ファイル検索
こちらも VSCode と同じく ctrl(command) + p にて開かれる検索ボックスから指定します。
目的のファイル名さえわかっていればエクスプローラーを辿らずにすぐ開いたり検索することができます。
ファイル参照共有
コードを参照して有益な情報などを得たら共有したくなるのは常です。
しかしブラウザ版 VSCode で開いているタブは URL とは連動していないのでそのまま URL コピペではだめなので以下手順を踏みましょう。
ファイルの URL を取得したい場合
- エクスプローラーの特定のファイルもしくは、開いているファイルのタブを右クリック
- Copy Github (Head Link|Permalink) どちらかを選択
ファイルの特定の行数を取得したい場合
- 特定の行数もしくは複数行数をドラッグして右クリック
- 形式を指定してコピー > Copy Github (Head Link|Permalink) どちらかを選択
いずれの方法も VSCode の URL がコピーされるので、通常の Github のファイルへのリンクが欲しい場合は URL の .dev を .com に変更しましょう。
他にもいろいろ
- 拡張機能が入ったり
- 各種 git 操作ができたり
- コードが実行できたり
一旦はコードが簡単に参照できるだけで超便利なんでこの辺の詳細は割愛させていただきます。
詳しくは公式ドキュメントを参照しましょう。
おまけ
実は GitLab でもそのままエディタが開ける
GitLab 利用者に朗報です。(自分も一応利用者)
GitLab でも . を押すことで VSCode ライクなエディタがブラウザで使えます。
Web IDE と呼ばれてるようです。
しかしファイル検索はできますが、いつも使ってるような全文検索は現状無いようです。
https://docs.gitlab.com/ee/user/project/web_ide/ 詳しくは公式ドキュメントを参照しましょう。
終わりに
OSS のコードとかパッといつも使ってる VSCode と同じ使用感で見たいときには超便利！
