Visual Studio Code 拡張 VSNotes でメモをとる

Visual Studio Code のメモ帳用拡張機能である VSNotes が便利です。

VSNotes を使うと便利になること

  • 左メニューに常時「VS Notes」のアイコンが表示され、メモへすぐにアクセスできる。
  • タグを打つことができ、タグ検索ができる。
  • ファイル名の付け方ルールを設定できる。
  • VSCode Snipet を使うと、テンプレートを利用してファイルを作成できる。

必要なもの

  • Visual Studio Code

初期設定

VSNotes のインストール

  1. Visual Studio Code で拡張機能のメニューを開きます。
  2. 検索窓に「VSNotes」と検索して、VSNotes をインストールします。

メモの保存先の設定

  1. Shift + Ctr(Command) + P でコマンドパレットを開き、「vsnotes run」と入力します。
  2. 「VSNotes: Run setup」が補完されるので、Enter キーで確定します。右下にダイアログが表示されます。
  3. [start] ボタンをクリックします。ファイルダイアログが表示されます。
  4. メモファイルを保存したいルートディレクトリを指定します。Dropbox などのネットワークディレクトリも設定できます。
  5. VS Code を再起動します。左メニューに VSNote のアイコンが表示されます。
  6. アイコンを選択すると VSNotes のエクスプローラが表示されます。
    VSNotes を使ってメモを作成すると、先ほど指定したディレクトリにファイルが保存され、VSNotes のエクスプローラにファイルがツリー表示されます。

VSNotes の使い方

  1. Shift + Ctr(Command) + P でコマンドパレットを開き、「vsnote create」と入力します。

  2. 「VSNotes: Creat a New Note」と補完されるので、Enter キーで確定します。

  3. ファイル名の入力を求められるので入力します。ファイル拡張子は不要です。

  4. 初期状態では、次の内容でメモファイルが作成されます。ファイル名は yyyy-MM-dd_HH-mm_3.でつけた名前.md です。

    1
    2
    3
    4
    5
    
    ---
    tags:
      -
    ---
    
    
  5. tag の部分に * タグ名 を指定すると、VSNotes のエクスプローラにタグが表示され、同じタグがついたファイルにアクセスできます。反映されないときは更新マークをクリックします。

    1
    2
    3
    4
    5
    6
    7
    8
    
    ---
    tags:
      - meeting-notes
    ---
    
    # レベル1
    ## レベル2
    Markdown 形式で書く
    

設定変更

デフォルトのファイル名の変更

ファイル名のデフォルトは、yyyy-MM-dd_HH-mm_パレットで指定した名前.md です。これを yyyy-MM-dd パレットで指定した名前.mdに変更します。

手順

  1. Shift + Ctr(Command) + P でコマンドパレットを開き、「setting」と入力します。「Preferences: Open User Settings」と補完されるので、Enter キーで確定します。
  2. 設定右上の「{}」マークをクリックし、setting.json を開きます。
  3. 次の内容を追記して、保存します。
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    
    "vsnotes.noteTitleConvertSpaces": " ",
    "vsnotes.defaultNoteTitle": "{dt} {title}.{ext}",
    "vsnotes.tokens": [
      {
        "type": "datetime",
        "token": "{dt}",
        "format": "YYYY-MM-DD",
        "description": "Insert formatted datetime."
      },
      {
        "type": "title",
        "token": "{title}",
        "description": "Insert note title from input box.",
        "format": "Untitled"
      },
      {
        "type": "extension",
        "token": "{ext}",
        "description": "Insert file extension.",
        "format": "md"
      }
    ],

これで、コマンドパレットから「VSNotes: Creat a New Note」したときに生成されるファイル名が「yyyy-MM-dd パレットで指定した名前.mdになります。

ファイルのテンプレートの変更

ファイルを生成したときのテンプレートを作成します。 今回、議事録テンプレートとして、次の内容のテンプレートを作成します。

1
2
3
4
5
6
7
---
tags:
  * meeting-notes
---

# yyyy-MM-dd パレットで指定した名前
## 

手順

  1. [Code]> [基本設定] > [ユーザースニペット] を選択します。

  2. 検索窓に [Markdown] と入力します。markdown.json [Markdown] と補完されるので、Enter キーで確定します。

  3. { ... } 内に、次の内容を追記して保存します。

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    
        "vsnote_template_mtg": {
          "prefix": "vsnote_template_mtg",
          "body": [
            "---",
            "tags:",
            "\t* meeting-notes",
            "---",
            "\n# $TM_FILENAME_BASE\n",
            "$1",
          ],
          "description": "Meeting Template",
        }

    • テンプレート名にあたるキーは vsnote_template_ から始まる必要があります(2019/09/25 追記)
  4. Shift + Ctr(Command) + P でコマンドパレットを開き、「setting」と入力します。「Preferences: Open User Settings」と補完されるので、Enter キーで確定します。

  5. 設定右上の「{}」マークをクリックし、setting.json を開きます。

  6. 次の内容を追記し、保存します。

    1
    2
    3
    
        "vsnotes.templates": [
          "mtg",
        ],

動作確認

コマンドパレットから「VSNotes: Creat a New Note」したとき「mtg」が一覧から選べます。選択して Enter キーで確定します。
あとはファイル名を入力すると、スニペットに指定したテンプレートでファイルが作成されます。

補足

  • datetimeformatの書式は、Moment.js のフォーマットに従います。
  • markdown.jsonは VSCode の snippet 機能です。使える変数はCreating your own snippets * Variables を参照のこと。
  • 同じように markdown.json にスニペットを定義して settings.jsonvsnotes.templates に指定すれば複数のテンプレート登録が可能です。