VSCode

VSCodeのMarkdown環境を整える ~その5 Lint機能~

はじめに

第5弾のVSCodeのMarkdown環境を整えていきたいと思います。
今回はTyporaにはなく、VSCodeだけの機能となるLint機能になります。

Lint機能とは、構文チェックとも呼ばれ、記述ルールに沿った書き方がされているかどうかをリアルタイムでチェックしてくれるものです。

プログラミング開発の現場でよく使われており、複数人で開発している場合、コーディングルールが文書化されていたとしても実際のソースコードでは個人個人の書き方をしてしまいフォーマットが統一されていないことが多々あります。

そういった場合にLint機能を用いて構文チェックすることでルールに沿っていないものはエラー表示されます。それを見て作成者が修正することで全体として統一されたフォーマットでソースコードを作成することができます。(自動フォーマットしてくれるものもあります。)

環境

  • VSCode
    • 1.48.2
  •  markdownlint
      • 0.36.3

改善したい項目一覧

改善したい点は以下になります。

  • アウトライン機能     ← 済?
  • 画像ファイルの貼り付け  ← 済
  • リアルタイムプレビュー  ← 済
  • ショートカット機能    ← 済
  • Lint機能(Typoraにはない機能) ← 今回はここが対象
  • CSS拡張

やりたいこと

mdファイルのフォーマットを統一したい。
統一されたフォーマットは、読みやすいはず!

そのために、mdファイルの構文をリアルタイムでチェックしてくれる機能が欲しい。

これを実現できるのが、markdownlintになります。

6. 拡張機能:markdownlint

6.1. インストール

拡張機能マーケットプレイスからインストールを行います。

6.2. 使い方

インストール完了すれば、あとはmdファイルを開くだけで自動で構文チェックをかけてくれ、ルールに引っかかれば黄色の波線で警告してくれます。

6.3. ルール

Lintルールとして、約50個くらいあります。
どういったエラーが表示されているのかは、ここに詳細な説明があるので、確認してみてください。

なお、デフォルトルールで足りない場合にはカスタムルールを追加することもできるようです。(詳細は割愛。)

ルールの無効化

逆にデフォルトルールがきつすぎてこのルールを許容したいっていう場合にはsetting.jsonなどでルールを無効化することもできます。

以下の例だとMD013:1行の長さMD045:画像の代替テキストについては無効化しています。

"markdownlint.config": {
"MD013": false,  // 1行の長さ
"MD045": false   // 画像の代替テキスト
}

7. おわりに

無事にLint機能を盛り込むことができました。Lint機能はTyporaにはおそらくない?ので、VSCodeに優位性があると思います。

Lint機能自体は単体で見るとそこまでメリットを感じられないかもしれませんが、長い目で見ると効果を発揮するものなのではやめの段階から導入しておくことをおすすめします。(後からじゃ絶対めんどくさくてやらないので。。。)