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を使ってるのでこうした。 ※ESCCtrl+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 ウェブストア