Markdownを書くために必須のVSCode拡張機能10選【ブログ書くにも便利】

はじめに

こんにちは、こふです。Markdown を書くために必須の拡張機能を 10 個まとめて紹介します。紹介する拡張機能を使うと、書くことの効率化・書いた内容の最適化が可能になり、本来の自分が集中したいことに専念しやすくなります。このブログを書く上でも使っていますよ〜

1. Paste Image

ストア画像

画像の貼り付けを効率化するための拡張機能です。

使う場合と使わない場合の差はこんなにも大きいのです。

通常のマークダウンでの画像貼り付け
- 画像を保存する
- 配置したい場所に移動させる（mvまたはドラッグ＆ドロップ）
- マークダウンファイルで画像のディレクトリ・ファイル名を指定
Paste Image を使った画像貼り付け
- 画像の上で右クリックして画像をコピー
- Cmd + Opt/Alt + vで貼り付け（任意に割り当て可能）

はい、天と地の差があります。コピーした画像をパス・ディレクトリを指定して貼り付けることができるので、どんなプロジェクトにも対応可能です。通常なら面倒な 3 ステップかかりますが、ワンタップで終わるのです。

補足ですが、外部の画像サーバーに画像を持つなら不要ですね。URL を直接指定すれば OK だから。設定方法は話すと長いので、別の記事で紹介します。

拡張機能 URL：Paste Image - Visual Studio Marketplace

2. markdownlint

ストア画像

リンター（Linter）とフォーマッター（Formatter）はセットで使うのが慣例です。

というのも、書いたマークダウンを整形し、それが文法・書き方の点で問題がないかを、プログラムによって判断してもらうのが正しいからです。

（当然、ルールは決まっているので自分の目で確認しても良いかもしれないが、ヒューマンエラーが発生するためおすすめできない。チーム開発の観点からも。）

そのため、Prettier をセットで使うのをおすすめします。VSCode にも対応しています。VScode 版 Prettier はこちら。

これでファイルを保存した際に、自動で整形・解析が走るため、問題箇所にすぐさま気づくことができます。

拡張機能 URL：markdownlint - Visual Studio Marketplace

よく Markdownlint に指摘されるミス

画像の Alt 属性忘れ
見出しに同じ文章を使う

ちなみに、以下の 2 つはユーザー設定で無効化

自分の Markdownlint の設定

以下のルールを無効化しています。

MD027 no-multiple-space-blockquote - Multiple spaces after blockquote symbol
MD028 no-blanks-blockquote - Blank line inside blockquote

これらは引用ブロック（Blockquote）のルールですが、改行を上手に与えるような設定には不適切な Lint ルールでした。

"markdownlint.config": {
        "MD027": false,
        "MD028": false
    },

3. Markdown All in One

ストア画像

なんでも入った拡張機能で、とりあえず入れて損はないです。

入れるとできることは以下の通りです。

マークダウンのためのキーボードショートカット
目次の作成
箇条書き（順番の箇条書きも）を書きやすく
表のフォーマット
数学的記法（Latex の利用）の補助
補完
- 画像ファイルのパス
- リンクの定義
URL コピー状態で選択・貼り付けするとマークダウンのリンクに（[表示](URL)）
さまざまなコマンドの利用

日常的に Markdown を書く・書かない関係なく、とりあえず入れてみましょう。

拡張機能 URL：Markdown All in One - Visual Studio Marketplace

4. Markdown Preview Enhanced

ストア画像

これは任意で入れる拡張機能とも言えます。最低限のプレビューなら、標準機能で対応できます。しかし、この拡張機能では目次の表示やズームも可能。

目次を表示した様子

ただのプレビューではなく、気が利くプレビューができます。

拡張機能 URL：Markdown Preview Enhanced - Visual Studio Marketplace

5. emojisense

ストア画像

本ブログの記事ごとのアイコン画像、文中に絵文字を使っています。

ただ、絵文字の入力って面倒なんですよね。Slack・MatterMost などのチャットツールであれば:emoji name:で絵文字が入力できます。

しかし、VSCode だと標準では付属しませんので、拡張機能を入れる必要があります。

実際に使った様子はこちら、英単語の推測は必要ですが、非常に便利です。

emojisense を使った様子

使い方は、:コロンを入力するか、Cmd/Ctrl + iです。

拡張機能 URL：:emojisense: - Visual Studio Marketplace

6.Markdown PDF - Visual Studio Marketplace

ストア画像

マークダウンファイルをエクスポートするための拡張機能です。

出力形式は以下の通りです。

PDF
HTML
PNG
JPEG

使う場面としては、拡大してもボケることのない PDF・スマホでも楽にみられる PNG・JPEG の画像として出力です。

markdown-itで使う構文や、UML 図、Mermaid にも対応しており、単なるマークダウンだけに対応、というわけではありません。

settings.jsonの設定ファイルから、背景の変更、ヘッダー・フッターの設定も可能なので、自分好みに使えます。

拡張機能 URL：Markdown PDF - Visual Studio Marketplace

7. Markdown Preview Mermaid Support

![][attachments/2022-06-21-22-22-48.png)

拡張機能を入れる前は以下のようなプレビューになります。

![][attachments/2022-06-21-22-20-36.png)

しかし、拡張機能をインストールすると、このようにプレビューできます（使ったプレビュー機能は VSCode 標準です）

![][attachments/2022-06-21-22-19-55.png)

当然ですが、Mermaid 記法を使っても、表示に対応するサービスを使わなければ表示されませんので、注意ですね。

拡張機能 URL：Markdown Preview Mermaid Support

8. Mermaid Markdown Syntax Highlighting

エディタ上では通常、ハイライトはつきません。（Markdown All in One を使っていてもです）

![][attachments/2022-06-21-22-23-24.png)

しかし、拡張機能を入れると以下のようになります。

書いていて間違いがあるかも分かりやすくなり、便利だと感じています。

![][attachments/2022-06-21-22-24-58.png)

拡張機能 URL：Mermaid Markdown Syntax Highlighting

9.Markdown Shortcuts

![][attachments/2022-06-21-22-32-43.png)

追加でショートカットを割り当てられますが、正直やりすぎです。消しました。

拡張機能 URL：Markdown Shortcuts - Visual Studio Marketplace

10.vscode-textlint

![][attachments/2022-06-21-22-35-00.png)

マークダウン限定ではないですが、マークダウンを書く＝人に伝える文章を書く、ことだと思います。

その文章の形式・語句の使い方などのルールを統一させたいときに必須の拡張機能です。

拡張機能 URL：vscode-textlint - Visual Studio Marketplace

+他にも紹介

今後、見つけたら更新します。

1 つでも取り入れてみて欲しいです。