https://github.com/mlane/prettier-plugin-astro-attributes
A Prettier plugin to automatically sort HTML attributes alphabetically in .astro files for consistent code formatting.
https://github.com/mlane/prettier-plugin-astro-attributes
Last synced: about 1 year ago
JSON representation
A Prettier plugin to automatically sort HTML attributes alphabetically in .astro files for consistent code formatting.
- Host: GitHub
- URL: https://github.com/mlane/prettier-plugin-astro-attributes
- Owner: mlane
- License: mit
- Created: 2025-03-30T00:24:52.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-30T18:43:03.000Z (about 1 year ago)
- Last Synced: 2025-03-30T18:43:47.728Z (about 1 year ago)
- Language: TypeScript
- Size: 1000 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Prettier Plugin for Sorting HTML Attributes in Astro Files
A **Prettier plugin** that **automatically sorts HTML attributes alphabetically** in `.astro` files to ensure clean, consistent code formatting.
## 🎥 Demo
[Watch the Demo](https://github.com/user-attachments/assets/06de8a0b-4037-49d7-8156-cf8bba6f4141)
---
## Installation
### 1. Install Dependencies
```bash
npm install -D prettier prettier-plugin-astro prettier-plugin-astro-attributes
```
### 2. Configure Prettier
In your `.prettierrc` or `prettier.config.js` file, add the plugin:
- Add the following configuration to your Prettier setup:
```json
{
"overrides": [
{
"files": "*.astro",
"options": {
"parser": "astro"
}
}
],
"plugins": ["prettier-plugin-astro", "prettier-plugin-astro-attributes"]
}
```
> **Note:** This plugin extends the official [prettier-plugin-astro](https://github.com/withastro/prettier-plugin-astro) parser. It is designed to work **only** with the official Astro plugin. It is not compatible with other Astro formatting plugins such as `prettier-plugin-tailwindcss`. If you have any Tailwind-related Prettier plugins installed, please remove them to avoid conflicts.
## Usage
Once installed and configured, run Prettier to format your `.astro` files:
- Run `npx prettier --write .`
The plugin will automatically sort **HTML attributes** in your `.astro` files alphabetically, ensuring consistent and readable code.
## Features
- **Alphabetical Sorting:**
Sorts attributes in HTML tags (such as ``, ``, etc.) alphabetically by attribute name.
- **Easy Integration:**
Works seamlessly with **Prettier** when used in combination with the official Astro plugin.
- **Supports `.astro` Files:**
Specifically designed for **Astro projects**.
## Benefits
- **Consistency:**
Enforces a consistent style for attribute ordering across your Astro files.
- **Cleaner Code:**
Improves the readability and maintainability of your `.astro` templates.
- **Time-Saving:**
Automates the formatting process, reducing manual code adjustments.
## Compatibility Notice
This plugin extends the official [prettier-plugin-astro](https://github.com/withastro/prettier-plugin-astro) to sort HTML attributes. It is **only compatible** with the official Astro plugin. If you use other plugins (e.g. `prettier-plugin-tailwindcss`), this plugin may not work as expected.
If you discover a solution that allows compatibility with Tailwind or other plugins, please open an issue or submit a pull request. Your help is appreciated!
## Contributing
Feel free to open an issue or pull request if you have suggestions, bug reports, or improvements. We welcome contributions!
## License
This project is licensed under the [MIT License](./LICENSE).