Back to blog
Jun 21, 2022
3 min read

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

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 つでも取り入れてみて欲しいです。