Ellipsis (beta)

Ellipsis

Ellipsis is a 🆒 extension that helps you create 🦄 and 🎨 class names for your HTML and React projects. With Ellipsis, you can 😎 about naming conflicts, typos, or boring conventions. Just ✨ your code with Ellipsis and enjoy the 🌈

Installation

You can install Ellipsis from the VS Code Marketplace or from the GitHub repository.

To install from the VS Code Marketplace, search for “Ellipsis” in the Extensions tab and click on the Install button.

To install from the GitHub repository, clone the repository and copy the folder into your .vscode/extensions directory. Then reload VS Code to activate the extension.

Usage

Step 1.

To use Ellipsis, you need to load it into your project first.

Press Ctrl + Shift + P to open the VS Code command palette and select “Ellipsis: Load Extension”. This is only required the first time you open a new project.

Step 2.

Type “..” or “--” in your HTML or React code and a random class name will be generated for you

If you need a short class name, use “..”

Use “--” for a longer and more descriptive class name

1. HTML 

<div class=".."> or <div class="--">

2. React JS

<div className=".."> or <div className="--">

This will generate something like:

<div class="_2vjw"> or <div class="crispy-bacon">