Tech 効率化 開発ツール

【VSNotes】vscodeを使って画像付きのメモを取り、gitで管理する

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フォルダの中に保存されていきます。

もちろんこんな感じでプレビューも可能です。

直近の推し5選!

1

みなさんこんばんは。 こんにちは、Kanon です。今回は… しめさば先生の『君は僕の後悔』の感想記事です。 しめさば先生はこれまでにも『ひげを剃る。そして女子高生を拾う』や『きみは本当に僕の天使なの ...

2

リンク あらすじ 人生オール80点。 そんな俺が託されたのは、元トップアイドル・香澄ミルの世話だった。 ファン対応がしみつきなかなかクラスに馴染めないミル。 そんな彼女に頼られるうち、俺たちは図らずも ...

3

リンク 二丸先生の他の作品はこちら あらすじ 記憶喪失の湖西廻の前に現れたのは、清純で素朴な美少女、丹沢白雪。 「──私、廻くんと恋人だったの」  白雪はそう言って顔を赤らめ、廻の頬にキスをする。   ...

4

リンク あらすじ その夜、僕の青春は〈炎〉とともに産声をあげた――  スマホを忘れて夜の学校に忍び込んだ在原有葉(ありはらあるは)は、屋上を照らす奇妙な光に気づく。そこで出会ったのは、闇夜の中で燃え上 ...

5

こんにちは、Kanon です。今回は… しめさば先生の『きみは本当に僕の天使なのか』の感想記事です。 表紙とタイトルを見るに幻想的な恋の話のように思えるのですが、実はタイトルはそんな幻のようなものでは ...

-Tech, 効率化, 開発ツール