Visual Studio Code extension for AMP HTML ⚡ Validator
This extension makes authoring AMP HTML documents, easy by validating for
errors/warnings as you type within Visual Studio Code editor.
The PROBLEMS (View->Problems) panel renders the
AMP HTML validation error/warning messages with the row and column number in
the document from where error/warning were reported.
Related row is focused in the editor when an error/warning is selected.
Hovering over the error in the editor reveals a tooltip with error details.
This extension uses AMP HTML validation available at:
Current amphtml-validator version: 1.0.23
Current implementation of amphtml-validator package fetches the latest version
of validator.js from CDN, so
this extension requires internet connection.
Issue #12 is open to make this extension work offline.
How to use AMP HTML Validator extension
After installing the extension from
VS Code Marketplace[coming soon], the
extension is activated when
HTML file is opened. If extension finds one of
the AMP specific attributes(shown below) defined in
<html> tag, executes the
AMP HTML validator for the document and renders the errors/warnings as
reported by validator in the PROBLEMS panel, if any.
Following are all valid examples of an AMP HTML document
<html lang="en" ⚡>
<html amp4ads lang="en">
<html amp="" id="a">
Full list of valid amp attributes are:
⚡|amp|⚡4ads|amp4ads|⚡4email|amp4email (case insensitive)
All AMP HTML validator Errors/Warnings are reported in PROBLEMS view
(Open the panel by
View->Problems, if not already opened).
Issues are removed from the PROBLEMS panel when fixed in the editor.
Each AMP HTML validation error/warning row has 3 parts as under:
[<TYPE>] <ERROR_MESSAGE> : <LINK> (LINE_NUM, COLUMN_NUM)
TYPE: AMP HTML document type as defined in
ERROR_MESSAGE: The error/warning message as reported by the AMP HTML validator.
DOCUMENTATION_LINK: Link to AMP HTML documentation about this error.
(LINE_NUM, COLUMN_NUM): Starting location of the error in the editor.
The PROBLEMS panel might render other errors/warnings
css) since, VS Code has build-in support for validating
css, or you might have installed other extensions for
additional validations of
html documents. Each error reported by the
various extensions on the same document will have different
Note that number of Errors/Warnings are also rendered in the
for a quick view of Errors/Warnings across all opened files. The total
number of errors/warnings includes
errors/warnings. This may also include errors/warnings reported by other
Sample AMP HTML Validator extension in action
The above screenshot renders the PROBLEMS panel with all errors/warnings
across all open files. The
file explorer also renders the numbers of
errors shown next to the file name.
(Red indicates errors, Green indicates warnings).
Q. What are other options if I am not using VS Code as an editor?
AMP HTML has multiple options to validate the documents
- In Browser validator
- URL: #development=1 (Chrome DevTools console)
- Browser extension (Chrome & Opera)
- npm package (https://www.npmjs.com/package/amphtml-validator)
- gulp task gulp-amp-html-validator
- AMP Bin
Q. Will there be any performance implications due to this extension?
This extension is using the Language Server Protocol,
which run in its own process to avoid performance cost.
Q. What file types are supported?
AMP HTML documents are
HTML douments and by default VS Code supports
.htm file extensions but VS Code can be extended to support
HTML files with other extensions:
Adding above VS Code setting (
Code -> Preferences -> Settings)
.hbs file types for AMP HTML validation.
Q. Any plans to support other editors?
Since the extension is developed using the Language Server Protocol, it would be possible
to reuse the Language Server and develop extension/plugin for other
Language Server Protocol
supported editors in the future.
Currently there are no near future plans to support other editors but
discussion is underway to see how this effort can be extended for other
popular editors. Atom could be the next one.
##Q. Can I configure this extension?
The following two settings will be available in the future.
Settings are available to change how this extension responds.
(Use Code->Preferences->Settings to activate VS Code settings editor)
Enable/Disable AMP HTML validation without uninstall
"amphtml.validator.enabled": true|false // Default:
Keep/Remove AMP HTML validation errors after closing the document
"amphtml.validator.keepIssuesAfterDocumentClose": false //Default: