This repository is a fork of the original zignd/HTML-CSS-Class-Completion. If you are currently using the original extension, please uninstall it first before installing this forked version.
The primary addition in this fork is the
html-css-class-completion.CustomLanguages configuration. This allows users to specify custom regex patterns, enabling CSS autocompletion in various languages.
Here's an example showcasing how to set up autocompletion for different languages:
"cpp": "auto\\s+class[nN]ame\\s*=\\s*\"([\\w- ]*$)" // Strings are also acceptable
Admittedly, I'm not experienced in vscode extension development and am still grasping the intricacies of regex. The regex patterns provided above were adapted from the original extension's source code. To assist in configuring your own setups, here are the original regex expressions from the extension's source code:
const cssClassRegex = /@apply ([.\w- ]*$)/;
const htmlClassRegex = /class=["|'](https://github.com/kang-sw/HTML-CSS-Class-Completion/blob/HEAD/[\w- ]*$)/;
const jsAndJsxClassRegex = [/className=["|'](https://github.com/kang-sw/HTML-CSS-Class-Completion/blob/HEAD/[\w- ]*$)/, /class=["|'](https://github.com/kang-sw/HTML-CSS-Class-Completion/blob/HEAD/[\w- ]*$)/];
IntelliSense for CSS class names in HTML
A Visual Studio Code extension that provides CSS class name completion for the HTML
class attribute based on the definitions found in your workspace or external files referenced through the
- Gives you autocompletion for CSS class definitions that can be found in your workspace (defined in CSS files or the in the file types listed in the Supported Language Modes section);
- Supports external stylesheets referenced through
link elements in HTML files;
- Command to manually re-cache the class definitions used in the autocompletion;
- User Settings to override which folders and files should be considered or excluded from the caching process.
Supported Language Modes
- Laravel (Blade)
- TypeScript React (.tsx)
- Vue (.vue) [requires octref.vetur]
- Markdown (.md)
- Embedded Ruby (.html.erb) [requires rebornix.Ruby]
- EJS (.ejs)
- Django template (django-html)
Extended Support for Other Language Modes
It's possible to specify which language modes will have autocompletion. There are three settings for this feature:
html-css-class-completion.HTMLLanguages is for language modes based on HTML, the ones you have the
html-css-class-completion.CSSLanguages currently is for languages like CSS, Sass and Scss, this one is not very useful right now because it only supports the
The language modes listed in the previous section are already defined as default values in these settings, and you can add new ones or remove the already defined ones as necessary.
- "@apply" directive in CSS, SASS and SCSS Files for Tailwind CSS;
- Emmet abbreviations support triggered by typing a "." (comes disabled by default, check the User Settings topic for more information).
You can request new features and contribute to the extension development on its repository on GitHub. Look for an issue you're interested in working on, comment on it to let me know you're working on it and submit your pull request! :D
What's new in version 1.20 (Dec 19, 2020)
- Settings to allow users to specify which language modes will have autocompletion;
- Fix interpretation of classes defined inside media queries.
Check out the changelog for the current and previous updates.
If there are HTML or JS files on your workspace, the extension automatically starts and looks for CSS class definitions. In case new CSS classes are defined, or new CSS files are added to the workspace, and you also want auto-completion for them, just hit the lightning icon on the status bar. Also, you can execute the command by pressing
Cmd+Shift+P for Mac) and then typing "Cache CSS class definitions."
More User Settings
The extension supports a few user settings, changes to these settings will be automatically recognized and the caching process will be re-executed.
Folders and Files
You can change the folders and files the extension will consider or exclude during the caching process by setting the following user settings:
Emmet support comes disabled by default, the reason behind this choice is because it the current implementation simply triggers completion when you type a "." (period) and this behavior might be considered a little annoying, but it might change in the future.