📐 CSS Unit Converter

VS Code Extension | Author: [Jud Vazba]

✨ Overview

This extension is a powerful time-saver for any frontend developer. It allows you to quickly convert CSS units (px, rem, em, vw, vh) directly within your code, supporting both single-instance conversion and global file refactoring.

The conversion menu is accessible via the Right-Click Context Menu or the VS Code Command Palette.

🚀 Features

The CSS Unit Converter offers modern, flexible functionality:

• ⚡ Quick Conversion: Convert units (px, rem, em, vw, vh) with a simple command, eliminating manual calculations.
• 🖱️ Context Menu Integration: Right-click on any recognized unit value to trigger the conversion menu.
• 🔍 Unit Highlighting: All recognized units in the active file are automatically underlined for easy identification.
• 🔄 Scope Selection (Refactoring): Choose between two powerful conversion modes:
  1. Single Instance: Convert only the value under your cursor or selected.
  2. Global Refactor: Convert all instances of that unit type (e.g., convert all px values) in the entire file to the target unit.
• ⚙️ Configurable Base: Easily adjust the rootFontSize (default is 16px) used for px to rem/em conversions in the VS Code settings.

🛠️ Usage

1. Place Cursor or Select Text: In a CSS, SCSS, or JavaScript file, either place your cursor on a recognized unit (e.g., 24px) or select the value.
2. Run Command:
   • Right-Click: Right-click and select "CSS Unit Converter: Convert Units".
   • Command Palette: Press Ctrl/Cmd + Shift + P and search for "Convert Units".
3. Choose Scope: Select whether you want to convert only the current value or all units of that type in the file.
4. Choose Target Unit: Select the desired unit (e.g., rem). The conversion is applied instantly.

⚙️ Extension Settings

This extension contributes the following setting, which can be modified in File > Preferences > Settings (or Code > Preferences > Settings on macOS):

🔗 Technical Highlights (For Developers)

This project demonstrates strong proficiency in the VS Code Extension API, including:

• TypeScript: Used for robust and type-safe development.
• Contextual Contributions: Advanced use of package.json to define commands, menus (editor/context), and configuration settings.
• Dynamic Decorators (vscode.window.createTextEditorDecorationType): Implemented real-time visual feedback by highlighting units in the active document.
• Asynchronous UI (vscode.window.showQuickPick): Managed user input flow for selecting both conversion scope and target unit.
• Text Refactoring: Utilized editor.edit() for precise single-instance replacement and developed custom logic for efficient global unit replacement using RegExp.

💖 Contributing

This project is open source. Feel free to report bugs or suggest features on the [GitHub Repository Link].

Enjoy!