This VSCode extension automatically finds and replaces all className
attributes with a className
that references a style
object. It's designed to streamline the process of converting standard CSS class references into a format compatible with CSS Modules or similar CSS-in-JS solutions.
- Whole Document Conversion: Easily convert all
className="..."
references in the current document toclassName={style...}
format with a single command. - Seamless Integration: Works with your existing VSCode setup and enhances your workflow without disrupting your development process.
- Customizable: Though it works out-of-the-box, advanced users can customize it to fit their specific needs.
This extension can be installed directly from the Visual Studio Code Marketplace. Search for "Replace ClassNames with Style" and click "Install."
Alternatively, you can download the .vsix
file from the releases section of the GitHub repository and install it manually using the following command:
bashCopy code
code --install-extension replace-classnames-with-style-0.0.1.vsix
To use the extension, follow these steps:
- Open the document you wish to modify.
- Press
Ctrl+Shift+P
(Windows/Linux) orCmd+Shift+P
(macOS) to open the Command Palette. - Type "Replace ClassNames with style object" and hit Enter.
The extension will automatically replace all instances of className="..."
with className={style...}
within the current document.
We welcome contributions to this project! If you're interested in improving the "Replace ClassNames with Style" extension, please follow these steps:
- Fork the repository.
- Create a new branch for your feature or fix.
- Commit your changes with clear, descriptive commit messages.
- Push your branch and submit a pull request.
For more details, check out our CONTRIBUTING guide.
This project is licensed under the MIT License - see the LICENSE file for details.
- Thank you to the VSCode community for the continuous support and inspiration.
- This extension was inspired by the need for a more efficient way to work with CSS Modules and CSS-in-JS solutions.