Markdownの構文やスタイルをチェックしてくれるVS Code拡張機能「markdownlint」

lint

photo credit: Sint-Katelijne-Waver Groen rood wit Katelijne via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

ノンプログラマー向けにVS Codeを使ってMarkdownで技術書を執筆する方法についてお伝えするシリーズです。

前回の記事はこちらです。

VS CodeでMarkdownを書くために便利な拡張機能Markdown All in One
ノンプログラマー向けにVS Codeを使ってMarkdownで技術書を執筆する方法についてシリーズでお伝えしています。今回は、便利な機能がてんこ盛りの拡張機能Markdown All in Oneについて紹介します。

VS CodeでMarkdownの文書を書くならぜひ入れておきたい拡張機能「Markdown All in One」についてお伝えしました。

さて、実はほかにもいくつかおすすめの拡張機能が存在しています。

今回は、Markdownの構文やスタイルをチェックしてくれるVS Code拡張機能「markdownlint」を紹介していきます。

では、行ってみましょう!

スポンサーリンク

markdownlintとは

「markdownlint」とはどんな拡張機能でしょうか?

公式ページには以下のように紹介されています。

Markdown/CommonMark linting and style checking for Visual Studio Code

「Markdownのlintingとスタイルチェックをする」機能ですね。

markdownlint - Visual Studio Marketplace
Extension for Visual Studio Code - Markdown linting and style checking for Visual Studio Code

lintとは

「linting」というワードはあまり見慣れないかも知れませんね。

「lint」はプログラミングの際に使われるツールで構文チェックを行うプログラムのことです。

ですから、markdownlintは「Markdown」の構文とスタイルをチェックしてくれる拡張機能というわけです。

前述の公式ページをスクロールしていくと「Rules」というパートがありまして、どんなルールをもとにチェックをするのかを一覧することができます(英語ですが)。

markdownlintのインストール

では、拡張機能「markdownlint」をインストールしましょう。

アクティビティバーの「Extensions」から「markdownlint」と検索すればすぐに出てきますので「Install」です。

VS Codeの拡張機能markdownlint

拡張機能はインストールのしかたが一緒なので楽ですね。

Markdownのチェックと修正

では、どのようにmarkdownlintがMarkdownのチェックをするのか見ていきましょう。

Markdownのチェック

markdownlintをインストールすると、文書を開いたときに、ある部分に「波線表示」がされるようになります。

その部分が、Markdownの構文的にまたはスタイル的に修正したほうがよい箇所というわけです。

それらの箇所にマウスカーソルをホバーすると、修正コメントが表示されます。

markdownlintによるlinting

今回の場合、以下のようにありますね。

MD022/blanks-around-headings/blanks-around-headers: Headings should be surrounded by blank lines

つまり、見出し行は空白行で囲む必要があるということですね。

クイックフィックス

この場合、各見出し行の間に空行を入れれば解決するのですが、クイックフィックスという機能を使って解決することができます。

修正箇所にカーソルホバーをすると、電球アイコンも表示されていましたね。

これをクリックすると、以下のようにどのように修正するかのリストが表示されますが、これが「クイックフィックス」です。

markdownlintによるクイックフィックス

今回の例の場合、以下を選択してみましょう。

Click to fix this violation of MD022/blanks-around-headings/blanks-around-headers

すると、以下のように空行が自動で挿入されて、解決されます。

markdownlintのクイックフィックスにより空行が挿入

便利ですね!

PROBLEMSタブで修正候補を一覧表示

さらに、ショートカットキー Ctrl + Shift + M または ⇧⌘M で、「PROBLEMS」タブがVS Codeの下のほうに開きます。

ご覧のとおり、ここにmarkdownlintによる修正候補がすべて一覧表示されます。

PROBLEMSタブで修正箇所をチェック

それぞれダブルクリックすると、エディタ内の該当の箇所にカーソルをジャンプさせることができます。

これで、文書全体の修正候補を確認できますよ!

ぜひ活用していきましょう。

まとめ

以上、Markdownの構文やスタイルをチェックしてくれるVS Code拡張機能「markdownlint」を紹介しました。

Markdownの書き方やスタイルが統一されますので、バグの少ない、一貫性のある文書が作れるようになりますね。

次回は、別の拡張機能を紹介していきます。

Markdown文書の日本語をチェックするVS Code拡張機能「テキスト校正くん」
ノンプログラマー向けにVS Codeを使ってMarkdownで技術書を執筆する方法についてシリーズでお伝えしています。今回は、Markdown文書の日本語をチェックするVS Code拡張機能「テキスト校正くん」を紹介します。

どうぞお楽しみに!

連載目次:ノンプロ向けVS CodeとMarkdownで書籍を執筆

コミュニティ「ノンプログラマーのためのスキルアップ研究会」では技術同人誌の制作プロジェクトを開始しました。その執筆環境としてVisual Studio Code(VS Code)を使い、Markdown記法で書くということを前提にしていきますので、このシリーズでその準備や書き方についてお伝えしていきます。
  1. VS CodeでMarkdownで書いた文書ファイルをプレビューする方法
  2. 【ノンプログラマー向け】Markdownとは何か、またその書き方について
  3. VS CodeでMarkdownを書くために便利な拡張機能Markdown All in One
  4. Markdownの構文やスタイルをチェックしてくれるVS Code拡張機能「markdownlint」
  5. Markdown文書の日本語をチェックするVS Code拡張機能「テキスト校正くん」
  6. Markdown文書をVS Codeで作成するときに便利な拡張機能Paste ImageとCharacterCount
タイトルとURLをコピーしました