{"id":13448657,"url":"https://github.com/pranaygp/vscode-css-peek","last_synced_at":"2025-10-21T00:38:15.687Z","repository":{"id":37697600,"uuid":"75345598","full_name":"pranaygp/vscode-css-peek","owner":"pranaygp","description":"A vscode extension for peeking at CSS definitions from a class or id tag in HTML","archived":false,"fork":true,"pushed_at":"2025-03-05T07:02:13.000Z","size":3728,"stargazers_count":149,"open_issues_count":35,"forks_count":32,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-05T08:19:24.401Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"abierbaum/vscode-file-peek","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pranaygp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"pranaygp"}},"created_at":"2016-12-02T00:39:50.000Z","updated_at":"2025-03-05T07:02:17.000Z","dependencies_parsed_at":"2023-02-06T02:15:19.377Z","dependency_job_id":null,"html_url":"https://github.com/pranaygp/vscode-css-peek","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pranaygp%2Fvscode-css-peek","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pranaygp%2Fvscode-css-peek/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pranaygp%2Fvscode-css-peek/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pranaygp%2Fvscode-css-peek/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pranaygp","download_url":"https://codeload.github.com/pranaygp/vscode-css-peek/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244937751,"owners_count":20535124,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T05:01:51.883Z","updated_at":"2025-10-21T00:38:15.142Z","avatar_url":"https://github.com/pranaygp.png","language":"TypeScript","funding_links":["https://github.com/sponsors/pranaygp"],"categories":["TypeScript","Awesome Tools"],"sub_categories":["IDEs"],"readme":"![Visual Studio Marketplace Installs](https://img.shields.io/visual-studio-marketplace/i/pranaygp.vscode-css-peek?logo=visualstudiocode)\n![Visual Studio Marketplace Version (including pre-releases)](https://img.shields.io/visual-studio-marketplace/v/pranaygp.vscode-css-peek?logo=visualstudiocode)\n[![Open VSX](https://img.shields.io/badge/Open%20VSX-vscode--css--peek-purple)](https://open-vsx.org/extension/pranaygp/vscode-css-peek)\n\n# 🔍 CSS Peek\n\nThis 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.\n\nThis was heavily inspired by a similar feature in [Brackets](http://brackets.io/) called CSS Inline Editors.\n\n![working](https://github.com/pranaygp/vscode-css-peek/raw/master/readme/working.gif)\n\nThe extension supports all the normal capabilities of symbol definition tracking, but does it for css selectors (classes, IDs and HTML tags). This includes:\n\n- Peek: load the css file inline and make quick edits right there. (`Ctrl+Shift+F12`)\n- Go To: jump directly to the css file or open it in a new editor (`F12`)\n- Hover: show the definition in a hover over the symbol (`Ctrl+hover`)\n\nIn 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)\n\n![Symbol Provider](https://github.com/pranaygp/vscode-css-peek/raw/master/readme/symbolProvider.gif)\n\n## Configuration\n\n- `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.\n- `cssPeek.peekFromLanguages` - A list of vscode language names where the extension should be used.\n- `cssPeek.peekToExclude` - A list of file globs that filters out style files to not look for. By default, `node_modules` and `bower_components`\n\nSee editor docs for more details\n\n- [Visual Studio Code: Goto Definition](https://code.visualstudio.com/docs/editor/editingevolved#_go-to-definition)\n- [Visual Studio Code: Peek](https://code.visualstudio.com/docs/editor/editingevolved#_peek)\n- [Visual Studio Code: Open Symbol By Name](https://code.visualstudio.com/Docs/editor/editingevolved#_open-symbol-by-name)\n\n# Contributing\n\nContributions are greatly appreciated. Please fork the repository and submit a pull request.\n\n# Changelog\n\n## 4.4.0\n\n- upgrade all dependncies\n\n## 4.3.5\n\n- add vscode.dev support (experimental)\n\n## 4.3.4\n\n- fix tests\n\n## 4.3.2\n\n- Improve performance by incrementally caching the stylesheets as and when needed\n\n## 4.2.0\n\n- Support VSCode Workspace Trust [#107](https://github.com/pranaygp/vscode-css-peek/issues/107)\n\n## 4.1.1\n\n- Add CodeStream Banner\n\n## 3.0.2\n\n- Use Globs for configuration options instead of RegExp via [#61](https://github.com/pranaygp/vscode-css-peek/pull/61) ❤ [@arch-stack](https://github.com/arch-stack)\n\n## 2.2.0\n\n- Initial JSX support via [#49](https://github.com/pranaygp/vscode-css-peek/pull/49) ❤ [@ReiMcCl](https://github.com/ReiMcCl)\n\n## 2.1.1\n\n- (Temporarily) fix bug [#19](https://github.com/pranaygp/vscode-css-peek/issues/18) by handling errors from `findDocumentSymbols`\n\n## 2.1.0\n\n- Add support for Symbol Provider [#18](https://github.com/pranaygp/vscode-css-peek/issues/18)\n  \u003e ![Symbol Provider](https://github.com/pranaygp/vscode-css-peek/raw/master/readme/symbolProvider.gif)\n\n## 2.0.3\n\n- Fix bug [#14](https://github.com/pranaygp/vscode-css-peek/issues/14) that caused CSS Peek to fail after any HTML comments\n\n## 2.0.2\n\n- Fix bug that limited the language support only to HTML. Now supports all languages provided by \"activeLanguages\" config\n\n## 2.0.1\n\n- Fix an error wherby the Overview was missing on the Visual Studio Marketplace\n\n## 2.0.0\n\n- A complete rewrite featuring the new [Language Server Protocol](https://github.com/Microsoft/language-server-protocol)\n- Added scss support\n- Added multi definition support (provides all CSS rules matching the selector)\n- Added support for HTML tag selectors\n\n## 1.3.3\n\n- New Logo\n\n## 1.3.0\n\n- Add configuration option to ignore file from CSS lookup\n\n## 1.2.4\n\n- Crucial bug fix\n\n## 1.2.3\n\n- Workaround for bug if large number of files exist\n\n## 1.2.2\n\n- Better recognition of CSS selector word from cursor position\n- Optimize code for fewer file lookups\n\n## 1.2.1\n\n- Fix README typo\n\n## 1.2.0\n\n- Add `less` support\n- Configure search file extensions using \"css_peek.searchFileExtensions\"\n\n## 1.1.0\n\n- Update Icon\n\n## 1.0.0\n\n- Shamelessly copied code from [https://github.com/abierbaum/vscode-file-peek](https://github.com/abierbaum/vscode-file-peek)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpranaygp%2Fvscode-css-peek","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpranaygp%2Fvscode-css-peek","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpranaygp%2Fvscode-css-peek/lists"}