Note: This is drop-in replacement for https://github.com/zignd/HTML-CSS-Class-Completion. Please uninstall that extension before installing this. Otherwise, things can happen.
Find usages:
ID Support:
link
elements in HTML filesSCSS
supportclass
and id
support Work in progress.Both directions (from CSS/SCSS to HTML, Latte... or from HTML, Latte to CSS/SCSS...) are supported. Only changed parts will be re-indexed so this will give you almost instant auto-completion.
We introduced incremental build. In previous versions we had to re-cache all workspace to reflect our atomic changes. This causes high CPU usage and unnecessary delay to our development time. Hence, we introduced this feature. Once you open your VSCode workspace, initial scan will be made and all upcoming changes will be incrementally and instantly reflected to the cache.
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
For SCSS part, I have manually strip comments and do regexp on code. In this way I also able to locate magic methods/classes. For example; If you have .u-pb-{class}
this extension will show you .u-pb-
and leave it class
name filled by you.
Check out the changelog for the current and previous updates.
For more info check CHANGELOG.md
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 Ctrl+Shift+P
(Cmd+Shift+P
for Mac) and then typing "Cache CSS class definitions."
The extension supports a few user settings, changes to these settings will be automatically recognized and the caching process will be re-executed.
You can change the folders and files the extension will consider or exclude during the caching process by setting the following user settings:
"html-css-class-completion.includeGlobPattern"
(default: "**/*.{css,scss,sass,html}"
)"html-css-class-completion.excludeGlobPattern"
(default: ""
)"html-css-class-completion.searchRemoteGlobPattern"
(default: ""
)"html-css-class-completion.remoteStyleSheets"
(default: []
) ...
"html-css-class-completion.remoteStyleSheets": [
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
],
...
UPDATE: Now it's possible to parse remote stylesheets links from HTML, Smarty, EEX and other HTML-compatible files via meta tags. Just enable searchRemoteGlobPattern
and everytime you open workspace, extension will scan and parse those remote files for you.
Example:
{
...
"html-css-class-completion.searchRemoteGlobPattern": "**/*.{svelte,tpl,eex,latte,php,html,twig}",
...
}
When we include SCSS files to show usages, IntelliSense can be slow. This is false
by default. To enable (you've been warned) set this setting to true and restart (required):
"html-css-class-completion.enableScssFindUsage": true,
When we include Template files to show usages, IntelliSense can be very slow. This is false
by default. To enable (you've been warned) set this setting to true and restart (required):
"html-css-class-completion.enableFindUsage": true,
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.
Currently it supports the following languages (those are language identifier): "html", "eex", "latte", "razor", "php", "blade", "vue", "twig", "markdown", "erb", "handlebars", "ejs", "slim", "haml", "typescriptreact", "javascript", "javascriptreact".
"html-css-class-completion.enableEmmetSupport"
(default: false
)