Prettier Plugin Organize Attributes screenshot

Prettier Plugin Organize Attributes

Author Avatar Theme by Niklaspor
Updated: 20 Jul 2023
238 Stars

Organize your HTML attributes automatically with Prettier

Categories

Overview

If you’re looking to enhance your workflow when dealing with HTML attributes, the prettier-plugin-organize-attributes is a fantastic tool that automatically organizes attributes in your HTML for you. It supports multiple frameworks including Angular, Vue, and standard HTML, allowing for seamless integration into your existing projects. With minimal configuration required, this plugin is designed to simplify attribute management and improve your code readability.

The plugin works by grouping your HTML attributes into defined categories from top to bottom, ensuring your attributes appear consistently and logically. This is particularly useful for maintaining clean and organized codebases, especially in larger projects where attributes can easily become cluttered.

Features

  • Automatic Organization: Automatically organizes your HTML attributes, saving you time on manual sorting.
  • Multi-Framework Support: Compatible with Angular, Vue, and standard HTML, making it versatile for different projects.
  • Custom Grouping: Allows you to customize attribute groups based on your specific requirements.
  • RegExps & Presets: Attributes can be matched using regular expressions or pre-defined presets, offering flexibility in organization.
  • Default Handling: Unmatched attributes can be placed in a $DEFAULT section, ensuring no attributes are lost.
  • Order Control: Customize the order of attributes within groups (ascending or descending) to match your coding standards.
  • Out-of-the-Box Compatibility: Works seamlessly with common file extensions such as .html, .component.html, and .vue, requiring minimal setup.
  • Presets Availability: Access additional presets to quickly apply common attribute sorting strategies without further configuration.