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",
VScodeでMarkdownを書こう
導入Extension
- Markdown Preview Enhanced
- 表示系や外部ツールのインターフェースに利用
- Markdown All in One
- ショートカット、入力補助等、Markdownの記載の利便性向上に利用
Markdown Preview Enhanced
- Preview で利用するCSSが変更:markdown-preview-enhanced.previewTheme
カスタムCSSで見出しをカスタム
- コマンドパレットでカスタマイズCSS
使い方
- プレビューする
- 目次をつける ※プレビュー出しながら出ないと動かない?
- 目次の作成:
markdown-preview-enhanced.createTOC
<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->
が挿入される- depthFrom、depthToで見出しの深さを調整
- orderdListで章番号を付与。ただし、見出し側にはつかない
- 上書き保存すると、目次が作成される
- 目次除外:見出しの最後に、
{ignore=true}
を付与
- 目次の作成:
- htmlに変換する
- pdfに変換する
Markdown All in One
- プレビューを無効にする
- 使い方
- 目次をつける ※深さの設定が、ファイルごとにできない。見出しに章番号をつけたい場合はこちら。
- 目次の作成:
markdown.extension.toc.create
- 目次の更新:上書き保存 or
markdown.extension.toc.update
- 目次除外:見出しの最後に
<!-- omit in toc -->
を付与 - 見出しの深さ:
markdown.extension.toc.levels
- 見出しへの章番号の付与/削除:
markdown.extension.toc.addSecNumbers
、markdown.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
- 画像をMarkDownに張り付ける
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_memo
、vsnote_template_mtg
とする。("vsnote_template_"は固定で、以降がテンプレート名になる) - 作成したテンプレートを "vsnotes.templates" で設定
- memo用をデフォルトのテンプレートに指定
- memo用、mtg用テンプレートを作成
使い方
[F1]キー=>ウィンドウ
で[VSNote : Create a New Note]
を選択- テンプレートを選択(省略した場合、デフォルトのテンプレートになる)
- ファイル名を入力(省略した場合、New_Noteになる)
Paste Image
- 保存先を設定
ファイル名を設定
- デフォルトのファイル名は、日時だけなので、対象ファイル名をプレフィックスに追加。"pasteImage.namePrefix"
使い方
- 貼り付けたい画像をコピー
- 張りたい場所に
Ctrl+Alt+V
Setting
- setting.json
"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
と打てば、保管される
- "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
- done.txt に移動:
- 補足情報をつける
- todo.txt に補足情報をMarkdonwで記載する。
- 補足情報部分を選択し、
todotxt-mode.createTaskNote
を実行し、補足情報を記載したMarkdonwファイルを作成 - 補足情報をつけたいタスクに、貼り付ける
Setting
- plaintext.json
"task": { "prefix": "task", "body": [ "(${1:A}) ${2:task} due:${CURRENT_YEAR}-${CURRENT_MONTH}-${3:$CURRENT_DATE}" ] }