eslint-plugin-html-class-attribute v1.3.0

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 plugin 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.

ESLint >= 9

// Import plugin
import htmlClassAttributePlugin from 'eslint-plugin-html-class-attribute';
// Choose parser that is compatible with the plugin and your project
import angularTemplateParser from '@angular-eslint/template-parser';
// Or 
import eslintHtmlParser from '@html-eslint/parser';

export default [{
    // ...
    files: ['**/*.html'],
    languageOptions: {
        parser: eslintHtmlParser,
    },
    plugins: {
        'html-class-attribute': htmlClassAttributePlugin,
    },
    // ...
}];

ESLint < 9

HTML Eslint parser

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

Angular template parser

{
    "parser": "@angular-eslint/template-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

Build your RegExp with RegexBuilder

The library exposes a RegexBuilder that can help you build your regexes in a more readable way.

You can read more about it in the RegexBuilder documentation.

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');
}