This site uses cookies for analytics. By continuing to browse this site, you agree to this use.
A JS Foundation Project

Parsers

Parsers

A parser is capable of understanding more deeply a resource and expose that information via events so hints can be built on top of this information. E.g.: a JavaScript parser built on top of ESLint so hints for analyzing JavaScript files can be built.

You can specify what parsers you want to use via the .hintrc configuration file:

{
"parsers": ["parser1", "parser2"]
}

List of official parsers

  • babel-config A Babel configuration parser which validates the provided json so hints analyzing .babelrc files can be built.

  • css: A CSS parser built on top of PostCSS so hints can analyze CSS files.

  • 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.

  • javascript: A JavaScript parser built on top of ESLint so hints for analyzing JavaScript files can be built.

  • manifest: A parser that validates if a web app manifest is valid and emit information related to it.

  • typescript-config: A parser that validates if the TypeScript configuration is valid.

How to use a parser

To use a parse you need to subscribe to the event(s) that the parser dispatches. Please check the details page of each parser to have more information about the events emitted by them.

Example: javascript parser

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 be Internal javascript.
  • sourceCode: a eslint SourceCode object.

Example: css and javascript parsers

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) => {
...
});
}