A Visual Studio Code extension that provides CSS class name completion for the HTML class
attribute based on the CSS class definitions that can be found in your workspace or in external files referenced through the link
element.
- Gives you autocompletion for CSS class definitions that can be found in your workspace (defined in CSS files or the in 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
- HTML
- Razor
- PHP
- Laravel (Blade)
- JavaScript
- JavaScript React (.jsx)
- TypeScript React (.tsx)
- Vue (.vue) [requires octref.vetur]
- Twig
- Markdown (.md)
- Embedded Ruby (.html.erb) [requires rebornix.Ruby]
- Handlebars
- EJS (.ejs)
- @apply in CSS, SASS and SCSS Files for Tailwind CSS
You can request new features and/or 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
- Added support for Tailwind CSS's @apply function in CSS, SASS and SCSS.
Check out the change log 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, simply hit the lightning icon on the status bar and execute the command by pressing Ctrl+Shift+P
(cmd+Shift+P
for Mac) and then typing "Cache CSS class definitions".
You can omit or exclusively include the folders to search for by using these configurations:
css-class-completion.includeGlobPattern
or css-class-completion.excludeGlobPattern
.