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-removerYarn:
yarn add -D @softonus/prettier-plugin-whitespace-removernpm:
npm install --save-dev @softonus/prettier-plugin-whitespace-remover-
Create a
.prettierrcfile (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
classNameattributes. - Vue.js: Cleans up
classattributes within.vuefiles. - Angular: Cleans up
classattributes in HTML and Angular templates. - Plain HTML: Cleans up
classattributes 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.