Eslint-plugin-html-sort-attributes NPM

eslint-plugin-html-sort-attributes

An ESLint rule to enforce a consistent order of attributes in HTML elements based on regex patterns.

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.

ESLint >= 9

// Import plugin
import htmlSortAttributesPlugin from 'eslint-plugin-html-sort-attributes';
// 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-sort-attributes': htmlSortAttributesPlugin,
  },
  // ...
}];

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-sort-attributes --save-dev

Or using yarn:

yarn add eslint-plugin-html-sort-attributes --dev

Usage

Add html-sort-attributes to the plugins section of your ESLint configuration file. You can then configure the rule under the rules section.

{
  "plugins": [
    "html-sort-attributes"
  ],
  "rules": {
    "html-sort-attributes/sort-attributes": "error"
  }
}

Rule Details

This rule enforces a consistent order of attributes in HTML elements based on regex patterns.

Options

The rule accepts an object with the following properties:

order: An array of regex patterns that define the order of attributes. The rule will enforce that attributes are sorted in the order defined by the patterns. The default value is an empty array, which means that the rule will not enforce any specific order. Strings are passed as is in a Javascript RegExp object, you should escape special characters if needed.
alphabetical: Does same regex patterns should be sorted alphabetically? The default value is false.

Examples

Alphabetical

Incorrect code

<div id="main" class="container" data-role="page"></div>

Correct code

<div class="container" data-role="page" id="main"></div>

Regex order

Following example consider the configuration :

{
  "plugins": [
    "html-sort-attributes"
  ],
  "rules": {
    "html-sort-attributes/sort-attributes": [
      "error",
      {
        "order": [
          "^id$",
          "^data-.*$",
          "^class$"
        ]
      }
    ]
  }
}

Incorrect code

<div class="container" data-role="page" id="main"></div>

Correct code

<div id="main" data-role="page" class="container"></div>

RegexBuilder, create regex simply that are easy to read

The library exposes a RegexBuilder that can be used to create regex patterns easily to be used in the eslint.config.js file.

Everything used in the factory escapes special characters, if you have complex pattern to create, consider using a pattern with comments instead of using the factory.

Here are some examples of how to use it:

Get the RegexBuilder constructor

Typescript import

import htmlSortAttributesPlugin from 'eslint-plugin-html-sort-attributes';

const { RegexBuilder } = htmlSortAttributesPlugin;

Javascript

const htmlSortAttributesPlugin = require('eslint-plugin-html-sort-attributes');

const {RegexBuilder} = htmlSortAttributesPlugin;

Attribute is

// Will generate /^id$/
new RegexBuilder().equals('id').build();

Attribute starts with

// Will generate /^data-.*/
new RegexBuilder().startsWith('data-').build();

Attribute doesn't start with

// Will generate /^(?!data-\b|tracker-\b).*/ and negate it
new RegexBuilder().doesntStartWith(['data-', 'tracker-']).build();

Attribute contains

// Will generate /.*data-.*/
new RegexBuilder().contains('data-').build();

Compose multiple regex

This example show how to create a regex that match an attribute starting with '[' but not followed by a list of specific patterns such as style or class.

This can be used to select an angular input that doesn't match another inner pattern.

// Will generate /^\[(?!style\b|class\b).*\]$/
new RegexBuilder()
        .startsWith('[')
        .hasRegexContent(
                new RegexBuilder()
                        .doesntStartWith([
                          'style',
                          'class'
                        ])
        )
        .endsWith(']')
        .build();

Force start and end boundaries

You can force the regex to start with ^ and end with $ by using the forceStartAndEnd option in build() function.

const regex = new RegexBuilder().startsWith('start').contains('content');

// Will generate /^start.*content.*/
regex.build();

// Will generate /^start.*content.*$/
regex.build({forceStartAndEnd: true});