Markuplintを使って高品質なHTMLコーダーになる

HTML/CSSを学ぶ

こんにちは。今回はMarkuplintというHTMLリンターについて紹介します。入れるだけで自分のコードの間違いや改善できるところを指摘してくれて、かつ改善方法まで教えてくれる素晴らしいツールです。

存在を知ったのは去年の後半でしたが、しばらく使ってみたところ本当に効果を感じました。絶対に入れた方がいいです。

概要

MarkuplintはHTMLの構文をチェックし、間違いがあればエラーを出してくれる上に解決方法もある程度教えてくれるツールです。VSCodeの拡張機能としても利用が可能です。エラーがあると赤の波線で表示され、ホバーすると問題の詳細が表示されます(下画像)。

このように、名前の通りマークアップ(要はHTML)をLintしています。

プログラミングの世界で「Lint」というと、コードの構文が間違っていないか、エラーの原因になりうるコードがないかをチェックすること言います。それを行うツールを総称してLinter(リンター)と呼びます。ESLint(JavaScriptのLinter)などは皆さんも耳にしたことがあるのではないでしょうか。

実際にコードをコンパイルしたり実行せずにチェックを行うため「静的解析ツール」と呼ばれることも多いです。

インストール

VSCodeで使えるようにする手順です。

  1. VSCodeを開き、拡張機能タブを開く
  2. 「Markuplint」と検索する
  3. 「インストール」ボタンを押す

使用方法

インストールしたら、すぐに機能が発揮されます。現代のマークアップのルールから見て不足しているもの、間違っているものがコード上にあれば赤の波線でアラートを出します。

そこにマウスカーソルをホバーすると詳細を表示します。

コードの品質を向上させる方法

基本的にはMarkuplintに従って直していけばコードは良くなります。

例えばimgタグのwidth/height属性、loading属性、decoding属性は指定した方がベターとされており、それらがない場合はしっかりアラートを出してきます。

: 画像埋め込み要素 - HTML: ハイパーテキストマークアップ言語 | MDN
は HTML の要素で、文書に画像を埋め込みます。

あとはアクセシビリティに関するアラートも出され、それも基本的には従った方が良いでしょう。

逆に、かつては使われていたが今は指定すべきでなくなった廃止属性についてもアラートを出してくれます。

とはいえ、自分自身がそれらを理解しておく必要もあります。Markuplintが判定するのはあくまで一般的なマークアップのルールに対してどうか、です。プロジェクトによっては必ずしも全てに従わなくて良いこともあるでしょうからそこの判断はあなた自身ができた方が良いです。

例えばアクセシビリティについてはしっかり学べる情報がMDNにまとまっています。

アクセシビリティ | MDN
ウェブ開発におけるアクセシビリティとは、何らかの理由により能力に制約がある場合でも、可能な限り多くの人々がウェブサイトを使用できるようにすることを意味します。この記事では、アクセシビリティを考慮したコンテンツを開発するための情報を提供します。

Markuplintのアラートを見つけた時に、「自分が知らないルールだったら調べる」を毎回行えばしっかり学ぶことができるのでぜひ参考にしていきましょう。

まとめ

というわけでMarkuplintの紹介でした。入れるだけでマークアップにおける細かいルールを知ることができ、かつ実際のコードも改善できる素晴らしいツールですね。本当に入れて損はありません。

こういった細かいテクニックやツールの使い方をもっと知ってレベルアップしたい方はぜひこちらの本で勉強してみてください!

【脱・初心者】教材だけでは分からない、案件でよく要求される細かいコーディングのテクニック30選 + α - セカヤサBooks
フリーランスのフロントエンドエンジニアとして7年間、サイト制作やWebアプリケーション開発の案件に携わってきた中で「これは伝えたい」と思ったコーディングのテクニックをまとめました! 正直言うと、これができているかどうかが「プロかプロでないか」を大きく分けます。逆に言えば、この本

コメント

タイトルとURLをコピーしました