This extension adds support for Go To Definition and Go To Symbol in Workspace for css/scss/less classes and IDs found in HTML/React/Vue/Svelte/Pug/ejs/etc.
This was heavily inspired by a similar feature in Brackets called CSS Inline Editors.
The extension supports all the normal capabilities of symbol definition tracking, but does it for css selectors (classes, IDs and HTML tags). This includes:
Peek: load the css file inline and make quick edits right there. (Ctrl+Shift+F12)
Go To: jump directly to the css file or open it in a new editor (F12)
Hover: show the definition in a hover over the symbol (Ctrl+hover)
In addition, it supports the Symbol Provider so you can quickly jump to the right CSS/SCSS/LESS code if you already know the class or ID name (You need to enter atleast 2 characters for this to work. This command can take a few seconds if you have large stylesheets)
Configuration
cssPeek.supportTags - Enable Peeking from HTML tags in addition to classnames and IDs. React components are ignored, but it's a good idea to disable this feature when using Angular.
cssPeek.peekFromLanguages - A list of vscode language names where the extension should be used.
cssPeek.peekToExclude - A list of file globs that filters out style files to not look for. By default, node_modules and bower_components
