https://github.com/heap-code/eslint-plugin-sort-attribute-content
An ESLint plugin to sort HTML attribute content (such as `class`)
https://github.com/heap-code/eslint-plugin-sort-attribute-content
attribute eslint eslintplugin html sort
Last synced: 5 months ago
JSON representation
An ESLint plugin to sort HTML attribute content (such as `class`)
- Host: GitHub
- URL: https://github.com/heap-code/eslint-plugin-sort-attribute-content
- Owner: heap-code
- License: mit
- Created: 2023-07-03T18:27:33.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2026-02-06T00:58:15.000Z (5 months ago)
- Last Synced: 2026-02-06T10:46:47.800Z (5 months ago)
- Topics: attribute, eslint, eslintplugin, html, sort
- Language: TypeScript
- Homepage:
- Size: 2.08 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# eslint-plugin-sort-attribute-content
[](https://github.com/heap-code/eslint-plugin-sort-attribute-content/actions/workflows/ci.yml)
[](https://www.npmjs.com/package/eslint-plugin-sort-attribute-content)
An ESLint plugin to sort attribute content in HTML
> If you are using [Tailwind](https://tailwindcss.com/) and only want to lint the classnames,
> then the [eslint-plugin-tailwindcss](https://www.npmjs.com/package/eslint-plugin-tailwindcss)
> is probably a better choice.
## Installation
First, `eslint` must be installed:
```bash
npm i --save-dev eslint
```
Then, `eslint-plugin-sort-attribute-content` can be installed:
```bash
npm i --save-dev eslint-plugin-sort-attribute-content
```
## Usage
A parser must be set to use this plugin:
```json
{
"parser": "@html-eslint/parser"
}
```
> Go to the [parsers section](#parsers) to display the list of available parsers.
The plugin can then be activated by adding `sort-attribute-content` to the `plugins` property:
```json
{
"plugins": ["sort-attribute-content"]
}
```
The rule can be defined as follows:
```json
{
"rules": {
"sort-attribute-content/sort-attribute-content": ["error", { "attributes": "class" }]
}
}
```
> All this configuration can be done on a `override` section:
>
### Parsers
The plugin can be used with multiple parsers.
#### HTML
A _regular_ HTML parser can be used for any HTML files.
The parser [@html-eslint/parser](https://www.npmjs.com/package/@html-eslint/parser)
should be installed first:
```bash
npm i -D @html-eslint/parser
```
Then set in the configuration file:
```json
{
"parser": "@html-eslint/parser"
}
```
#### Angular
This plugin can be used with the [Angular framework](https://angular.io/).
The parser [@angular-eslint/template-parser](https://www.npmjs.com/package/@angular-eslint/template-parser)
should be installed first:
```bash
npm i -D @angular-eslint/template-parser
```
Then set in the configuration file:
```json
{
"parser": "@angular-eslint/template-parser"
}
```
> **Note**:
> It only works for text attributes.
>
> ```angular2html
>
> ^^^^^
> ```
#### React
This plugin can be used with the [React library](https://react.dev/).
ESLint must first be configured to read React.
> [How to configure?](https://github.com/jsx-eslint/eslint-plugin-react#configuration-legacy-eslintrc-)
Once enabled, it will work on `jsx` and `tsx` files.
> Do not forget to set the [typescript parser](https://typescript-eslint.io/packages/parser/)
> for `tsx` files.
>
> Install:
>
> ```bash
> npm i -D @typescript-eslint/parser
> ```
>
> Then set in the configuration file:
>
> ```json
> {
> "parser": "@typescript-eslint/parser"
> }
> ```
It might be useful to enable the rule only on these files:
```json
{
"overrides": [
{
"files": ["*.jsx", "*.tsx"],
"rules": {
"sort-attribute-content/sort-attribute-content": ["error", { "attributes": "className" }]
}
}
]
}
```
> **Note**:
> It only works for literal text attributes.
>
> ```tsx
> return
> ^^^^^
> ```
## Rules
🔧 Automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/user-guide/command-line-interface#--fix).
| Name | 🔧 |
| :------------------------------------------------------------- | :- |
| [sort-attribute-content](docs/rules/sort-attribute-content.md) | 🔧 |
## Releases
See information about breaking changes and release notes [here](https://github.com/heap-code/eslint-plugin-sort-attribute-content/blob/HEAD/CHANGELOG.md).