イイダリョウのブログ。HTML構文チェック系の続きです。前回はStyleLintを使ってCSSの構文チェックを行いました。今回はHTMLHintを使ってHTMLの構文チェックをしてみたく。クモのようにコツコツとWeb開発環境まとめqiita.comHTMLの構文チェックはLintよりHint?「ESLint」「StyleLint」ときたら次はいよいよ「htmllint」*1!そう思っていた時代もありました...。調べてみるとHTMLの構文チェックはどうもhtmllintより「HTMLHint」の方が定番のようだった。Hintってヒントを出すという意味なのかな?JSHintというツールもあったのでこのジャンルでは普通なネーミングと思われる。GoogleトレンドGoogleトレンドを見るとだいたい拮抗。「全ての国」で見ると平均ではHTMHintが32に対しhtlmlintは30(母数が少なすぎるw)※参考:https://trends.google.co.jp/trends/explore?q=htmllint,htmlhintGitHubスター数GitHubのスター数を見るとHTMLHintが2,300に対してhtmllintは344。validator.npm週間ダウンロード数npmの週間ダウンロードを見るとHTMLHintが42,509に対してhtmllintは29,585。HTMLHintの方が多め。npmVSCode拡張機能テキストエディタVSCodeの拡張機能(エクステンション)にもこの2つは付いている。そのダウンロード数を見るとHTMLHintが416,161に対してhtmlは3,684だった。(2020/02/06現在)全体的にHTMLHintが高いまとめるとこんな感じ。3,684ということでHTMLHinの方を事始めてみる。迷わず行けよ!行けばわかるさ!HTMLHintのインストールこれまでの他のツールと同じ流れでできると予想してやってみる。-vHTMLHintを入れるフォルダを作る。今回は「htmlhint_test」とした。cdコマンドでhtmllint_testフォルダに移動。-yローカルにHTMLLintをインストールする。QiitaHTMLファイルを作るそれではテスト用にHTMLファイルを作る。ファイル名は「test.html」とした。<p>一人でできるかな。</secton></body></html>いくつか仕掛けを書いた。sectionタグをsectonと打ってみた。サブロウ)にタグの入れ子ズレさあどうなるか。構文チェック実行はこれまでと同じ書き方。パス/ファイル名ローカルにインストールしているので頭にnpxをつける。Developers.IO今回はフォルダ直下に「test.html」なのでこうなる。赤ペン先生気合入りすぎでは?w指摘内容の確認では、指摘内容をよく見ていこう。td>]、開始タグの一致に失敗しました[<td>]行20。td>^タグはペアにする必要があります。td>^タグはペアにする必要があります。ms)ふむ、ヤマダ三兄弟に仕掛けたタグについては全部指摘されたな。L21とかは21行目などの意味だろうな。sectionタグをsectonと打った件についてはスルーか。された内容を修正した。<p>一人でできるかな。</secton></body></html>もういっちょ仕掛けを書いてみた。tabeの閉じタグ/tableのインデントをなくしてみた。ms).1ファイルをスキャンしましたが、エラーは見つかりませんでした(30ミリ秒)。前回のStyleLintはエラーがなくなると何の表示もされなかった(「返事がない、ただのしかばねのようだ」状態)がHTMLHintはエラーがなくなったことが明示されるんだな。あと、エラーが赤でエラーなしが緑ってテストツールのJestと同じだな、と感じた。クモのようにコツコツとちなみに仕掛けておいた/tableのインデントについては標準設定ではスルーされた。体裁についてはPrettierの担当範囲と考えていいのかもしれない。HTMLHintのルール設定HTMLHintのルールは細かく設定ができるようだ。GitHubこんな感じの書き方。true}設定するには.htmlhintrcファイルを作る必要がありそう。'を次のように設定し、ファイルをプロジェクトのルートフォルダーに配置できます。最後にということで、構文チェック系のツールをESLint(JS)、StyleLint(CSS)、HTMLHint(HTML)と三つ体験しました。手動チェックで実行したので、自動的な実行もやってみたいです。あとこの3つを同時に実行するとかPrettierなどの他のツールとの連携なども調べて行きたく思います。06:14Tweet関連記事2020-02-05【CSS】StyleLintで構文チェックを事始める構文チェック系の続きです。前回はESLintでJSコードの構文チェ...2020-01-28【JS】Jestでテストを事始める(TDD:テスト駆動開発)フロントエンド開発環境の続きです。コードチェック(ESLint)...2020-01-25【コードフォーマッター】PrettierでHTML、CSS、JSのコードを整形してみたフロントエンド開発環境の続きです。前回はESLintでコードチェ...2020-01-22【JS】ESLintで構文チェックを事始める以前、フロントエンドの開発環境についていろいろ調べた記事を...2019-12-17【CSS】Sass(SCSS)をGulpでコンパイルしてみるGulpの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。