HTML Tools

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

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

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

Mads Kristensen