Jump to ID or Class Selector in Visual Studio Code

Question

In both Atom and Sublime text, I was able to jump to a particular selector in a CSS file by pressing Cntrl-R and typing the name of the selector.

Is there an extension that can replicate this feature for Visual Studio Code?

Answer 1

You maybe looking for this https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

Press Ctrl+P then type your selector.

Answer 2

It's better to use CSS Navigation which (as the documentation says) :

At beginning, this project is a fork from vscode-css-peek, which uses vscode-css-languageservice as CSS parser, I just fixed some Scss nesting reference issues.

Then I found it eats so much CPU & memory. Eg, one of my project has 280 CSS files out of 5500 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 inputing. Finally I decided to implement a new css parser, which also supports Scss & Less naturally, as a result I created a new extension. The CSS parser is very simple and not 100% strict, but it's fast and very easy to extand.

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. Otherwise, all the functionality will be started only when required by default, so CSS files are loaded only when you begin to search definitions or others. You may change this behavior by specify preloadCSSFiles option.

After files loaded, the extension will track file and directory changes, creations, removals automatically, and reload them if needed. Further more, I found the extension can support class name and id completion by the same core, so I do it with very few codes. Finding references uses another core, I implement it because my work have a heavy CSS part, and I love refactoring CSS codes. I believe few people would need it.