Skip to content
Permalink
Browse files

Docs: Update `formatterOptions` in `formatter` documentation

Fix #2820
Close #2833
  • Loading branch information...
jaspreet57 authored and antross committed Aug 23, 2019
1 parent 6b26a32 commit 3aba15082be60e6f1a5743850901227751ff1a8b
Showing with 21 additions and 7 deletions.
  1. +21 −7 packages/hint/docs/contributor-guide/how-to/formatter.md
@@ -4,7 +4,7 @@ A `formatter` formats the results of `webhint`: from crafting `JSON` to
connecting to a database and storing the results in it.

To create one, you will need a class that implements the interface
`IFormatter`. This inteface has an `async` method `format` that
`IFormatter`. This interface has an `async` method `format` that
receives an array of `message`s if any issues have been found.

The following is a basic `formatter` that `.stringify()`s the results:
@@ -25,17 +25,24 @@ A `message` looks like this:

```json
{
"column": "number", // The column number where the issue was found if applicable.
"line": "number", // The line number where the issue was found if applicable.
"location": {
"column": "number", // The column number where the issue was found if applicable.
"line": "number", // The line number where the issue was found if applicable.
},
"message": "string", // The human friendly detail of the error.
"sourceCode": "string", // The piece of code where the issue was found if applicable.
"resource": "string", // The URL or name of the asset with the issue.
"severity": "number" // 1 (warning), 2 (error).
"hintId": "string", // The name of the triggered hint.
"category": "Category", // The category of the triggered hint. Where type `Category` is enum of values : 'accessibility', 'development', 'compatibility', 'other', 'pwa', 'performance', 'pitfalls' and 'security'.
"severity": "Severity", // The severity of the hint based on the actual configuration. Where type `Severity` is enum of values : 'off', 'warning' and 'error'.
"codeLanguage": "string" // The language of the sourceCode if applicable.
}
```

With this, you can group the issues by `resource` and sort them by
`line` and `column`. Using the previous example and `lodash` will
look as follows:
`location.line` and `location.column`.

Using the previous example and `lodash`, `formatter` will look as follows:

<!-- eslint-disable require-await -->

@@ -48,7 +55,7 @@ export default class JSONFormatter implements IFormatter {
const resources = _.groupBy(messages, 'resource');
_.forEach(resources, (msgs, resource) => {
const sortedMessages = _.sortBy(msgs, ['line', 'column']);
const sortedMessages = _.sortBy(msgs, ['location.line', 'location.column']);
console.log(`${resource}: ${msgs.length} issues`);
console.log(JSON.stringify(sortedMessages, null, 2));
@@ -63,12 +70,19 @@ The `options` parameter is as follows:

```ts
export type FormatterOptions = {
config?: UserConfig;
/** Start time (queued in online scanner) ISO string */
date?: string;
isScanner?: boolean;
/** Language used for localization */
language?: string;
noGenerateFiles?: boolean;
/** The file to use to output the results requested by the user */
output?: string;
resources?: HintResources;
/** The time it took to analyze the URL */
scanTime?: number;
status?: string;
/** The analyzed URL */
target?: string;
/** webhint's version */

0 comments on commit 3aba150

Please sign in to comment.
You can’t perform that action at this time.