VSCode で Markdown を書くときに便利な拡張機能

今回のブログでは、VSCode で Markdown を書くために導入している Extension をご紹介します。

ブログを書くときは、はてなブログに直接 Markdown 形式で書き込み、図についてはアップロードしたりコピペしています。 一方で、Markdown でメモを取る場合や、ある程度まとまったドキュメントを書いてファイルにする場合にはこれらの Extension が非常に役に立つと考えます。

1. Paste Image : 図のコピペをするために導入
2. Markdown PDF : 鉄板の Markdown to PDF 変換
3. vscode-textlint : 文章校正用 Extension

1. Paste Image

はてなブログや他のブログサイトだとクリップボードから貼り付けができるのに対して、VSCode で Markdown 書く際に画像をいちいち保存してパスをコピーして ![](/xxxx/yyyy.png) みたいなタグを書かなければいけません。

この煩わしさを解消してくれるのが Paste Image という Extension です。

画像をクリップボードにコピー (例えば Windows であればWin+Shift+S) した後、VSCode 側で Ctrl+Alt+V をおします。

これだけでクリップボードにある画像が作業中のフォルダに保存され、画像が挿入されます。

※ファイル名は設定で変更可能で、デフォルトではyyyy-mm-dd-HH-mm-ss.png

超便利！

2. Markdown PDF

鉄板の Markdown to PDF 変換です。

PDF にする際には改ページの位置なども気になりますが、下記のようなコードを挿入しておくことで、 Markdown PDF 側でも改ページをしてくれます。

<div style="page-break-before:always"></div>

また、設定ファイルの中でヘッダーやフッターの指定も可能なので、これだけでもかなりきれいな PDF を生成できます。

設定ファイルの書き方、可能なオプションについては Extension のページを参照いただくのが最もまとまっていると思います。

※日本語の Readme も Github に用意されています。

vscode-markdown-pdf/README.ja.md at master · yzane/vscode-markdown-pdf · GitHub

3. vscode-textlint

最近話題の(?) 文章校正 Extension です。

Node.js が事前にインストールされている必要がありますが、多くのブログで導入方法が紹介されていますので、それほど導入の手間・ハードルは高くないかなと思います。

textlint と VS Code で始める文章校正 - Qiita

この校正ツールのいいところは、様々なルールが公開されている点です。例えば『全角文字と半角文字の間には半角スペースを入れたい』とか『技術用語を加味してほしい』などの場合にルールを npm でインストール、設定ファイルに追加するだけで校正の仕様を変更できます。

なお、私は preset-ja-technical-writing, textlint-rule-preset-ja-spacing の２つのルールを追加しています。

{
  "filters": {},
  "rules": {
    "preset-ja-technical-writing": true,
    "preset-ja-spacing": {
      "ja-space-between-half-and-full-width": {
            "space": "always"
        }
    }
  }
}

Markdown の保存時にこんな感じで怒られます。

終わり

ブログ目的だけであればわざわざ VSCode に追加するまでもありませんが、メモを Markdown で書いたり、まとまったドキュメントを書く際には非常に有効です。

いずれの Extension も設定ファイルで自分の好みに変更できるので、ぜひ試してみてください。