A powerful Prettier plugin designed to remove unnecessary whitespaces from class attributes (class
and className
) across Vue.js, Angular, React, Next, Nuxt and HTML projects.
This plugin ensures that class names are clean and consistently formatted by trimming excess spaces and standardizing them, improving the overall code quality.
Install the plugin for your project using one of the following package managers:
Bun:
bun add -D @softonus/prettier-plugin-whitespace-remover
Yarn:
yarn add -D @softonus/prettier-plugin-whitespace-remover
npm:
npm install --save-dev @softonus/prettier-plugin-whitespace-remover
-
Create a
.prettierrc
file (if you don’t already have one) in your project’s root directory. -
Add the plugin to your Prettier configuration:
{
"plugins": ["@softonus/prettier-plugin-whitespace-remover"]
}
This will automatically apply the plugin to clean up whitespace in your React, Vue.js, Angular, Next, Nuxt and HTML projects.
- React & Next.js: Cleans up
className
attributes. - Vue.js: Cleans up
class
attributes within.vue
files. - Angular: Cleans up
class
attributes in HTML and Angular templates. - Plain HTML: Cleans up
class
attributes in regular HTML files.
- Cleans up class names: Removes unnecessary spaces and trims multiple spaces into a single space.
- Works across all major frameworks: Supports React, Vue, Angular, Next.js, and plain HTML.
- Zero configuration: Simply add the plugin and start formatting.
<div class=" btn btn-primary ">
Hello World
</div>
<div class="btn btn-primary">
Hello World
</div>
For inquiries or suggestions, reach out to me at [email protected].
Contributions are welcome! If you have any improvements or fixes, feel free to open an issue or create a pull request.
Distributed under the MIT License. See LICENSE for more information.