TL;DR
- 何か開発をしながら調べたことを画像付きメモしたい。
- コードを書いた時はgithubに草を生やせるけど、調べてまとめた内容を書く時はNotionやらEvernoteだから草が生えない。
- vscodeだけを開いてメモを取りたい
この悩み、vscodeに2つの拡張機能を入れるだけで解決します。
VSNotes

ノートの作成
VSNotesをインストール後、VSNotesで作成するノートの保存先を拡張機能の設定から指定します。

そして、実際に保存先フォルダを作成してあげる必要があります。
Macの場合で、上記画像の場所を指定しているのであれば、ターミナルを開いてこのコマンドを叩くだけです。
mkdir ~/Note
あとはコマンドパレットを起動し、VSNotes: Create a New Noteですぐノートを作成できます。
マークダウンでガリガリ書いていけて、プレビューも楽々です。

バージョン管理
先に作成した、~/Noteの直下でgit initしてリポジトリにpushするだけです。
すると、別のフォルダを開いて作業しながらVSNotesでノートを作成し、ノートに書いた内容をgithubへpushできるようになります。

Paste Image

Markdownファイルに直接画像を貼り付けることができます。
画像の保存先の設定
しかし、変なところに画像を保存されると困るので、VSNotesのフォルダの中に画像を保存していくように設定します。
拡張機能の設定を開いて、ここを以下のように変更します。

${currentFileDir}/images/${currentFileNameWithoutExt}
あとはMacの場合だとcommand + option + vで貼り付けて、貼り付けた画像は編集中のファイルの保存パスのimagesフォルダの中に保存されていきます。
もちろんこんな感じでプレビューも可能です。
