VScodeを使いこなそう

VScodeの拡張等、自分用のメモ

  • [未記載] プレゼン資料作り(Marp for VS Code
  • [未記載] 図表を書く(Draw.io Integration)

VSCodeの基本設定

導入Extension

Common

  • 日本語フォントを等幅にする。(BIZ UDゴシック):editor.fontFamily
  • ファイル保存時に、行末のスペース削除:files.trimTrailingWhitespace

GitHub Theme

  • ダーク系のテーマを選択:workbench.colorTheme

Material Icon Theme

  • アイコンを表示:workbench.iconTheme

Setting

setting.json

    "editor.fontFamily": "'BIZ UDゴシック', Consolas, 'Courier New', monospace",
    "files.trimTrailingWhitespace": true,
    "workbench.colorTheme": "GitHub Dark Default",
    "workbench.iconTheme": "material-icon-theme",

VScodeMarkdownを書こう

導入Extension

  • Markdown Preview Enhanced
    • 表示系や外部ツールのインターフェースに利用
  • Markdown All in One
    • ショートカット、入力補助等、Markdownの記載の利便性向上に利用

Markdown Preview Enhanced

  • Preview で利用するCSSが変更:markdown-preview-enhanced.previewTheme
  • カスタムCSSで見出しをカスタム

    • コマンドパレットでカスタマイズCSS
  • 使い方

    • プレビューする
    • 目次をつける ※プレビュー出しながら出ないと動かない?
      1. 目次の作成:markdown-preview-enhanced.createTOC
        1. <!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->が挿入される
        2. depthFrom、depthToで見出しの深さを調整
        3. orderdListで章番号を付与。ただし、見出し側にはつかない
        4. 上書き保存すると、目次が作成される
      2. 目次除外:見出しの最後に、{ignore=true} を付与
    • htmlに変換する
    • pdfに変換する

Markdown All in One

  • プレビューを無効にする
  • 使い方
    • 目次をつける ※深さの設定が、ファイルごとにできない。見出しに章番号をつけたい場合はこちら。
      1. 目次の作成:markdown.extension.toc.create
      2. 目次の更新:上書き保存 or markdown.extension.toc.update
      3. 目次除外:見出しの最後に <!-- omit in toc --> を付与
      4. 見出しの深さ:markdown.extension.toc.levels
      5. 見出しへの章番号の付与/削除:markdown.extension.toc.addSecNumbersmarkdown.extension.toc.removeSecNumbers

Setting

setting.json

    "markdown-preview-enhanced.previewTheme": "github-light.css",

style.less

.markdown-preview.markdown-preview {
  // modify your style here
  // eg: background-color: blue;
  h1 {
    padding-bottom: .1em;
    border-bottom: 1px solid #ccc;
  }
  h1:first-letter {
    margin-right: .1em;
    font-size: 1.5em;
  }

  h2 {
    position: relative;
    padding: .25em 0 .5em .75em;
    border-left: 6px solid #3498db;
  }
  h2::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    width: 100%;
    height: 0;
    border-bottom: 1px solid #ccc;
  }

  h3 {
    background: linear-gradient(transparent 70%, #a7d6ff 70%);
  }

  h4 {
    border-bottom: solid 3px #cce4ff;
    position: relative;
  }
  h4:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 3px #5472cd;
    bottom: -3px;
    width: 20%;
  }

  h5 {
    border-bottom: solid 3px black;
  }

}

VScodeでメモを取ろう(VSNotes,Paste Image)

導入Extension

  • VSNotes
    • メモ用拡張
  • Paste Image

VSnote

  • 保存先を設定
    • [F1] -> [VSNotes:Run setup] でフォルダを指定、もしくは、"vsnotes.defaultNotePath"を直接記載
  • ファイル名を設定
    • デフォルトのまま利用
      • "vsnotes.defaultNoteTitle": "{dt}_{title}.{ext}"
      • {dt}:YYYY-MM-DD_HH-mm、{title}:<作成時に指定した名前>、{ext}:md
      • タイトルにスペースが含まれる場合は、"_"に変換
  • テンプレートを設定

    • memo用、mtg用テンプレートを作成
      • [Code]> [基本設定] > [ユーザースニペット] で、markdown.json [Markdown] を選択
      • テンプレート名をvsnote_template_memovsnote_template_mtgとする。("vsnote_template_"は固定で、以降がテンプレート名になる)
      • 作成したテンプレートを "vsnotes.templates" で設定
      • memo用をデフォルトのテンプレートに指定
  • 使い方

    1. [F1]キー=>ウィンドウ[VSNote : Create a New Note] を選択
    2. テンプレートを選択(省略した場合、デフォルトのテンプレートになる)
    3. ファイル名を入力(省略した場合、New_Noteになる)

Paste Image

  • 保存先を設定
    • デフォルトは、ファイルと同じディレクトリなので、imgフォルダ配下に変更。"pasteImage.path"
    • 一階層下げたので、パスのプレフィックスに"./"を追加。"pasteImage.prefix"
  • ファイル名を設定

    • デフォルトのファイル名は、日時だけなので、対象ファイル名をプレフィックスに追加。"pasteImage.namePrefix"
  • 使い方

    1. 貼り付けたい画像をコピー
    2. 張りたい場所に Ctrl+Alt+V

Setting

    "vsnotes.defaultNotePath": "c:\\Users\\XXXXXX\\Documents\\vsnotes",
    "vsnotes.noteTitleConvertSpaces": "_",
    "vsnotes.defaultNoteTitle": "{dt}_{title}.{ext}",
    "vsnotes.tokens": [
        {
            "type": "datetime",
            "token": "{dt}",
            "format": "YYYY-MM-DD_HH-mm",
            "description": "Insert formatted datetime."
        },
        {
            "type": "title",
            "token": "{title}",
            "description": "Insert note title from input box.",
            "format": "Untitled"
        },
        {
            "type": "extension",
            "token": "{ext}",
            "description": "Insert file vsnotes.",
            "format": "md"
        }
    ],
    "vsnotes.templates": [
        "memo",
        "mtg"
    ],
    "vsnotes.defaultSnippet": {
        "langId": "markdown",
        "name": "memo"
    },
    "pasteImage.path": "${currentFileDir}/img",
    "pasteImage.prefix": "./",
    "pasteImage.namePrefix": "${currentFileNameWithoutExt}_"
   "vsnote_template_memo": {
        "prefix": "vsnote_template_memo",
        "body": [
            "---",
            "title: $TM_FILENAME_BASE",
            "date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
            "tags:",
            "\t- memo$1",
            "---",
            "",
            "# $2",
            "",
            "$3",
     ],
        "description": "Memo Template",
 },
    "vsnote_template_mtg": {
        "prefix": "vsnote_template_mtg",
        "body": [
            "---",
            "title: $TM_FILENAME_BASE",
            "date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
            "tags:",
            "\t- mtg$1",
            "---",
            "",
            "# $TM_FILENAME_BASE",
            "",
            "* date&time: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $2 - $3 @ $4",
            "* Attendees: $5",
            "",
            "## Agenda",
            "",
            "* $6",
            "",
            "## Notes",
            "",
     ],
        "description": "MTG Template",
 }

TODO管理に使おう(todotxt-mode)

導入Extension

  • todotxt-mode
    • todo.txtを便利にする

todotxt-mode

  • タスク登録用のスニペットを作る
    • [Code]> [基本設定] > [ユーザースニペット] で、plaintext [Plain Text] を選択
  • todo.txtとは
    • プレーンテキスト1ファイルでタスク管理するために整備されたフォーマット
    • x (A) YYYY-MM-DD task +project @context due:YYYY-MM-DD
      • x:完了フラグ
      • (A):優先度
      • YYYY-MM-DD:完了日
      • task:タスクの説明
      • +project:プロジェクトタグ(任意)
      • @context:コンテキストタグ(任意)
      • due:YYYY-MM-DD:期日
      • https://github.com/todotxt/todo.txt
  • 使い方
    • todo.txtファイルを作成し、vscodeで開く
    • todoを登録
      • "task" でスニペット登録しているので、 task と打てば、保管される
    • タスクが完了したら、完了日を入れて、完了フラグを立てる
      • ctrl+shift+x
    • 優先度を変える
      • 優先度を上げる:ctrl+shift+a
      • 優先度を下げる:ctrl+shift+z
    • タスクをソート
      • 期日でソート:todotxt-mode.sortByDueDate
      • プロジェクトでソート:todotxt-mode.sortByProject
      • 優先度でソート:todotxt-mode.sortByPriority
    • 完了タスクをDoneファイルに移動
      • done.txt に移動:todotxt-mode.archiveTasks
      • todo.txt に戻す:todotxt-mode.moveTasksToTodo
    • 補足情報をつける
      • todo.txt に補足情報をMarkdonwで記載する。
      • 補足情報部分を選択し、todotxt-mode.createTaskNote を実行し、補足情報を記載したMarkdonwファイルを作成
      • 補足情報をつけたいタスクに、貼り付ける

Setting

   "task": {
        "prefix": "task",
        "body": [
            "(${1:A}) ${2:task} due:${CURRENT_YEAR}-${CURRENT_MONTH}-${3:$CURRENT_DATE}"
        ]
    }