通常のマークダウンでの画像貼り付け
- 画像を保存する
- 配置したい場所に移動させる（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 の設定

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


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

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

.vscode/settings.json
1"markdownlint.config": {
2        "MD027": false,
3        "MD028": false
4    },

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

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

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

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

拡張機能 URL：Markdown Preview Mermaid Support

8. Mermaid Markdown Syntax Highlighting

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

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

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

拡張機能 URL：Mermaid Markdown Syntax Highlighting

9.Markdown Shortcuts

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

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

10.vscode-textlint

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

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

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

+他にも紹介

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

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