Provides CSS Completion, Finding Definition, Finding References, Hover, Workspace Symbols services for HTML, JS, TS, JSX, Vue and more languages across whole workspace.
Since v2.2.0, this plugin provides full CSS Variable service include Definition / Completion / Reference / Hover.
And it provides color preview besides color type css variables, recently supported color formats: hex, rgb, rgba, hsl, hsla.
When mouse hover at a Class Name / Id / CSS Variable, will show it's description (leading comment) and first several style properties.
You may configure maxHoverStylePropertyCount to specify How Many Style Properties to show. If you don't want style properties, set maxHoverStylePropertyCount to 0.
Provides Class Name/ Id / CSS Variable completion for your HTML files, and if you have specified some class name or id in HTML files, can also complete them in CSS files.
Choose Go to definition or Peek definition, the extension will search related CSS & Scss & Less selectors in current workspace folder.
The places you can goto definitions:
- HTML (or files whose extension included by
activeHTMLFileExtensionsoption): <html-tag>, class="class-name", id="id-name". - Jquery & DOM Selector: $('
class-name'), x.querySelector('class-name'), x.querySelectorAll('class-name'). - CSS Variables:
var(--css-variable-name). - JSX & TSX: className="
class-name", className={"class-name"} and others. - Vue: :class="
class-name", :class="{'class-name': ... }" - If want more, give me a feedback.
Supports looking for CSS selector references across all HTML & CSS files of workspace folder.
When your workspace folder having too much HTML like files, parsing them all may cause stuck, so it limits to read at most 500 files.
Allows to search workspace symbols from CSS & Scss & Less files across all activated workspace folders.
You may open workspace symbol popup by Go / Goto Symbol in Workspace, or use shortcut key Ctrl+T to open it.
- Can goto referenced files after clicking url part of
<link href="...">or@import "...", and several more. - Completions sort by numbers, e.g.:
.class1,.class2,.class10.
Note that the JSX template doesn't provide completion for attribute value by default, you may trigger it manually by clicking Ctrl + Space, or change settings:
editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true
},| Name | Description |
|---|---|
activeHTMLFileExtensions |
The languages of the html files, in where you can go to definition. Default value is ["html", "ejs", "erb", "php", "hbs", "js", "ts", "jsx", "tsx", "vue", "twig"]. |
activeCSSFileExtensions |
The extensions of the CSS files, only the matched files you can go to and peek. Default value is ["css", "less", "scss"]. Currently not support other languages, you can specify more extensions, but the related files will be parsed as CSS. |
excludeGlobPatterns |
A glob pattern, defines paths to exclude from when searching for CSS definitions. Default value is ["**/node_modules/**", "**/bower_components/**", "**/vendor/**", "**/coverage/**"]. |
alwaysIncludeGlobPatterns |
A glob pattern, which always use / as a path separator, files match will always be included even they match excludeGlobPatterns or listed in .gitignore or .npmignore, or out of workspace directory. Strongly suggest you specifies the full start path, or relative path of current workspace, but should not specifies as start with **/. Otherwise, if you don't want specifying this, just open the files you want to import in vscode works too. |
searchAcrossWorkspaceFolders |
When false by default, only search CSS definition in current workspace folder. If your workspace folder requires css references from another workspace folder in current workspace, you should set this to true. |
ignoreCustomAndComponentTagDefinition |
When true by default, Custom-Element or Component tag (like React Component) definition going from HTML to CSS will be ignored, such that it goes to it's custom-element or component definition place directly which has implemented by other plugins. |
ignoreFilesBy |
Specifies this to ignore files and directories list in .gitignore or .npmignore when looking for css definitions. Default value is [".gitignore"]. |
maxHoverStylePropertyCount |
When mouse hover at a class or id attribute, how many style properties at most should show. Default value is 4. |
enableLogLevelMessage |
Whether to enable log level message, set it to true for debugging. |
enableGoToDefinition |
Whether to enable goto definition service, default value is true. |
enableWorkspaceSymbols |
Whether to enable workspace symbol service, default value is true. |
enableIdAndClassNameCompletion |
Whether to enable id and class name completion service, default value is true. |
enableFindAllReferences |
Whether to enable finding references service, default value is true. |
enableHover |
Whether to enable id and class name hover service, default value is true. |
enableCSSVariableColor |
Whether to enable css variable color preview, if enabled, will show a color preview box besides color type css variables. default value is true. |
disableOwnCSSVariableCompletion |
Whether to disable css variable completion within a single css document, to make it not repeat with vscode itself generated completions. Note set it to true will also disable css variable completion within functions like color-mix(), and css variable value preview in completion list. default value is false. |
I'm a heavy CSS developer, I have tried vscode-css-peek in 2019, but I found it eats so much CPU & memory. E.g., one of my project has 280 CSS files, includes 6 MB codes. On my MacBook Pro, it needs 7s to load (1.3s to search files and 6s to parse), and uses 700 MB memory. Otherwise it keeps parsing files every time you input a character, if CSS document is more than 100 KB, CPU usage will keep high when inputting.
Later on my vocation I decided to implement a new css parser, as a result I created a new extension. The CSS parser is very simple and cares about only the plugin should care, it's fast and very easy to extend. Now it costs about 0.8s to search files, and 0.5s to parse them. Memory usage in caching parsed results is only about 40 MB.
By the same parser, finding definitions, completions, references, hover are simply implemented.
I loaded 100 MB (0.9 M declarations, 2.8 M lines) CSS files for stress test, it took 8s to parse them, and used about 850 MB memory. After 1 minute, the memory usage fell back to 550 MB. Searching definitions across all 0.9 M declarations cost about 50ms, searching workspace symbols cost about 500ms, and searching completions cost about 230ms.
My environment is Win10, MacBook Pro 2014 version, with power on.
This plugin has simple and clean codes after version 2.0, I hope it can grow and serve more frontend developers.
So please give your feedback, thanks.
No need to, this plugin will automatically restart after settings get changed, and reload files after they get changed on VSCode or disk.
But if an imported file is out of current workspace, change it outside of VSCode will cause this plugin can't detect and re-parse it. You may simply open it in VSCode to make current plugin can track it.
This plugin itself will never generate repetitive completion items, but it would be normal that completions items generated by other plugins repeat with this plugin.
A frequently happened problem is css variable completion repetition -- vscode has provided css variable completion within each single css files, so you will found they get repetitive with current plugin provided.
But this can be avoid by simply set disableOwnCSSVariableCompletion to false.
From v2.3.8, this plugin will exclude the selector where you started to find references from. But VSCode built in CSS features would still provide references which will include it. We are still looking for a way to exclude it, see #102
No, VSCode always sort the definition results, seems in name order. If you don't like duplicate css definitions, you can remove the css in activeCSSFileExtensions option, or compile css file to the same folder, and keep ignoreSameNameCSSFile as true.
There is a ignoreFilesBy option, you may specify to ignore css files listed in your .gitignore.
Firstly this plugin will search definitions within current document and all imported files, if found, will stop searching; if nothing found, will search across whole workspace folder.
By default, definition searching is limited in the same workspace folder, that means when you choose Go to definition in a html file, the definitions you got are always come from the same workspace folder where the html file in. Searching references, completions also works like this.
If you have more than one folders in your workspace, and you definitely need to find definitions across them, set searchAcrossWorkspaceFolders to true.
Workspace symbols are always come from multiple workspace folders, but for each workspace folder, you need to open at least one HTML or CSS file to activate it, then will return results belong to it.
Set searchAcrossWorkspaceFolders to true will also activate services for all workspace folders as soon as possible, then you will get full workspace symbols always.
This extension only compare the last class / id / tag part of the selector.
So when you are trying to find definitions for class="class1", these selectors will match: p .class1, p.class1, .class2.class1, .class1:hover.
MIT