Bootstrap Protector is a Visual Studio Code extension designed to help developers avoid accidentally overwriting predefined CSS classes from the Bootstrap framework. It ensures you stay informed about potential conflicts in your custom CSS and SCSS files, allowing you to write clean, conflict-free stylesheets.
- Automatically scans your CSS and SCSS files on save.
- Identifies classes already defined by Bootstrap.
- Displays a warning directly in the text editor, highlighting the conflicting class.
If you define a class in your CSS or SCSS file that conflicts with Bootstrap, such as:
.container {
margin: auto;
}The extension will display a warning message in red:
⚠️ Warning: "container" is already being used by Bootstrap.
- Download and install the extension from the VS Code Marketplace.
⚠️ Activation: Open the command pallete (Ctrl + Shift + P / Cmd Shift + P) and search for "Bootstrap Protector" and choose "Check CSS/SCSS for conflicts"
- Open any CSS or SCSS file in your project.
- Save the file (Ctrl + S / Cmd + S) to trigger the extension.
- If any conflicting classes are detected, warnings will appear in the editor.
The extension uses a predefined list of Bootstrap classes to check for conflicts. This list is stored in a JSON file included with the extension. If you want to customize this list:
- Locate the
bootstrapClasses.jsonfile in the extension's installation directory. - Add, remove, or update the class names as needed.
- Currently, the extension supports CSS and SCSS files. Other file types are not scanned.
- Based off of a limited number of Bootstrap 5.3 classes. More to be added later.
- The warning message is displayed for the entire line where the class is defined, which might not suit all preferences.
Contributions are welcome! Feel free to submit issues or pull requests on the GitHub repository.
This extension is licensed under the MIT License. See the LICENSE file for more information.
Happy coding with Bootstrap Protector!