Code Monkey home page Code Monkey logo

vscode-css-peek's Introduction

Build Status Installs Version Open VSX codecov

Backed By

An amazing tool I've used before and they didn't ask me to say that :) - Extension Author


Manage pull requests and conduct code reviews in your IDE with full source-tree context. Comment on any line, not just the diffs. Use jump-to-definition, your favorite keybindings, and code intelligence with more of your workflow.
Learn More

Functionality

This extension extends HTML and ejs code editing with Go To Definition and Go To Symbol in Workspace support for css/scss/less (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, 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

Symbol Provider

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

See editor docs for more details

Contributing

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

Changelog

TODO: Keep the changelog upto date

4.2.0

  • Support VSCode Workspace Trust #107

4.1.1

  • Add CodeStream Banner

3.0.2

  • Use Globs for configuration options instead of RegExp via #61@arch-stack

2.2.0

2.1.1

  • (Temporarily) fix bug #19 by handling errors from findDocumentSymbols

2.1.0

  • Add support for Symbol Provider #18

    Symbol Provider

2.0.3

  • Fix bug #14 that caused CSS Peek to fail after any HTML comments

2.0.2

  • Fix bug that limited the language support only to HTML. Now supports all languages provided by "activeLanguages" config

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

vscode-css-peek's People

Contributors

pranaygp avatar abierbaum avatar raymccl avatar arch-stack avatar dependabot[bot] avatar willstocks avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.