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の書き方やスタイルが統一されますので、バグの少ない、一貫性のある文書が作れるようになりますね。
次回は、別の拡張機能を紹介していきます。
どうぞお楽しみに！
連載目次：ノンプロ向けVS CodeとMarkdownで書籍を執筆
コミュニティ「ノンプログラマーのためのスキルアップ研究会」では技術同人誌の制作プロジェクトを開始しました。その執筆環境としてVisual Studio Code（VS Code）を使い、Markdown記法で書くということを前提にしていきますので、このシリーズでその準備や書き方についてお伝えしていきます。- VS CodeでMarkdownで書いた文書ファイルをプレビューする方法
- 【ノンプログラマー向け】Markdownとは何か、またその書き方について
- VS CodeでMarkdownを書くために便利な拡張機能Markdown All in One
- Markdownの構文やスタイルをチェックしてくれるVS Code拡張機能「markdownlint」
- Markdown文書の日本語をチェックするVS Code拡張機能「テキスト校正くん」
- Markdown文書をVS Codeで作成するときに便利な拡張機能Paste ImageとCharacterCount
