GithubHelp home page GithubHelp logo

htmltools's Introduction

Html Tools

Build status

Download this extension from the VS Marketplace or get the CI build.


Productivity tools for the HTML editor

See the change log for changes and road map.

Features

  • Image hover preview
  • Go to definition of classes and IDs
  • Peek definition
  • Meta tag Intellisense
  • Dynamic Intellisense
  • Find all references
  • Light bulbs
  • Validation

Image hover preview

Image hover

Go to definition

Hit F12 when the cursor is located inside a class or ID attribute. HTML Tools will jump to the location inside CSS, LESS and Sass files.

Peek definition

Hit Alt+F12 when the curser is located inside a class or ID attribute. A peek definition inline code window will appear showing the definition of the class/ID from CSS, LESS and Sass files.

Meta tags

Full Intellisense provided for:

  • Apple iOS
  • Twitter Cards
  • Facebook/OpenGraph
  • Windows 8
  • Internet Explorer 9+
  • Viewport

Dynamic Intellisense

Dynamic Intellisense is where Intellisense is based on other tags and attributes etc.

<label for="here">
<input id="here" /> based on <label> tags
<datalist> IDs

Dynamic Intellisense

Find all references

Hit Shift+F12 when the cursor is located inside a class attribute. HTML Tools will search all CSS, LESS and SASS files for the class name.

Light bulbs

Light bulbs are added for variuos scenarios including:

  • Base64 decoding of images
  • Extract JavaScript to file
  • Remove parent tags
  • Extract Stylesheets to file

Validation

OpenGraph prefix

When working with Facebook/OpenGraph integration, we need to remember to add the prefix attribute to the <head> element.

Microdata

Validates that the itemtype attribute is a valid absolute URL.

rel=logo

Validates that the type attribute has the value image/svg

Contribute

Check out the contribution guidelines if you want to contribute to this project.

For cloning and building this project yourself, make sure to install the Extensibility Tools 2015 extension for Visual Studio which enables some features used by this project.

License

Apache 2.0

htmltools's People

Contributors

madskristensen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

htmltools's Issues

Add ability to go to style definition for class

Installed product versions

  • Visual Studio: 15.2
  • This extension: 1.0.3

Description

It would be nice to be able to go to CSS file where style for a class under cursor is defined

Current behavior

When I press F12 while cursor is under class name in a tag nothing happens

Expected behavior

CSS file is opened and scrolled to a style defined for a class name under cursor. If there are more than one style a list to pick is displayed.

'prefix' attribute on <head> for Open Graph is missing - bug

I have latest version of HTML Tools (1.0.3) with Visual Studio 2017 (latest build - 15.4.5). I get the following validation error in my HTML on all of my <meta property="og: tags:

Warning The 'prefix' attribute on <head> for Open Graph is missing

The prefix="og: http://ogp.me/ns#" attribute is on the html like <html lang="en" prefix="og: http://ogp.me/ns#"> as is recommended at: http://ogp.me/ - so I think this is a bug.

How to add a submenu to the suggestions lightbulb?

Thanks for all these extensions, Mads. Just about everything I know about the topic comes from your code.

Except how to add a submenu to the suggestions lightbulb. I have yet to find a single piece of code that shows how to do it.

Thus, I ask you, the extension's man himself, or anyone kind enough.

Much appreciated.

Preview Image on mouseover doesn't work with ASP.NET Core project

Installed product versions

Visual Studio 2017 Community
HTML Tools 1.0.3

Description

Preview Image on mouseover doesn't work (no image available) since it looks for the image file relative to the current file and not /wwwroot, which is the default pattern for ASP.NET Core.

Steps to recreate

  1. Open View from /Views
  2. Mouseover any img tag

Current behavior

No Image Available

Expected behavior

Image loaded from /wwwroot/{img src value}

I fix would be to first check for file relative to current and if not found then relative to /wwwroot. Or let users set the base path in Settings.

Image preview is broken in some cases

Installed product versions

  • Visual Studio: 2017 Professional
  • This extension: 1.0.3

Description

For some values of an img src attribute image preview is displaying incorrectly. See screenshots.

Steps to recreate

  1. Open a web application project in VS.
  2. Open some Razor view.
  3. Hover img src attribute.

Current behavior

  1. For relative URLs the image is shown as expected.
    local src preview
  2. For HTTP URLs "no image" placeholder is shown with an error below (the URL works in a browser).
    HTTP src preview
  3. For Razor expressions "no image" placeholder is shown, but it covers the whole window and makes editing almost impossible.
    expression src preview

Expected behavior

For valid HTTP URLs the image should load correctly.
For invalid HTTP URLs an error should be shown with correct layout.
For non-URLs nothing should pop up.

It seems that the easiest way to fix that is to remove the "no image" placeholder. It does not add much value over a simple text tool tip.

Peek Definition and Go To Definition no longer work since upgrading to VS v15.8.1.

Installed product versions

  • Visual Studio: 2017 v15.8.1
  • This extension: 1.0.3

Description

Peek Definition and Go To Definition no longer work since upgrading to VS v15.8.1.

Steps to recreate

  1. Web application project, open a vbhtml file.
  2. Click within a class name, then right-click the class name.
  3. Select Go To Definition from the context menu

Current behavior

An error message is displayed (screenshot of error message pasted below.

Expected behavior

The CSS file should be displayed and the previously selected class should be selected.

image

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.