HTMLHintでHTML5を自動整形をしてみた
Posted in tool, blog on November 4, 2020 by Henk Verlinde ‐ 1 min read
はじめに
HTML5 で開発していく上で、ある程度のルールは決めておく必要がある。 htmlhint を使用し、コード管理を自動化してみました。
- パッケージ管理ツール npm
- 使用モジュール htmllint prettier
node をインストール
nodeをインストールし npm を使用できる状態にしてください。
package.json 作成
作業フォルダ内で、以下コマンドを叩いてください。 対話式で聞かれる項目はすべてデフォルト状態で問題ないです。
npm init
以下が出力されます。
こんなのができます。
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
htmlhint とルールとフォーマッターをインストールする 作業ディレクトリ内で、以下を実行し必要なモジュールをインストールしてください。
npm install htmlhint prettier
htmlhlint ルールを記述する
作業ディレクトリ内で、【.htmlhintrc】ファイルを作成し以下を記述する。
{
"tagname-lowercase": true,
}
package.json を編集
以下を追記
"format": "prettier --write"
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"format": "prettier --write"
},
"author": "",
"license": "ISC",
"dependencies": {
"htmlhint": "^0.11.0",
"prettier": "^1.18.2"
}
}
テストコードを記述する
ファイル名は【test.html】とします。 htmlhint のルールとしてタグの大文字は許可されません。
<!DOCTYPE html>
<html>
<head>
<META charset="UTF-8" />
<title>HTML5サンプル</title>
</head>
<body>
<p>HTML5で作成しました！</p>
</body>
</html>
npm run format test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5サンプル</title>
</head>
<body>
<p>HTML5で作成しました！</p>
</body>
</html>
以上です。
