Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/htmlhint/htmlhint-loader
A webpack loader for htmlhint
https://github.com/htmlhint/htmlhint-loader
htmlhint loader loader-plugin webpack webpack-loader webpack-plugin webpack4
Last synced: 2 months ago
JSON representation
A webpack loader for htmlhint
- Host: GitHub
- URL: https://github.com/htmlhint/htmlhint-loader
- Owner: htmlhint
- License: mit
- Created: 2015-07-07T18:31:17.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T00:24:28.000Z (about 2 years ago)
- Last Synced: 2024-08-10T10:25:57.027Z (5 months ago)
- Topics: htmlhint, loader, loader-plugin, webpack, webpack-loader, webpack-plugin, webpack4
- Language: JavaScript
- Size: 1.26 MB
- Stars: 20
- Watchers: 1
- Forks: 8
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
HTMLHint Loader
A Webpack loader for HTMLHint
How To Use • Contributing • Roadmap • Website
## Table of Contents
- **[Install](#install)**
- **[Usage](#usage)**
- **[Options](#options)**
## Install
```
npm install htmlhint-loader
```
## Usage
```javascript
module.exports = {
module: {
rules: [{
enforce: 'pre',
test: /\.html/,
loader: 'htmlhint-loader',
exclude: /node_modules/
}]
}
}
```
### Options
You can directly pass some [htmlhint rules](https://github.com/thedaviddias/HTMLHint/wiki/Rules) by
- Adding a query string to the loader for this loader usage only
```javascript
module.exports = {
module: {
rules: [{
enforce: 'pre',
test: /\.html/,
loader: 'htmlhint-loader?{tagname-lowercase: true}',
exclude: /node_modules/
}]
}
}
```
- Adding a `htmlhint` entry in your webpack loader options:
```javascript
module.exports = {
module: {
rules: [{
enforce: 'pre',
test: /\.html/,
loader: 'htmlhint-loader',
exclude: /node_modules/,
options: {
configFile: 'path/.htmlhintrc'
}
}]
}
}
```
#### `configFile`
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:
```javascript
{
"tagname-lowercase": true,
"attr-lowercase": true,
"attr-value-double-quotes": true
}
```
#### `formatter` (default: a function that pretty prints any warnings and errors)
The function is called with an array of messages direct for htmlhint and must return a string.
#### `emitAs` (default: `null`)
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.
#### `failOnError` (default `false`)
Whether to force webpack to fail the build on a htmlhint error
#### `failOnWarning` (default `false`)
Whether to force webpack to fail the build on a htmlhint warning
#### `customRules`
Any custom rules you would like added to htmlhint. Specify as an array like so:
```javascript
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
}
}]
}
}]
}
}
```
#### `rulesDir`
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.
```javascript
// 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)'
}
}]
}
}
```
```javascript
// 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
}
});
}
};
```
##### `outputReport` (default: `false`)
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
```javascript
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;
}
}
}
}]
}
}
```
## Licence
Project initially created by [@mattlewis](https://github.com/mattlewis92) and transferred to the [HTMLHint](https://github.com/htmlhint) organization.
[MIT License](./LICENSE)