Html Tools 2019
Download this extension from the VS Marketplace or get the CI build.
Productivity tools for the HTML editor
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