A formatter takes the results of executing the configured hints and transforms them to be consumed by the user. A formatter can output results to a file or the console, in various styles.
To choose a formatter, install its package and add that package name to
the formatters
array within your .hintrc file. Packages within the
@hint/
namespace (like, for example, @hint/formatter-html
) can be
added using their short name.
{
"formatters": ["html"]
}
Since .hintrc accepts formatters as an array of strings, you can specify more than one. An example use case would be wanting a summary printed to the console as well as a full html report.
{
"formatters": [
"summary",
"html"
]
}
Or perhaps you wish you use a custom formatter in addition to or instead
of the official packages. Any package matching the pattern
@hint/formatter-
, webhint-formatter-
, or
@scope/webhint-formatter-
should be a valid candidate.
npm i -D @myOrg/webhint-formatter-bubble-letters
{
"formatters": [
"html",
"@myorg/webhint-formatter-bubble-letters"
]
}
The officially supported formatters that can be installed via npm
are:
-
@hint/formatter-json
does aJSON.stringify()
of the results. Output is not user friendly: -
@hint/formatter-stylish
prints the results in table format indicating the resource, line, and column: -
@hint/formatter-codeframe
shows also the code where the error was found if applicable: -
@hint/formatter-summary
shows a summary of all the warnings and errors found for all the resources: -
@hint/formatter-excel
creates an Excel spreadsheet with a sheet containing the results per resource: -
@hint/formatter-html
creates an HTML page in the folderhint-report/<url_analyzed>
with the result:Note: If you are running custom hints, the buttons "Why is this important" and "How to solve it" will not work.
If you want to implement your own formatter, visit the contributor guide.