photo credit: Sint-Katelijne-Waver Groen rood wit Katelijne via photopin (license)
みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。
ノンプログラマー向けにVS Codeを使ってMarkdownで技術書を執筆する方法についてお伝えするシリーズです。
前回の記事はこちらです。
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とスタイルチェックをする」機能ですね。
lintとは
「linting」というワードはあまり見慣れないかも知れませんね。
「lint」はプログラミングの際に使われるツールで構文チェックを行うプログラムのことです。
ですから、markdownlintは「Markdown」の構文とスタイルをチェックしてくれる拡張機能というわけです。
前述の公式ページをスクロールしていくと「Rules」というパートがありまして、どんなルールをもとにチェックをするのかを一覧することができます（英語ですが）。
markdownlintのインストール
では、拡張機能「markdownlint」をインストールしましょう。
アクティビティバーの「Extensions」から「markdownlint」と検索すればすぐに出てきますので「Install」です。
拡張機能はインストールのしかたが一緒なので楽ですね。
Markdownのチェックと修正
では、どのようにmarkdownlintがMarkdownのチェックをするのか見ていきましょう。
Markdownのチェック
markdownlintをインストールすると、文書を開いたときに、ある部分に「波線表示」がされるようになります。
その部分が、Markdownの構文的にまたはスタイル的に修正したほうがよい箇所というわけです。
それらの箇所にマウスカーソルをホバーすると、修正コメントが表示されます。
今回の場合、以下のようにありますね。
MD022/blanks-around-headings/blanks-around-headers: Headings should be surrounded by blank lines
つまり、見出し行は空白行で囲む必要があるということですね。
クイックフィックス
この場合、各見出し行の間に空行を入れれば解決するのですが、クイックフィックスという機能を使って解決することができます。
修正箇所にカーソルホバーをすると、電球アイコンも表示されていましたね。
これをクリックすると、以下のようにどのように修正するかのリストが表示されますが、これが「クイックフィックス」です。
今回の例の場合、以下を選択してみましょう。
Click to fix this violation of MD022/blanks-around-headings/blanks-around-headers
すると、以下のように空行が自動で挿入されて、解決されます。
便利ですね！
PROBLEMSタブで修正候補を一覧表示
さらに、ショートカットキー Ctrl + Shift + M または ⇧⌘M で、「PROBLEMS」タブがVS Codeの下のほうに開きます。
ご覧のとおり、ここにmarkdownlintによる修正候補がすべて一覧表示されます。
それぞれダブルクリックすると、エディタ内の該当の箇所にカーソルをジャンプさせることができます。
これで、文書全体の修正候補を確認できますよ！
ぜひ活用していきましょう。
まとめ
以上、Markdownの構文やスタイルをチェックしてくれるVS Code拡張機能「markdownlint」を紹介しました。
Markdownの書き方やスタイルが統一されますので、バグの少ない、一貫性のある文書が作れるようになりますね。
次回は、別の拡張機能を紹介していきます。
どうぞお楽しみに！
