css-intellisense README

CSS Class Name IntelliSense Extension

This VS Code extension provides IntelliSense for CSS class names in HTML, JavaScript (React), and TypeScript (React) files. It allows you to specify a CSS file, extracts the class names, and offers them as suggestions in your code editor.

Features

• CSS File Input: Prompt to input the path to a CSS file from which class names are extracted.
• IntelliSense: Provides suggestions for class names in HTML, JavaScript (React), and TypeScript (React) files.
• Supports Multiple Languages: Works seamlessly with .html, .jsx, and .tsx files.
• Error Handling: Displays error messages if the CSS file cannot be read or parsed.

How to Use

1. Install the Extension Locally:

• Follow the steps provided in the "Installation" section to install the extension from a .vsix file.

2. Activate the Extension:

• Upon activation, you will be prompted to enter the path to your CSS file.
• Enter the absolute or relative path to the CSS file you want to use.

3. Use IntelliSense:

• After specifying the CSS file, start typing in an HTML, JavaScript (React), or TypeScript (React) file.
• When you type a . followed by the class name, the extension will provide suggestions based on the classes in the specified CSS file.

Installation

Install from a .vsix File

If you have a .vsix package of the extension:

1. Open Visual Studio Code.
2. Go to the Extensions view (Ctrl+Shift+X).
3. Click on the three-dot menu and select Install from VSIX....
4. Browse to the .vsix file location and install the extension.

Build from Source

1. Clone the repository or download the source code.
2. Open the project in Visual Studio Code.
3. Run npm install to install dependencies.
4. Press F5 to open a new VS Code window with the extension loaded in a development environment.

Requirements

• Visual Studio Code 1.50.0 or higher.
• Node.js and npm for development and packaging.

Known Issues

• Currently supports only one CSS file at a time. Multi-file support is planned for future releases.
• SCSS and LESS support is not yet available.

Contributing

Contributions are welcome! If you have suggestions or encounter any issues, please feel free to open an issue or submit a pull request.

License

This extension is licensed under the MIT License.

Acknowledgements

This extension was built using PostCSS for parsing CSS and the VS Code API for providing IntelliSense.

You can update your settings.json by adding the path for your css file

{
  "cssIntelliSense.cssFilePath": "/path/to/your/styles.css"
}