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

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

[![Image from Gyazo](https://i.gyazo.com/2a6e7396cf8c4020e17c774b6ef8d34c.gif)](https://gyazo.com/2a6e7396cf8c4020e17c774b6ef8d34c)


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

https://marketplace.visualstudio.com/items?itemName=kenhowardpdx.vscode-gist

# 導入手順

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

### 1. `GitHub Gist`の登録


https://gist.github.com/

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

https://github.com/settings/tokens/new

`Expiration`を`No expiration`に設定します。

![スクリーンショット 2023-11-11 12.46.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/c90d2770-2e98-7f26-3a2f-83347291fc08.png)

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

![スクリーンショット 2023-11-11 12.47.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/446b9e6d-5d6f-a97f-342b-887719fa7b86.png)

### 3. 拡張機能のインストール
`VSCode`上で【`Gist`】と検索すると一番上に表示されるのでインストールします。

![スクリーンショット 2023-11-11 12.49.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/8d886ea4-b221-aa44-6ecd-440b503f13d9.png)

### 4. アクセストークンの設定
任意のファイル上で`Shift` + `Command`+ `P`で`Command Palette`が開きます。

`GIST: Select Profile`を選択します。

![スクリーンショット 2023-11-11 13.09.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/e641e1ac-44af-6cbf-1cc0-119e831393d1.png)

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

![スクリーンショット 2023-11-11 13.10.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/2fff0ad9-d782-06fa-586b-a84e119e4459.png)

`GitHub.com(common)`を選択します。
![スクリーンショット 2023-11-11 13.10.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/fc1ee303-1129-b04a-1dc5-a04bc7459306.png)

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


![スクリーンショット 2023-11-11 13.10.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/650eca0b-a38d-7092-73c2-ea5d83acd60a.png)

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

![スクリーンショット 2023-11-11 13.11.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/b9f1324d-5f41-1607-cd0a-2ede1ededfb3.png)

![スクリーンショット 2023-11-11 13.11.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/d84da71b-b61c-652e-95f4-92a2af430bd1.png)


# 基本的な使い方
### ファイルの作成
保存したいファイル上で`Shift` + `Command`+ `P`で`Command Palette`を開きます。
`GIST: Create New Gist` を選択します。

![スクリーンショット 2023-11-11 13.20.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/81115e3e-8f03-6d4f-b77b-b00d5754a812.png)


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


![スクリーンショット 2023-11-11 13.22.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/d13d6559-e61d-b0b4-fff1-9c59bc54ef3c.png)
![スクリーンショット 2023-11-11 13.22.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/44dbb320-2b53-8383-34c7-8f6be6613aff.png)

![スクリーンショット 2023-11-11 13.22.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/32411805-6ca9-22c0-c7e0-95c189426065.png)

![スクリーンショット 2023-11-11 13.22.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/546c9226-eab2-58a3-9b3f-a6919b162a58.png)

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

![スクリーンショット 2023-11-11 13.26.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/0059ae22-c7ae-6a89-4db5-a1f81027359c.png)

### ファイルの編集

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

![スクリーンショット 2023-11-11 13.30.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/192efe62-ffe0-8381-dd61-66b070cccd1e.png)

![スクリーンショット 2023-11-11 13.30.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/63f232a2-c4bc-a16d-3c84-d9cfd9783a37.png)

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

![スクリーンショット 2023-11-11 13.31.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/a8333dce-67e0-0458-a8a8-335d6d31a5c9.png)

![スクリーンショット 2023-11-11 13.32.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/425bf5c7-c3e7-5c6f-2723-f5f8f4aa28d3.png)


### ファイルの削除

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

![スクリーンショット 2023-11-11 13.35.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/72d90d4b-e134-00b8-fbf0-d139794482a9.png)

![スクリーンショット 2023-11-11 13.35.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/04e45895-52aa-ca5b-e737-cbc19993fd09.png)


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



![スクリーンショット 2023-11-11 13.36.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/400c58c7-5cce-5420-5d96-b58e28941d23.png)


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

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