eslint-plugin-html-class-attribute

An ESLint plugin that help enforce best practices or use project specific shorthands for class attributes in HTML.

Requirements

This plugins needs @angular-eslint/template-parser or @html-eslint/parser to work. By default, none is configured, you might need to define it manually in your eslint configuration.

{
    "parser": "@html-eslint/parser"
}

Installation

You can install the plugin using npm:

npm install eslint-plugin-html-class-attribute --save-dev

Or using yarn:

yarn add eslint-plugin-html-class-attribute --dev

Rules

Key

• :white_check_mark: = recommended
• :wrench: = fixable
• :bulb: = has suggestions

| Rule | Description | :white_check_mark: | :wrench: | :bulb: | |-------------------------------------------|---------------------------------------------|--------------------|----------|--------| | order | Enforce classes order | :white_check_mark: | :wrench: | | | prefer | Use class instead of others | | :wrench: | | | forbidden | Prevent usage of classes in class attribute | | | |

Test your RegExp

All rules have configurations based on regex patterns. You can test your regexes using the following code snippet: This is a simple test that you can run in your browser console or in a Node.js environment.

His only purpose is to test that your regex correctly escapes special characters and matches the expected strings.

// Because configuration uses double quote, it is important to test with double quotes
let regex = new RegExp("your-regex-here");
let shouldMatch = 'classToMatch';
let shouldNotMatch = 'classNotToMatch';

let matchOk = regex.test(shouldMatch);
let notMatchOk = !regex.test(shouldNotMatch);

if (!matchOk) {
    console.error('Did not match expected');
}

if (!notMatchOk) {
    console.error('Matched unexpected');
}

if (matchOk && notMatchOk) {
    console.log('Your regex is working as expected');
}