【VS Code＋Markdown】執筆をラクにするオススメ拡張機能10選

文章を書く際には、関連した情報の整理や執筆作業、誤字脱字や分かりづらい文章の修正など、様々な工程が必要になります。しかし、できればこれら一連の作業に手間も時間もかけたくないですよね。

Visual Studio Code (VS Code) の拡張機能を導入すると、修正すべき箇所の自動検出や、Markdownの入力補助などにより、効率的に読みやすい文章を書けるようになります。

この記事では、VS CodeとMarkdownで快適で効率的な執筆環境を実現するために導入するべき、10個の拡張機能をご紹介します。

今回実現する機能は以下のとおりです。

実現する機能	拡張機能
文字数カウント	Markdown Character Count
日本語の単語間移動	Japanese Word Handler
MarkdownをHTMLに変換して印刷	Print
Markdownのマインドマップ表示	markmap
Markdown整形	markdownlint
特定文字のハイライト	Highlight
文章校正	vscode-textlint
Markdownへのカンタン画像貼り付け	Paste Image
Markdown入力補助	Markdown All in One Markdown Shortcuts

なお、プレビュー表示や、アウトライン表示などのVS Code自体でできることは省きます。

VSCodeでのMarkdown執筆にオススメの拡張機能

Markdown Character Count

アクティブなファイルの文字数をカウントする拡張機能です。

Markdownの構文を除いた文字数が知りたかったため、私が開発・公開した拡張機能です。

Markdown Character Count - Visual Studio Marketplace

Extension for Visual Studio Code - Display the number of characters in the active file, excluding markdown syntax

インストールすると、下記のようにアクティブなファイルの文字数が、ステータスバーに表示されます。

文字数は下記のように、テキスト部分のみを数えます。

// '# 'を除いた7文字でカウント 
# header1 

// '- 'を除いた5文字 
- list    

// リンクはテキスト部分のみの10文字
[google](google.com)  

// 画像は0文字
![](hoge.png)         

// テーブルは0文字
Column A | Column B | Column C
---------|----------|---------
 A1 | B1 | C1
 A2 | B2 | C2
 A3 | B3 | C3

VSCodeのオプションを変更することで、下記の項目を変更可能です。

Markdown以外のファイルで文字数表示
Markdown構文を文字数から除外する

なにはなくとも、文章量を把握する上で入れておいて損はないでしょう。

拡張機能は、コマンドラインから下記のコマンドでインストールが可能です。

code --install-extension isobe-h.markdown-character-count

Japanese Word Handler

日本語で単語間のカーソル移動を可能にする拡張機能です。

拡張機能なしでは日本語の単語ごとのカーソル移動Option + 左右キー (Ctrl + 左右キー)ができません。

Markdownに限らず導入しておくとカーソル移動が楽になること間違いなしです。

code --install-extension sgryjp.japanese-word-handler

Print

MarkdownファイルをHTMLに変換して印刷する拡張機能です。

MarkdownファイルをHTMLに変換して印刷する拡張機能。 VS Codeには印刷機能がないため、紙に印刷して校正する際などに活躍してくれます。

読者にスムーズに文章を読んでもらうには、誤字脱字や文法ミスなどを修正する必要があります。紙で校正することで、ディスプレイ上では気づかないようなミスにも気づきやすく、文章全体を俯瞰しやすくなるなどの利点があるため、記事を公開する前に1度は印刷して校正しておくとより良い文章に仕上がります。

なお、似たような拡張機能にMarkdown PDFがあります。 jpegやpngへのエクスポートも対応していますが、都度ダウンロードする必要があります。

code --install-extension sgryjp.japanese-word-handler

markmap

Markdownファイルをヘッダーやリストなどで枝分かれしたマインドマップに出力して表示する拡張機能です。

マインドマップは、アイデアを考えたり、思考の整理などに効果的な表現方法です。文章に関する情報の整理や、文章構造を図示してふかんしたい際に便利です。

マインドマップを表示するには、Markdownファイルを開いた状態でコマンドパレットからOpen as markmapを選択するか、markmapのアイコンをクリックします。

code --install-extension gera2ld.markmap-vscode

markdownlint

Markdownファイルをフォーマット（整形）する拡張機能です。

文章を読みやすくする利点もありますが、書き方によっては意図したとおりにHTMLへ変換されなかったり、textlintで文章の長さを正しく計測されない問題を回避するためにも導入しておくべきでしょう。

Markdownのデフォルトフォーマッターをmarkdownlintに設定するとフォーマットのショートカットキーOption + Shift + F(Shift + Alt + F)で即座にフォーマットできるため、こちらも設定しておきましょう

  "[markdown]": {
    "editor.quickSuggestions": true,
    "editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
  },

ちなみに"editor.quickSuggestions": true,としておくと、Markdownでも入力予測が有効化されるので、好みに応じて設定しておきましょう。

なお、不要なルールは、必要に応じて下記のように無効化できます。

  "markdownlint.config": {
    "MD045": false
  }

code --install-extension davidanson.vscode-markdownlint

Highlight

指定した文字を強調表示する拡張機能です。

文章をわかりづらくしたり、冗長にしてしまう言葉を強調する際に使うのがオススメです。

例えば、接続詞は前の文との関係が明確になりますが、使いすぎると読みづらい文章になってしまいます。逆説を除く接続詞は、意外と削っても問題ない場合が多いです。

指示代名詞（こそあど言葉）なども、文章を短くするのに一役買ってくれますが、使い方によっては分かりづらい文章になってしまいます。

私は下記のように、接続詞と指示代名詞に加えて、全角数字と全角スペースを強調表示させています。

  "highlight.decorations": {
    "rangeBehavior": 3
  },
  "highlight.regexes": { 
    // 指示代名詞
    "(これ|それ|あれ|どれ|こんな|そんな|あんな|どんな|こう|そう|ああ|どう|この|その|あの|どの)": {
      "filterLanguageRegex": "markdown", // /Markdownファイルのみ有効
      "filterFileRegex": "[plot|post].md", // 特定のファイル名のMarkdownファイルのみ強調を有効化
      "decorations": [
        {
          "overviewRulerColor": "#ffcc00",
          "backgroundColor": "#ffcc00",
          "color": "#1f1f1f"
        }
      ]
    },
    // 接続詞
    "(といった|けれど|しかし|そして|したがって|だから|そこで|すると|そうすれば|でも|ところが|かかわらず|また|および|かつ|加えて)": {
      "filterLanguageRegex": "markdown", 
      "filterFileRegex": "[plot|post].md", 
      "decorations": [
        {
          "overviewRulerColor": "pink",
          "backgroundColor": "pink",
          "color": "#1f1f1f"
        }
      ]
    },
    // 全角文字
    "([０-９Ａ-Ｚａ-ｚ　])": {
      "filterLanguageRegex": "markdown", 
      "filterFileRegex": "[plot|post].md",
      "decorations": [
        {
          "overviewRulerColor": "purple",
          "backgroundColor": "purple",
          "color": "#1f1f1f"
        }
      ]
    }
  },
  "highlight.maxMatches": 250 //一致する文字数の上限

code --install-extension fabiospampinato.vscode-highlight

vscode-textlint

textlintをVS Codeで使えるようにした、文章校正用の拡張機能です。

拡張機能のインストールに加え、下記の手順が必要です

Node.js 6.0.0~ のインストール
npm 2.0.0~ のインストール
textlint本体のインストール
textlintルールのインストール
.textlintrcの作成と編集

「めんどくさいなー」と思った方は、textlintをもとに作られたテキスト校正くんを先に使ってみて、効果を実感してから導入を検討するのがオススメです。

テキスト校正くんはtextlintをもとに作成された文章校正用の拡張機能です。textlintに比べると、ルールのカスタマイズの幅は狭いですが、パッケージのインストールや、設定の手間がなく使えるため、支障がなければそのまま採用しても良いでしょう。

texltintを使う場合は、最初に動作要件のNode.jsとnpmのバージョンを確認します。下記コマンドでバージョンが確認できます。

% node -v
v17.3.1
% npm -v
8.3.0

次に、コマンドラインでnpm init -yを実行してpackage.jsonファイルを作成後、textlint本体とルールパッケージをインストールします。

インストールしたルールは.textlintrcで有効化する必要があります。

ルールをカスタマイズする際は、企業などにより公開されているルールプリセットが参考になります。イチから作るのは手間のかかる、表記ゆれ検出用の辞書データも公開されているため、積極的に利用させてもらいましょう。

公開されているtextlintのルールプリセットや辞書は、下記のサイトが参考になります。

公開されているルールプリセットや表記ゆれに使う辞書一覧は、下記のサイトが参考になります。

日本語版textlintのリポジトリや、公開されているルールプリセットなどを参考に、あなた好みの校正環境を構築しましょう。

code --install-extension taichi.vscode-textlint

textlint設定例

参考までに、私がオススメするtextlint設定をご紹介します。導入するtextlintルールは下記のとおりです。

ルール	概要
textlint-rule-preset-ja-technical-writing	技術文書用のルールがセットになったパッケージ
textlint-rule-preset-ja-spacing	スペース関連のルール
textlint-rule-spellcheck-tech-word	技術用語のスペルチェック
textlint-rule-prh	辞書データをもとにした表記ゆれ検出
textlint-rule-preset-icsmedia	表記ゆれ検出用の辞書データ
textlint-filter-rule-comments	コメントでtextlintを無効化するルール

下記のコマンドで、textlint本体とルール、辞書データをインストールします。辞書データはics.mediaのものを利用します。

npm init -y

npm i textlint textlint-rule-preset-ja-spacing textlint-rule-preset-ja-technical-writing textlint-rule-spellcheck-tech-word
textlint-rule-prh
github:ics-creative/textlint-rule-preset-icsmedia
textlint-filter-rule-comments

.textlintrcをプロジェクトのルートに作成して、インストールしたルールを有効化します。

技術文書向けのルールプリセットのtextlint-rule-preset-ja-technical-writingはかなり厳しいため、私の場合は感嘆符(!)と疑問符(?)、弱い表現のルールを無効化しています。

チェックしてほしくないファイルにtextlintのエラーが表示されるのはうっとうしいため、コメントでtextlintを無効にできるようにします。チェックしたくない文章の前にを挿入するとtextlintが無効化されます。

.textlintrcは下記のようになります。

{
  "filters": {
    "comments": true
  },
  "rules": {
    "preset-ja-spacing": true,
    "preset-ja-technical-writing": {
      "no-exclamation-question-mark": false,
      "ja-no-weak-phrase": false
    },
    "spellcheck-tech-word": true,
    "prh": {
      "rulePaths": [
        "node_modules/textlint-rule-preset-icsmedia/dict/prh.yml"
      ]
    }
  }
}

Paste Image

クリップボードに保存した画像を、ショートカットキーCommand + Option + V(Ctrl + Alt + V)を一発でMarkdownファイルに画像を貼り付ける拡張機能です。

Paste Imageを使うことによって下記の手順を省略可できます。

指定パスへの画像保存
保存される画像ファイルの命名
画像貼り付けの構文![](ファイルパス)入力

画面全体は、Control + Command + Shift + 3(Print Screen)、選択した範囲はControl + Command + Shift + 4(Alt + Print Screen)で、クリップボードにコピーできます。

デフォルトでは、貼り付けたファイルと同じディレクトリにY-MM-DD-HH-mm-ss.png形式で保存されますが、保存先のパスやファイル名の形式は変更できます。

  "pasteImage.path": "${currentFileDir}/images/${currentFileNameWithoutExt}",
  "pasteImage.defaultName": "YMMDDHHmmss.png"

code --install-extension mushan.vscode-paste-image

Markdown All in One

Markdown入力を便利にする機能をまとめた定番の拡張機能です。

GitHub Flavored Markdownのサポートや、Markdown用ショートカットの追加、自動プレビュー表示など、Markdownを入力を便利にする機能が満載です。

追加されるショートカットキーは下記のとおりです。

ショートカットキー	コマンド
Ctrl/Cmd + B	太字にする
Ctrl/Cmd + I	イタリック文字にする
Ctrl/Cmd + Shift + ]	見出しレベルを上げる
Ctrl/Cmd + Shift + [	見出しレベルを下げる
Ctrl/Cmd + M	数式入力
Alt/Option + C	チェック切り替え
Ctrl/Cmd + Shift + V	プレビュー表示
Ctrl/Cmd + K V	別ウィンドウでプレビュー表示

https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

ただし、これらのショートカットキーは、一部VS Codeのデフォルトショートカットキーとの重複しています。ショートカットキーを利用する場合は、キーバインドを変更するのがオススメです。コマンドパレットのPreference: keyboard shortcut…から編集できます。

自動プレビューは、settings.jsonで有効にすることで利用できます。

  "markdown.extension.preview.autoShowPreviewToSide": true

code --install-extension yzhang.markdown-all-in-one

Markdown Shortcuts

Markdown All in Oneの不足を補い、より便利なショートカットを追加する拡張機能です。

ヘッダーやテーブルの挿入など、Markdown All in Oneにないショートカットキーが追加されており、リンクつき文字やリストがかんたん生成できるなど、より快適的なMarkdown入力が可能になります。

中でもとくに重宝するのは、入力が面倒なテーブルを瞬時に作成できる機能です。表形式のデータから、ショートカットキー（要キーバインドの設定）で即座にテーブルを生成できるため、テーブルの入力の手間を大幅に削減できるなど、Markdownを使うなら必ず入れておきたい拡張機能です。

追加されるショートカットキーは下記のとおりです。

ショートカットキー	コマンド
ctrl+M ctrl+M	すべてのコマンドを表示する
ctrl+B	太字にする
ctrl+I	イタリック文字にする
	取り消し線
ctrl+L	リンク付き文字にする
ctrl+shift+L	画像挿入
ctrl+M ctrl+C	コードブロック挿入
ctrl+M ctrl+I	インラインコード挿入
ctrl+M ctrl+B	リスト挿入
ctrl+M ctrl+1	番号付きリスト挿入
ctrl+M ctrl+X	チェックボックス挿入
	ヘッダー1挿入
	ヘッダー2挿入
	ヘッダー3挿入
	ヘッダー4挿入
	ヘッダー5挿入
	ヘッダー6挿入
	テーブル挿入
	ヘッダーつきテーブル挿入

https://marketplace.visualstudio.com/items?itemName=mdickin.markdown-shortcuts

ショートカットキーを忘れてしまってもControl + Mの2度押しで、コマンドパレットのMarkdownショートカットを呼び出せるのもうれしいところです。

デフォルトで設定されていないテーブルやヘッダーの挿入などのショートカットキーは、好みのキーを割り当てておきましょう。

code --install-extension mdickin.markdown-shortcuts

オプションの拡張機能

用途や好みによってはオススメできる拡張機能ご紹介します。

図の作成

draw.ioやPlantUMLで作成した図も、Markdownに貼り付けられるので、自作した貼り付けて利用する方にオススメです。

スペルチェック

Code Spell Checker

日本語非対応ですが、英語などの対応言語のスペルチェックができます。技術系の記事など、英語を多用するような記事を書く際にオススメです。

プレゼンテーション資料作成

Marp for VS Code

Markdownでプレゼンテーション資料が作成できます。使い方はこちらの記事が参考になります。

まとめ

ソースコードエディターとして圧倒的な人気を誇るVS Codeですが、拡張機能の導入により、Markdownも快適に書けるようになることがおわかりいただけたと思います。

できるかぎり厳選した拡張機能を紹介しましたが、まだまだ改良点はあるはずなので、「こうした方いいよ」みたいな指摘がありましたら、ぜひコメントなどで教えていただけるとうれしいです。

なお、今回紹介した拡張機能や、設定ファイルはソースコードはこちらのリポジトリで公開しているので、参考にしてみてください。

今回紹介したのはあくまでVS CodeでのMarkdown文章執筆を補助するためのものです。誤字脱字や表記ゆれをなくすことで、読者にスムーズに読んでもらえる文章は書けます。しかし、いくら気持ちよく読める文章でも、個人の情報発信が容易になり、情報があふれる現代社会において文章は読んでもらえないものです。

せっかく時間をかけて、苦労して書いた文章はできるだけ多くの人に読んでもらいたいですよね？

Webライティングには、検索結果に上位表示させる方法や、記事を書くまでの手順に加え、わかりやすい文章を書くことなど、幅広い知識や技術が必要になります。

しかし、文章術に関する本は星の数ほど出版されているものの、Webライティングに関する情報を網羅した本は少ないのが現状です。そんな中で出版されたのが、私の執筆においてダントツに役立っているのがこの本です。

一生使える Webライティングの教室 (Compass Web Development)

ポチップ

一般の人向けに10代から大人までを対象としているため、Webライティング未経験の人でも非常にわかりやすく解説されているのが特徴です。

記事を仕上げるまでの手順や、利用するべきツールなど、実用的なWebライティングの情報を網羅しています。「接続詞を減らす」や「箇条書きを使う」など文章術的な内容や、検索結果に上位表示させる方法から著作権に関する情報なども解説されており、タイトル通り一生使える本となっています。

特に、ラッコツールなどの各種ツールに関する情報については、Webライティング初心者はもちろん、ある程度書きなれた人でも目からウロコが落ちる内容満載だと思いますので、手元に1冊持っておくと執筆が捗ると思います。

ここまでWebライティングについて、わかりやすく体系的にまとめ上げられた本は他にないと思いますので、ぜひ手元において文章執筆に役立ててみてください！

参考にしたサイト

VSCode 公式ガイド
VS Code公式のMarkdownに関するドキュメントです。
VS Codeの拡張機能の紹介や、Markdownプレビュー、Outline表示の方法が記載されているので、こちらも一読することをオススメします。
スケベ小説を書くときの参考書・ツールまとめ
小説を書く際の参考書やツールの紹介したTwitter投稿のまとめ。
小説を前提としていますが、それ以外の文章作成にも役立つツールや参考書が紹介されており、参考にさせていただきました。