https://github.com/softonus-io/prettier-plugin-whitespace-remover
A Prettier plugin that removes excessive whitespace from class and className attributes in HTML, Vue.js, React, and Angular, helping to improve code readability and maintain consistency.
https://github.com/softonus-io/prettier-plugin-whitespace-remover
prettier prettier-eslint prettier-plugin prettier-plugin-tailwindcss prettierconfig prettierrc whitespace whitespace-removal
Last synced: 4 days ago
JSON representation
A Prettier plugin that removes excessive whitespace from class and className attributes in HTML, Vue.js, React, and Angular, helping to improve code readability and maintain consistency.
- Host: GitHub
- URL: https://github.com/softonus-io/prettier-plugin-whitespace-remover
- Owner: softonus-io
- Created: 2024-04-12T19:26:06.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-22T19:25:57.000Z (over 1 year ago)
- Last Synced: 2025-10-06T01:45:48.275Z (9 months ago)
- Topics: prettier, prettier-eslint, prettier-plugin, prettier-plugin-tailwindcss, prettierconfig, prettierrc, whitespace, whitespace-removal
- Language: JavaScript
- Homepage:
- Size: 15.6 KB
- Stars: 9
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 Prettier Plugin: Whitespace Remover
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.
---
## 🗂 Installation
Install the plugin for your project using one of the following package managers:
**Bun:**
```bash
bun add -D @softonus/prettier-plugin-whitespace-remover
```
**Yarn:**
```bash
yarn add -D @softonus/prettier-plugin-whitespace-remover
```
**npm:**
```bash
npm install --save-dev @softonus/prettier-plugin-whitespace-remover
```
---
## 🔨 Usage
1. **Create a `.prettierrc` file** (if you don’t already have one) in your project’s root directory.
2. **Add the plugin to your Prettier configuration**:
```json
{
"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.
---
## 🌐 Supported Frameworks
- **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.
---
## ⚡ Features
- **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.
---
## 📝 Example
### Before Prettier:
```html
Hello World
```
### After Prettier:
```html
Hello World
```
---
## 📨 Contact
For inquiries or suggestions, reach out to me at [ebo@softonus.com](mailto:ebo@softonus.com).
---
## 🤝 Contributions
Contributions are welcome! If you have any improvements or fixes, feel free to open an issue or create a pull request.
---
## 🏷️ License
Distributed under the MIT License. See [LICENSE](LICENSE) for more information.