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

May 28, 2019

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 のアイコンが表示されます。 01
  6. アイコンを選択すると VSNotes のエクスプローラが表示されます。 02 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 です。

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

    ---
    tags:
      - meeting-notes
    ---
    
    # レベル1
    ## レベル2
    Markdown 形式で書く

    03

設定変更

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

ファイル名のデフォルトは、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. 次の内容を追記して、保存します。
"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になります。

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

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

---
tags:
  * meeting-notes
---

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

手順

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

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

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

    "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. 次の内容を追記し、保存します。

      "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 に指定すれば複数のテンプレート登録が可能です。