Skip to content

CSS Unit Converter is a VS Code extension designed to simplify CSS development by providing quick and easy unit conversions directly within your code editor. Whether you're dealing with px, em, or rem, this extension ensures you can convert and visualize units effortlessly.

License

Notifications You must be signed in to change notification settings

oluwatimilehinawoniyi/css-unit-converter

Repository files navigation

CSS Unit Converter

A VS Code extension that converts CSS unit values and displays them in hover cards or comments beside the code. This extension supports units like pixels (px), ems (em), rems (rem), percentages (%), min-content, max-content, fit-content, and custom units.

feature

Features

  • Hover Conversion: Hover over a CSS unit value to see the converted values.
  • Inline Comments: Option to insert conversion results as comments beside the code.

feature

Requirements

If you have any requirements or dependencies, add a section describing those and how to install and configure them.

Installation

  1. From VS Code Marketplace:
  • Open VS Code.
  • Go to the Extensions view (Ctrl + Shift + X).
  • Search for CSS Unit Converter.
  • Click Install.
  1. From Source:
  • Clone the repository: git clone https://github.com/your-username/css-unit-converter.git
  • Open the project in VS Code.
  • Install dependencies: npm install
  • Build the extension: npm run build
  • Press F5 to open a new VS Code window with the extension loaded.

Usage

  • Hover Conversion:
  1. Hover over a CSS unit value in your code to see its converted values in a hover card.
  • Comment Conversion:
  1. Enable the setting cssUnitConverter.showAsComment in VS Code settings to display unit conversions as comments beside the code.

Configuration

You can configure the extension using VS Code settings:

  • cssUnitConverter.showAsComment: Set to true to enable inline comments for conversion results. Illustration:
{
  "cssUnitConverter.showAsComment": {
    "type": "boolean",
    "default": false,
    "description": "Show unit conversions as comments beside the code."
  }
}

Contribution Guidelines

Contributions are welcome! Please fork the repository and submit pull requests. Checkout the code of conduct via:

Contributor Covenant

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contact

For issues or suggestions, please open an issue on the GitHub repository.

Enjoy!

About

CSS Unit Converter is a VS Code extension designed to simplify CSS development by providing quick and easy unit conversions directly within your code editor. Whether you're dealing with px, em, or rem, this extension ensures you can convert and visualize units effortlessly.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published