How To Use • Contributing • Roadmap • Website
npm install htmlhint-loader
module.exports = {
module: {
rules: [{
enforce: 'pre',
test: /\.html/,
loader: 'htmlhint-loader',
exclude: /node_modules/
}]
}
}You can directly pass some htmlhint rules by
- Adding a query string to the loader for this loader usage only
module.exports = {
module: {
rules: [{
enforce: 'pre',
test: /\.html/,
loader: 'htmlhint-loader?{tagname-lowercase: true}',
exclude: /node_modules/
}]
}
}- Adding a
htmlhintentry in your webpack loader options:
module.exports = {
module: {
rules: [{
enforce: 'pre',
test: /\.html/,
loader: 'htmlhint-loader',
exclude: /node_modules/,
options: {
configFile: 'path/.htmlhintrc'
}
}]
}
}A path to a json file containing the set of htmlhint rules you would like applied to this project. By default all rules are turned off and it is up to you to enable them.
Example file:
{
"tagname-lowercase": true,
"attr-lowercase": true,
"attr-value-double-quotes": true
}The function is called with an array of messages direct for htmlhint and must return a string.
What to emit errors and warnings as. Set to warning to always emit errors as warnings and error to always emit warnings as errors. By default the plugin will auto detect whether to emit as a warning or an error.
Whether to force webpack to fail the build on a htmlhint error
Whether to force webpack to fail the build on a htmlhint warning
Any custom rules you would like added to htmlhint. Specify as an array like so:
module.exports = {
module: {
rules: [{
enforce: 'pre',
test: /\.html/,
loader: 'htmlhint-loader',
exclude: /node_modules/,
options: {
customRules: [{
id: 'my-rule-name',
description: 'Example description',
init: function(parser, reporter) {
//see htmlhint docs / source for what to put here
}
}]
}
}]
}
}You can add a path to a folder containing your custom rules. See below for the format of the rule, it is not the same as HTMLHINT - you can pass a value to a rule.
// webpack config
module.exports = {
module: {
rules: [{
enforce: 'pre',
test: /\.html/,
loader: 'htmlhint-loader',
exclude: /node_modules/,
options: {
rulesDir: path.join(__dirname, 'rules/'),
'my-new-rule': 'this is pass to the rule (option)'
}
}]
}
}// rules/myNewRule.js
const id = 'my-new-rule';
module.exports = {
id,
rule: function(HTMLHint, option /* = 'this is pass to the rule (option)' */) {
HTMLHint.addRule({
id,
description: 'my-new-rule',
init: () => {
//see htmlhint docs / source for what to put here
}
});
}
};Write the output of the errors to a file, for example a checkstyle xml file for use for reporting on Jenkins CI
The filePath is relative to the webpack config: output.path
The use of [name] is supported when linting multiple files.
You can pass in a different formatter for the output file, if none is passed in the default/configured formatter will be used
module.exports = {
module: {
rules: [{
enforce: 'pre',
test: /\.html/,
loader: 'htmlhint-loader',
exclude: /node_modules/,
options: {
outputReport: {
filePath: 'checkstyle-[name].xml',
formatter(messages) {
// convert messages to a string that will be written to the file
return messagesFormattedToString;
}
}
}
}]
}
}Project initially created by @mattlewis and transferred to the HTMLHint organization.
