LoginSignup
393

VSCodeの拡張機能【Gist】が便利すぎて開発効率がかなり上がった話

Posted at

はじめに

突然ですが、よく使うコードはどのように管理していますか?
私はGitHubで管理していたのですが、今回VSCodeの拡張機能Gistを使って見たところ、サクッと参照ができて、かなり使い心地が良かったのでまとめておきます。

Image from Gyazo

Gistとは

VSCode上でGitHub Gistを連携させることができ、手軽にファイルの作成、編集、削除が可能になる拡張機能です。

導入手順

  1. GitHub Gistの登録
  2. GitHub上でアクセストークンの取得
  3. 拡張機能のインストール
  4. アクセストークンの設定

1. GitHub Gistの登録

2. GitHub上でアクセストークンの取得

ExpirationNo expirationに設定します。

スクリーンショット 2023-11-11 12.46.37.png

scopegistを許可して作成です。
トークンが発行されるので控えておきましょう。

スクリーンショット 2023-11-11 12.47.36.png

3. 拡張機能のインストール

VSCode上で【Gist】と検索すると一番上に表示されるのでインストールします。

スクリーンショット 2023-11-11 12.49.28.png

4. アクセストークンの設定

任意のファイル上でShift + Command+ PCommand Paletteが開きます。

GIST: Select Profileを選択します。

スクリーンショット 2023-11-11 13.09.31.png

Create New Profileが出てくるので、こちらを選択します。

スクリーンショット 2023-11-11 13.10.16.png

GitHub.com(common)を選択します。
スクリーンショット 2023-11-11 13.10.23.png

アクセストークンが聞かれるので、先程控えておいたトークンをペーストします。

スクリーンショット 2023-11-11 13.10.33.png

設定したトークンのprofile nameを設定します。任意の名前で大丈夫です。
エディタにGIST【任意の名前】 が表示されていれば設定完了です。

スクリーンショット 2023-11-11 13.11.09.png

スクリーンショット 2023-11-11 13.11.48.png

基本的な使い方

ファイルの作成

保存したいファイル上でShift + Command+ PCommand Paletteを開きます。
GIST: Create New Gist を選択します。

スクリーンショット 2023-11-11 13.20.06.png

ファイル名、説明、公開範囲を設定します。

スクリーンショット 2023-11-11 13.22.00.png
スクリーンショット 2023-11-11 13.22.13.png

スクリーンショット 2023-11-11 13.22.29.png

スクリーンショット 2023-11-11 13.22.38.png

Gist上にファイルが作成できました。

スクリーンショット 2023-11-11 13.26.41.png

ファイルの編集

GIST: Open Gist を選択します。
先ほど作成したファイルが表示されます。

スクリーンショット 2023-11-11 13.30.42.png

スクリーンショット 2023-11-11 13.30.50.png

エディタ上で編集し保存すると、Gist上でも自動的にアップデートされます。
これが結構便利ですね。

スクリーンショット 2023-11-11 13.31.59.png

スクリーンショット 2023-11-11 13.32.15.png

ファイルの削除

GIST: Delete File を選択し、DELETEを入力します。

スクリーンショット 2023-11-11 13.35.13.png

スクリーンショット 2023-11-11 13.35.24.png

一つ手間なのが、完全にファイル削除ではなく、Gist上で削除されたリビジョンが作られます 。その為、完全にファイルを削除するにはGUIでDeleteする必要があります。

スクリーンショット 2023-11-11 13.36.45.png

GitHub Gist上での検索

Gistの検索フォームはユーザ毎でフィルタがかかっていない為、自分のファイル上の検索をするには、user:ユーザ名 検索したいテキストで検索する必要があるので注意してください。(例: user:aaa ruby)

まとめ

GitHub上で管理していたよりもスムーズに参照しやすくなったので開発効率が上がりました!
最後まで読んでいただきありがとうございました!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
393