https://github.com/softonus-io/prettier-plugin-duplicate-remover
A Prettier plugin that removes duplicate class names in class and className attributes, ensuring cleaner, more efficient code in frontend projects like React, Vue.js, and Angular.
https://github.com/softonus-io/prettier-plugin-duplicate-remover
duplicate duplicate-detection duplicate-removal duplicates duplicates-removal prettier prettier-config prettier-eslint prettier-plugin prettier-plugin-tailwindcss prettierconfig prettierrc
Last synced: about 13 hours ago
JSON representation
A Prettier plugin that removes duplicate class names in class and className attributes, ensuring cleaner, more efficient code in frontend projects like React, Vue.js, and Angular.
- Host: GitHub
- URL: https://github.com/softonus-io/prettier-plugin-duplicate-remover
- Owner: softonus-io
- Created: 2024-04-12T20:17:56.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-22T20:00:45.000Z (over 1 year ago)
- Last Synced: 2025-09-29T06:41:25.584Z (9 months ago)
- Topics: duplicate, duplicate-detection, duplicate-removal, duplicates, duplicates-removal, prettier, prettier-config, prettier-eslint, prettier-plugin, prettier-plugin-tailwindcss, prettierconfig, prettierrc
- Language: JavaScript
- Homepage:
- Size: 11.7 KB
- Stars: 2
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 Prettier Plugin: Duplicate Remover
Prettier plugin that removes duplicate class names from `className` (JSX/TSX/React), `class` (HTML, Angular, Vue), and similar attributes in your code, ensuring clean and consistent class usage.
Supports the following:
- React (JSX/TSX) – `className`
- Angular – `class`
- Vue – `class`
- HTML – `class`
By eliminating duplicate class names, this plugin helps maintain cleaner, more efficient markup.
## 🗂 Install
You can install the plugin using any of the following package managers:
### Bun:
```bash
bun add -D @softonus/prettier-plugin-duplicate-remover
```
### Yarn:
```bash
yarn add -D @softonus/prettier-plugin-duplicate-remover
```
### Npm:
```bash
npm install --save-dev @softonus/prettier-plugin-duplicate-remover
```
## 🔨 Usage
Once installed, you need to add this plugin to your Prettier configuration file (`.prettierrc`).
### Steps:
1. **Create a `.prettierrc` file** in your project's root directory (if you don't have one).
2. **Add the plugin configuration** to your `.prettierrc` file:
```json
{
"plugins": ["@softonus/prettier-plugin-duplicate-remover"]
}
```
This will enable the plugin, and Prettier will automatically remove duplicate class names during formatting.
### Example:
Before formatting:
```html
Button
```
After formatting:
```html
Button
```
## 📝 Features
- **React (JSX/TSX)**: Removes duplicate `className` attributes.
- **Angular, Vue, HTML**: Removes duplicate `class` attributes.
- **Ensures clean and consistent markup**: Prevents unnecessary repetition of class names.
## 🏗️ Supported Languages
- **React** (`.jsx`, `.tsx`) – Handles `className`
- **Vue** (`.vue`) – Handles `class`
- **Angular** (`.html`, `.ts`) – Handles `class`
- **HTML** (`.html`) – Handles `class`
## 🏆 Contributing
If you’d like to contribute to this project, feel free to fork it, make changes, and open a pull request. Your contributions are always welcome!
## 📨 Contact
For any questions or issues, please contact me at:
**ebo@softonus.com**
---
### 💡 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.