Skip to content

A vscode extension for peeking at CSS definitions from a class or id tag in HTML

License

Notifications You must be signed in to change notification settings

pranaygp/vscode-css-peek

Repository files navigation

Build Status Installs Version codecov

Functionality

This extension extends HTML and ejs code editing with Go To Definition support for css (classes and IDs) found in strings within the source code.

This was heavily inspired by a similar feature in Brackets called CSS Inline Editors.

working

The extension supports all the normal capabilities of symbol definition tracking, but does it for css selectors (classes and IDs). 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)

See editor docs for more details

Contributing

Contributions are greatly appreciated. Please fork the repository and submit a pull request.

Changelog

2.0.1

  • Fix an error wherby the Overview was missing on the Visual Studio Marketplace

2.0.0

  • A complete rewrite featuring the new Language Server Protocol
  • Added scss support
  • Added multi definition support (provides all CSS rules matching the selector)
  • Added support for HTML tag selectors

1.3.3

  • New Logo

1.3.0

  • Add configuration option to ignore file from CSS lookup

1.2.4

  • Crucial bug fix

1.2.3

  • Workaround for bug if large number of files exist

1.2.2

  • Better recognition of CSS selector word from cursor position
  • Optimize code for fewer file lookups

1.2.1

  • Fix README typo

1.2.0

  • Add less support
  • Configure search file extensions using "css_peek.searchFileExtensions"

1.1.0

  • Update Icon

1.0.0

About

A vscode extension for peeking at CSS definitions from a class or id tag in HTML

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published

Languages

  • TypeScript 91.7%
  • JavaScript 3.6%
  • Python 1.0%
  • HTML 0.9%
  • Hack 0.6%
  • CSS 0.6%
  • Other 1.6%