Markdown環境を構築したときのメモ

📅 August 12, 2019

MarkdownでTODO管理するのがよさげだという噂を聞いたので始めたい。これを機にVSCodeで環境構築がんばってみようと思い、その時のメモです。

前提

Windows10。エディタはVSCodeでVimキーバインドを使用。後述のIME制御でAutoHotKeyも使います。

VSCode Extension

Prettier

もともとJS用にPrettierのextention入れてたけど、どうやらMarkdownにも対応している模様。素晴らしい！ …ただし、フォーマット時にローマ字と日本語の間に謎の半角スペースが発生するため、ソースを修正。

if (lastNode && lastNode.type === "word") {
  if (
    (lastNode.kind === KIND_NON_CJK &&
      node.kind === KIND_CJ_LETTER &&
      !lastNode.hasTrailingPunctuation) ||
    (lastNode.kind === KIND_CJ_LETTER &&
      node.kind === KIND_NON_CJK &&
      !node.hasLeadingPunctuation)
  ) {
    nodes.push({
      type: "whitespace",
      value: ""

valueの値を修正

-   value: " "
+   value: ""

参考：PrettierでMarkdownをフォーマットしたときの英語と日本語の間に入るスペースをどうにかする - Qiita

Markdown All in One

どの参考サイトみても、とりあえず入れとけレベルの拡張機能。リスト次行追加時の自動補完機能がとてもエロい。いろいろ高機能ぽいけど、それ以外はいまのところあまり恩恵を受けるに至ってません。

参考：Markdown All in One - Visual Studio Marketplace

Markdown Preview Enhanced

とりあえず入れとけ二つ目。できることがたくさん増える。下の記事が詳しい。ヘッダ付きテーブル挿入コマンドがシンプルで便利なので使ってる。

参考：Visual Studio Code + Markdown Preview Enhancedはチームでデファクト化したいMarkdown環境だ！、と思う (2017/10月時点) - Qiita

Markdown Checkbox

チェックボックスをコマンド一撃で作ってくれる。切替もコマンド一撃。切替はさっきのMarkdown All in Oneでもできるぽいけど、こちらは切り替え＋打消し線＋打ち消した日付までご丁寧に入れてくれる仕様。完全にTODO向けで最高なので導入。こんな感じ。

* [ ] 会社を辞める
* [X] ~~*会社を辞める*~~ [2019-08-08]

会社を辞める
~~会社を辞める~~ [2019-08-08]

参考：Markdown Checkbox - Visual Studio Marketplace

Shortcuts

スニペット

とりあえず思い付いたやついろいろ追加予定。

prefix	挿入文
`C`	code記法(デフォルトでjavascript)
`K`	キー入力

  "code": {
    "prefix": "c",
    "body": ["```${1:javascript}", "$2", " ```"]
  },
  "kbd": {
    "prefix": "k",
    "body": ["<kbd>$1</kbd>"]
  },

キーバインド

TODOを書く上でチェックボックスの操作は極めて重要なので、なるべくvimのカーソル移動と同じキーに設定した。

キーバインド	コマンド
`Ctrl` + `K`	チェックボックスの作成
`Ctrl` + `J`	チェックボックスの切替
`Ctrl` + `T`	ヘッダ付きテーブルの作成

  {
    "key": "ctrl+k",
    "command": "markdown-checkbox.createCheckbox",
    "when": "editorLangId == markdown"
  },
  {
    "key": "ctrl+j",
    "command": "markdown-checkbox.markCheckbox",
    "when": "editorLangId == markdown"
  },
  {
    "key": "ctrl+t",
    "command": "markdown-preview-enhanced.insertTable",
    "when": "editorLangId == markdown"
  }

whenのeditorLangIdに言語を指定することで、その言語でしか機能しないキーバインドを書くことができる。

その他

Vimでノーマルモード復帰時にIMEをOFFにする

Markdownに限ったことではないけど。タイトル通りです。この設定でかなり手間とストレスが軽減される。 AutoHotKey経由でWin32 api叩いて取得したIMEの状態を使う。復帰するとき自分はESCの代わりにCtrl+Cを使ってるのでこうした。 ※ESCとCtrl+Cの挙動は微妙に違うぽいけど、あまり気にしたことない。。

    #IfWinActive, Ahk_exe Code.exe
    ~^c::
        DetectHiddenWindows, ON
        WinGet, vcurrentwindow, ID, A
        vgetdefault := DllCall("imm32.dll\ImmGetDefaultIMEWnd", "Uint", vcurrentwindow)
        vimestate   := DllCall("user32.dll\SendMessageA", "UInt", vgetdefault, "UInt", 0x0283, "Int", 0x0005, "Int", 0)
        DetectHiddenWindows, Off

        If (vimestate!=0) {
            Send, {vkf3}
        }
    return
    return

参考：IMEの状態をゲット出来るようになるまでのノンプログラマー的冒険(AutoHotkey) - Qiita

Copy as Markdown

Chromeの拡張機能。リンク張るときにタイトルとURLをちまちまコピーするのがつらい。これで下のようなMarkdown形式を一発でコピーできる。ありがて～

[Copy as Markdown - Chrome ウェブストア](https://chrome.google.com/webstore/detail/copy-as-markdown/fkeaekngjflipcockcnpobkpbbfbhmdn)

参考： Copy as Markdown - Chrome ウェブストア

← Prev Post