A parser is capable of understanding more deeply a resource and exposing that information via events so hints can be created to use and analyze this data. E.g.: the official JavaScript parser was built on top of ESLint so hints for analyzing JavaScript files could be written.
To utilize a parser, first install its package. The package name should
begin with @hint/parser-
, webhint-parser-
, or
@scope/webhint-parser-
. Once you've installed the appropriate
package, specify which parsers you want to use by adding them to the
parsers
array in your .hintrc configuration file. Packages within the
@hint/
namespace (like, for example, @hint/parser-html
) can be added
using their short name.
If you've installed @hint/parser-example1
and
webhint-parser-example2
, add the following:
{
"parsers": [
"example1",
"webhint-parser-example2"
]
}
-
@hint/parser-babel-config
A Babel configuration parser which validates the provided json so hints analyzing .babelrc files can be built. -
@hint/parser-css
: A CSS parser built on top of PostCSS so hints can analyze CSS files. -
@hint/parser-html
: An HTML parser built on top of jsdom. This parser is only necessary if you are using the local connector and analyzing local HTML files. Otherwise the related HTML events are taken care directly by the other connectors. -
@hint/parser-javascript
: A JavaScript parser built on top of ESLint so hints for analyzing JavaScript files can be built. -
@hint/parser-manifest
: A parser that checks validity of a web app manifest and emits information related to said manifest. -
@hint/parser-typescript-config
: A parser that checks validity of a TypeScript configuration.
To utilize a parser when writing your own hints, subscribe to the event(s) it dispatches and consume the accompanying event payload. Check out the links below for more detailed documentation on each parser, or the hint creation guide for more information on how to create a hint taking advantage of these events.
To create a hint that understands JavaScript you will need to import the
ScriptEvents
object defining events emitted by the javascript
parser, apply it to your HintContext
, and register for
the parse::end::javascript
event.
import { ScriptEvents } from `@hint/parser-javascript`;
public constructor(context: HintContext<ScriptEvents>) {
...
context.on('parse::end::javascript', (event) => {
...
});
}
In this example the event
is of type ScriptParse
which has the
following information:
resource
: the parsed resource. If the JavaScript is in a script tag and not a file, the value will beInternal javascript
.sourceCode
: an eslintSourceCode
object.
To create a hint that understands multiple resource types you will need
to import the event definitions from all target parsers and apply each
of them to your HintContext
using a type intersection (&
).
import { StyleEvents } from `@hint/parser-css`;
import { ScriptEvents } from `@hint/parser-javascript`;
public constructor(context: HintContext<StyleEvents & ScriptEvents>) {
...
context.on('parse::end::css', (styleParseEvent) => {
...
});
context.on('parse::end::javascript', (scriptParseEvent) => {
...
});
}