UNPKG

htmlhint-plugin-blocked-words

Version:

An [HTMLHint](https://htmlhint.com/) plugin that allows users to block arbitrary phrases in HTML code.

114 lines (78 loc) 3.11 kB
# htmlhint-plugin-blocked-words An [HTMLHint](https://htmlhint.com/) plugin that allows users to block arbitrary phrases in HTML code. # Installation You probably want this as a dev dependency: ```shell npm i -D htmlhint-plugin-blocked-words ``` # Load into HTMLHint ## CLI If calling HTMLHint via its CLI, you'll need to use the [`--rulesdir` or `-r` option](https://htmlhint.com/docs/user-guide/usage/cli#--rulesdir--r) for HTMLHint: ```shell npx htmlhint index.html -r node_modules/htmlhint-plugin-blocked-words/dist/rules ``` ## JS API If calling HTMLHint via its JS API (shown below as `HTMLHint.verify`), you can use the `addAllRules` export from this package: <!-- example-link: src/readme-examples/add-all-rules.ts --> ```TypeScript 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.) <!-- example-link: src/readme-examples/ignore-for-file.html --> ```HTML <!-- 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: <!-- example-link: src/rules/block-words-options.ts --> ```TypeScript 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 as `class`, `id`, or custom attributes). - `attributeValues`: checks every attribute's values (such as `this is a list of class names` in `<div class="this is a list of class names"></div>`). - `tagNames`: checks every tag name (such as `div`). - `text`: checks the text of each node (such as `this is some text` in `<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: <!-- example-link: src/readme-examples/example-htmlhintrc.json --> ```JSON { "block-words": { "attributeValues": ["\\bbad-phrase\\b"] } } ``` With that given `htmlhintrc` file, the following is **invalid**: ```html <div class="bad-phrase"></div> ``` While the following is **valid**: ```html <div>bad-phrase</div> ``` (To block `bad-phrase` also in text, use the `all` or `text` property in the `block-words` options.)