VSCodeの拡張機能「GIST」が便利すぎてHackMDを使うのをやめた

メモやドキュメント作成、Qiita投稿の下書きなどにずっとHackMDを利用していたのですが、VSCodeでGitHubGistと連携できる「GIST」という拡張機能を知り、使ってみたらものすごく便利でHackMDを利用する頻度が激減しました。

Visual Studio Code でGitHub Gistを使ってみた
https://gist.github.com/nuovotaka/7bfb8130e0be8b3dae83

kenhowardpdx/vscode-gist: vscode extension for quick gists
https://github.com/kenhowardpdx/vscode-gist
<img width="1027" alt="拡張機能__Gist_と_Overview_-_HackMD-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/ce201313-9632-d4d4-351a-b37e5fc4a0ba.png">


GitHubGistについては下記が参考になります。

Gistsでソースや文書をシェアする - Qiita
https://qiita.com/hkusu/items/18cbe582abb9d3172019


HackMDもリアルタイムプレビューや共同編集ができて素敵です。

機能紹介 - HackMD
https://hackmd.io/s/4JbKDCN1hx

HackMDってMarkdownEditorが革新的で使いやすい - Qiita
https://qiita.com/norinity1103/items/85aa990dbe6582b6d701


## 利用方法

### 拡張機能のインストール

VSCodeの拡張機能 MARKETPLACEから`gist` で検索したらヒットするのでインストールしましょう。
<img width="1022" alt="スクリーンショット 2019-02-26 14.51.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/5864d543-bdc7-36f5-d1c8-260161f2408c.png">

### GitHubGistのプロファイル作成

拡張機能をインストールしたらVSCodeのコマンドパレットから`GIST: Select Profile` を選択します。
プロファイルがないと登録するためのダイアログがでてくるので、GitHubのpersonal access tokenを入力して登録します。
<img width="1022" alt="拡張機能__Gist_と_Overview_-_HackMD.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/48f7f7c9-680a-fc38-8685-838b0ca41cb8.png">

personal access tokenについては下記が参考になります。

GitHub「Personal access tokens」の設定方法 - Qiita
https://qiita.com/kz800/items/497ec70bff3e555dacd0

GitHubアカウントが複数ある場合、プロファイルが追加できます。GitHub Enterpriseにも対応しているのがありがたいです。GitHub Enterpriseの場合、APIのエンドポイントを指定する必要があるので、`http(s)://[hostname]/api/v3` の形式で指定します。末尾に`/` をつけるとアクセスできないのでご注意ください。
<img width="1024" alt="スクリーンショット 2019-02-26 14.36.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/ebf9bdb6-b154-9011-b4fa-2df617087b22.png">


### Gistの取得・編集

プロファイルが登録できたら、Gistのリスト表示や新規作成・編集ができるようになります。

VSCodeのコマンドパレッドをみたらできることがだいたいわかると思います。詳細は公式のREADMEをご参考ください。

kenhowardpdx/vscode-gist: vscode extension for quick gists
https://github.com/kenhowardpdx/vscode-gist


Gistの新規作成・編集・削除など、ひととおりのことが、VSCodeで完結して操作できます。
`Ctrl` + `s` でGitHubGist上のファイルが更新されるので、ローカルのファイルと同じ感覚で編集できます。便利すぎます。

VSCodeでテキストをしたためて、コマンドパレッドで`GIST: Create New Gist` を選択します。
<img width="1028" alt="スクリーンショット 2019-02-26 15.00.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/a6418f8b-2292-7103-6e9d-08c9428814e3.png">

ファイル名で拡張子を指定し忘れるとサイトでしか修正できないのでご注意ください。
<img width="1027" alt="スクリーンショット 2019-02-26 15.00.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/2421d643-b02d-c8d4-2325-9f51be5c24ca.png">

概要やPublic/Private指定するとGitHubGistと連携してGistが作成されます。
<img width="1024" alt="スクリーンショット 2019-02-26 15.01.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/8a72d3f6-787f-2f5f-6a3c-b57588c80319.png">
<img width="1025" alt="スクリーンショット 2019-02-26 15.01.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/061efb35-9032-3bf9-6cb1-280391bf099d.png">
<img width="1023" alt="スクリーンショット 2019-02-26 15.01.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/bb3650d4-c062-4a59-9796-7b9d30ceb3f4.png">
<img width="1040" alt="スクリーンショット 2019-02-26 15.02.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/9afacfbb-15d0-6d18-1e90-e7ab66cc227d.png">


## 参考

kenhowardpdx/vscode-gist: vscode extension for quick gists
https://github.com/kenhowardpdx/vscode-gist

Gistsでソースや文書をシェアする - Qiita
https://qiita.com/hkusu/items/18cbe582abb9d3172019

機能紹介 - HackMD
https://hackmd.io/s/4JbKDCN1hx

HackMDってMarkdownEditorが革新的で使いやすい - Qiita
https://qiita.com/norinity1103/items/85aa990dbe6582b6d701

GitHub「Personal access tokens」の設定方法 - Qiita
https://qiita.com/kz800/items/497ec70bff3e555dacd0