I tried to automatically format HTML5 with HTMLHint
Posted in tools, blogs on November 4, 2020 by Henk Verlinde ‐ 2 min read
Introduction
When developing with HTML5, it is necessary to decide some rules. I used htmlhint to automate code management.
- Package management tool npm
- Use module htmllint prettier
install node
Install node and make npm available.
create package.json
In your working folder, type the following command. The defaults for all interactively asked items are fine.
npm init
will output:
You can do this.
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Install htmlhint and rules and formatters Inside your working directory, run the following to install the required modules.
npm install htmlhint prettier
Write htmlhlint rules
In the working directory, create a [.htmlhintrc] file and write the following.
{
"tagname-lowercase": true,
}
edit package.json
Add the following
"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"
}
}
write test code
The file name is [test.html]. As a rule of htmlhint no capitalization of tags is allowed.
<!DOCTYPE html>
<html>
<head>
<META charset="UTF-8" />
<title>HTML5 sample</title>
</head>
<body>
<p>Created with HTML5! </p>
</body>
</html>
npm run format test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5 sample</title>
</head>
<body>
<p>Created with HTML5! </p>
</body>
</html>
that’s all.
