htmlhint-plugin-blocked-words v1.0.2
htmlhint-plugin-blocked-words
An HTMLHint plugin that allows users to block arbitrary phrases in HTML code.
Installation
You probably want this as a dev dependency:
npm i -D htmlhint-plugin-blocked-wordsLoad into HTMLHint
CLI
If calling HTMLHint via its CLI, you'll need to use the --rulesdir or -r option for HTMLHint:
npx htmlhint index.html -r node_modules/htmlhint-plugin-blocked-words/dist/rulesJS API
If calling HTMLHint via its JS API (shown below as HTMLHint.verify), you can use the addAllRules export from this package:
import {readFileSync} from 'fs';
import {HTMLHint} from 'htmlhint';
import {addAllRules} from 'htmlhint-plugin-blocked-words';
// this must be added before your HTMLHint api calls. It only needs to be called once per process.
addAllRules();
const yourCode = readFileSync('filename.ts').toString();
HTMLHint.verify(yourCode);Temporarily ignoring
Add the following comment to the top of a file to turn off a rule for that file. (Note that HTMLHint does not document this anywhere but it works.)
<!-- htmlhint block-words:false -->
<html>
<head>
<title>Document Title</title>
</head>
<body>
Stuff
</body>
</html>Rules
block-words
This is the main (currently only) rule, used to block phrases in tag names, text, attribute names, or attribute values.
This rule accepts an object with the following type:
export type BlockWordsOptions = {
all?: string[];
attributeNames?: string[];
attributeValues?: string[];
tagNames?: string[];
text?: string[];
};Each string in each array is treated as a regular expression, so RegExp syntax can be used. (Make sure to escape the backslash though, like this: "\\s".)
all: checks each HTML node's entire raw text.attributeNames: checks every attribute name (such asclass,id, or custom attributes).attributeValues: checks every attribute's values (such asthis is a list of class namesin<div class="this is a list of class names"></div>).tagNames: checks every tag name (such asdiv).text: checks the text of each node (such asthis is some textin<div>this is some text</div>).
Turn off the rule by giving it a falsy value, such as false, null, or even an empty string ''.
Example usage:
{
"block-words": {
"attributeValues": ["\\bbad-phrase\\b"]
}
}With that given htmlhintrc file, the following is invalid:
<div class="bad-phrase"></div>While the following is valid:
<div>bad-phrase</div>(To block bad-phrase also in text, use the all or text property in the block-words options.)