Chore: Update docs to webhint 6.1.10

Author: antross

docs/docs/contributor-guide/getting-started/events/index.html

@@ -7,7 +7,7 @@
 <span class="hljs-keyword">export</span> <span class="hljs-keyword">type</span> <span class="hljs-title class_">StyleParse</span> = <span class="hljs-title class_">Event</span> &amp; &#123;
     <span class="hljs-attr">ast</span>: <span class="hljs-title class_">Root</span>;
     <span class="hljs-attr">code</span>: <span class="hljs-built_in">string</span>;
-    <span class="hljs-attr">element</span>: HTMLElement | <span class="hljs-literal">null</span>;
+    <span class="hljs-attr">element</span>: <span class="hljs-title class_">HTMLElement</span> | <span class="hljs-literal">null</span>;
 &#125;;
 
 <span class="hljs-keyword">export</span> <span class="hljs-keyword">type</span> <span class="hljs-title class_">StyleEvents</span> = <span class="hljs-title class_">Events</span> &amp; &#123;
@@ -47,13 +47,13 @@ <h2 id=elementltelement-typegt><code>element::&lt;element-type&gt;</code><a href
     <span class="hljs-comment">/** The URI of the resource firing this event. */</span>
     <span class="hljs-attr">resource</span>: <span class="hljs-built_in">string</span>;
     <span class="hljs-comment">/** The visited element. */</span>
-    <span class="hljs-attr">element</span>: HTMLElement;
+    <span class="hljs-attr">element</span>: <span class="hljs-title class_">HTMLElement</span>;
 &#125;</pre></td></tr></table></figure><h2 id=fetchendltresource-typegt><code>fetch::end::&lt;resource-type&gt;</code><a href="#fetchendltresource-typegt" class="headerlink" title="fetch::end::&lt;resource-type&gt;"></a></h2><p>Event is emitted <strong>when</strong> the content of a <code>resource</code> (<code>js</code>, <code>css</code>,
 <code>image</code>, etc.) has finished downloading.</p>
 <p><strong>Format:</strong></p>
 <figure class="highlight ts"><table><tr><td class="code"><pre><span class="hljs-keyword">type</span> <span class="hljs-title class_">FetchEnd</span> = &#123;
     <span class="hljs-comment">/** The element that initiated the request. */</span>
-    <span class="hljs-attr">element</span>: HTMLElement;
+    <span class="hljs-attr">element</span>: <span class="hljs-title class_">HTMLElement</span>;
     <span class="hljs-comment">/** The URL of the target */</span>
     <span class="hljs-attr">resource</span>: <span class="hljs-built_in">string</span>;
     <span class="hljs-comment">/** The request made to fetch the target. */</span>
@@ -67,7 +67,7 @@ <h2 id=elementltelement-typegt><code>element::&lt;element-type&gt;</code><a href
     <span class="hljs-comment">/** The URL of the target. */</span>
     <span class="hljs-attr">resource</span>: <span class="hljs-built_in">string</span>;
     <span class="hljs-comment">/** The element that initiated the request. */</span>
-    <span class="hljs-attr">element</span>: HTMLElement;
+    <span class="hljs-attr">element</span>: <span class="hljs-title class_">HTMLElement</span>;
     <span class="hljs-comment">/** The error found. */</span>
     <span class="hljs-attr">error</span>: <span class="hljs-built_in">any</span>;
     <span class="hljs-comment">/** The redirects performed for the url. */</span>
@@ -101,7 +101,7 @@ <h2 id=traversedown><code>traverse::down</code><a href="#traversedown" class="he
 <p><strong>Format:</strong></p>
 <figure class="highlight ts"><table><tr><td class="code"><pre><span class="hljs-keyword">type</span> <span class="hljs-title class_">TraverseDown</span> = &#123;
     <span class="hljs-comment">/** The parent element to be traversed. */</span>
-    <span class="hljs-attr">element</span>: HTMLElement;
+    <span class="hljs-attr">element</span>: <span class="hljs-title class_">HTMLElement</span>;
     <span class="hljs-comment">/** The URL of the target. */</span>
     <span class="hljs-attr">resource</span>: <span class="hljs-built_in">string</span>;
 &#125;</pre></td></tr></table></figure><h2 id=traverseend><code>traverse::end</code><a href="#traverseend" class="headerlink" title="traverse::end"></a></h2><p>Event is emitted <strong>when</strong> the <code>connector</code> has finished traversing
@@ -122,7 +122,7 @@ <h2 id=traversedown><code>traverse::down</code><a href="#traversedown" class="he
 <p><strong>Format:</strong></p>
 <figure class="highlight ts"><table><tr><td class="code"><pre><span class="hljs-keyword">type</span> <span class="hljs-title class_">TraverseUp</span> = &#123;
     <span class="hljs-comment">/** The parent element that was traversed. */</span>
-    <span class="hljs-attr">element</span>: HTMLElement;
+    <span class="hljs-attr">element</span>: <span class="hljs-title class_">HTMLElement</span>;
     <span class="hljs-comment">/** The URL of the target. */</span>
     <span class="hljs-attr">resource</span>: <span class="hljs-built_in">string</span>;
 &#125;</pre></td></tr></table></figure><h2 id=can-evaluatescript><code>can-evaluate::script</code><a href="#can-evaluatescript" class="headerlink" title="can-evaluate::script"></a></h2><p>Event is emitted <strong>when</strong> the <code>connector</code> is ready to evaluate

docs/docs/contributor-guide/guides/create-custom-hint/index.html

@@ -82,7 +82,7 @@ <h2 id=how-do-we-write-the-hint>How do we write the hint?<a href="#how-do-we-wri
 footer element in the page and use that for our check - if the HTML doesn’t
 include the target string, we simply file a report by calling <code>context.report</code>
 with the <em>resource</em> (URL), the <em>element</em> (footer), and the <em>error message</em>.</p>
-<figure class="highlight ts"><table><tr><td class="code"><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">FooterHint</span> <span class="hljs-keyword">implements</span> IHint &#123;
+<figure class="highlight ts"><table><tr><td class="code"><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">FooterHint</span> <span class="hljs-keyword">implements</span> <span class="hljs-title class_">IHint</span> &#123;
     <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">readonly</span> <span class="hljs-attr">meta</span>: <span class="hljs-title class_">HintMetadata</span> = &#123;
         <span class="hljs-attr">docs</span>: &#123;
             <span class="hljs-attr">category</span>: <span class="hljs-title class_">Category</span>.<span class="hljs-property">other</span>,
@@ -133,7 +133,7 @@ <h2 id=how-do-we-config-the-hint>How do we config the hint?<a href="#how-do-we-c
 Meanwhile, we also need to specify the JSON schema of the configurable options
 in the <code>meta</code> part of the hint constructor. This helps the hint to decide if a
 config option is valid before using it.</p>
-<figure class="highlight ts"><table><tr><td class="code"><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">CopyrightHint</span> <span class="hljs-keyword">implements</span> IHint &#123;
+<figure class="highlight ts"><table><tr><td class="code"><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">CopyrightHint</span> <span class="hljs-keyword">implements</span> <span class="hljs-title class_">IHint</span> &#123;
     <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">readonly</span> <span class="hljs-attr">meta</span>: <span class="hljs-title class_">HintMetadata</span> = &#123;
         <span class="hljs-attr">docs</span>: &#123;
             <span class="hljs-attr">category</span>: <span class="hljs-title class_">Category</span>.<span class="hljs-property">other</span>,
@@ -158,7 +158,7 @@ <h2 id=how-do-we-config-the-hint>How do we config the hint?<a href="#how-do-we-c
             stringToBeIncluded = (context.<span class="hljs-property">hintOptions</span> &amp;&amp; context.<span class="hljs-property">hintOptions</span>.<span class="hljs-property">stringToBeIncluded</span>) || <span class="hljs-string">`(c) webhint`</span>;
         &#125;;
 
-        <span class="hljs-keyword">const</span> validateFooter = <span class="hljs-keyword">async</span> (<span class="hljs-attr">elementFound</span>: <span class="hljs-title class_">ElementFound</span>) =&gt; &#123; <span class="hljs-comment">/* ... */</span> &#125;;
+        <span class="hljs-keyword">const</span> <span class="hljs-title function_">validateFooter</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params">elementFound: ElementFound</span>) =&gt; &#123; <span class="hljs-comment">/* ... */</span> &#125;;
 
         <span class="hljs-title function_">loadHintConfigs</span>();
 

docs/docs/contributor-guide/how-to/common-hint-scenarios/index.html

@@ -48,7 +48,7 @@ <h2 id=evaluate-javascript-in-the-page-context>Evaluate JavaScript in the page c
 
 context.evaluate(script);</pre></td></tr></table></figure><h2 id=ignore-connectors>Ignore connectors<a href="#ignore-connectors" class="headerlink" title="Ignore connectors"></a></h2><p>If your hint does not work properly with certain connectors you can
 use the property <code>ignoreConnectors</code> so it is not run when they are used.</p>
-<figure class="highlight ts"><table><tr><td class="code"><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyHint</span> <span class="hljs-keyword">implements</span> IHint &#123;
+<figure class="highlight ts"><table><tr><td class="code"><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyHint</span> <span class="hljs-keyword">implements</span> <span class="hljs-title class_">IHint</span> &#123;
     <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">readonly</span> <span class="hljs-attr">meta</span>: <span class="hljs-title class_">HintMetadata</span> = &#123;
         <span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;my-hint&#x27;</span>,
         <span class="hljs-attr">ignoredConnectors</span>: [<span class="hljs-string">&#x27;jsdom&#x27;</span>]
@@ -64,7 +64,7 @@ <h2 id=evaluate-javascript-in-the-page-context>Evaluate JavaScript in the page c
 and then collect the results as late as possible. This means you
 will have to listen to <code>scan::start</code> and <code>scan::end</code> events respectively.
 The <code>create</code> method of your hint should be similar to the following:</p>
-<figure class="highlight ts"><table><tr><td class="code"><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyHint</span> <span class="hljs-keyword">implements</span> IHint &#123;
+<figure class="highlight ts"><table><tr><td class="code"><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyHint</span> <span class="hljs-keyword">implements</span> <span class="hljs-title class_">IHint</span> &#123;
     <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">readonly</span> <span class="hljs-attr">meta</span>: <span class="hljs-title class_">HintMetadata</span> = &#123; <span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;my-hint&#x27;</span> &#125;
 
     <span class="hljs-keyword">public</span> <span class="hljs-title function_">constructor</span>(<span class="hljs-params">context: HintContext</span>) &#123;
@@ -102,7 +102,7 @@ <h2 id=validate-javascript>Validate JavaScript<a href="#validate-javascript" cla
 <p>Here is an example hint that use the parser:</p>
 <figure class="highlight ts"><table><tr><td class="code"><pre><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> eslint <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;eslint&#x27;</span>;
 
-<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">ScriptSemiColonHint</span> <span class="hljs-keyword">implements</span> IHint &#123;
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">ScriptSemiColonHint</span> <span class="hljs-keyword">implements</span> <span class="hljs-title class_">IHint</span> &#123;
     <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">readonly</span> <span class="hljs-attr">meta</span>: <span class="hljs-title class_">HintMetadata</span> = &#123;
         <span class="hljs-attr">docs</span>: &#123;
             <span class="hljs-attr">category</span>: <span class="hljs-title class_">Category</span>.<span class="hljs-property">compatibility</span>,

docs/docs/contributor-guide/how-to/configuration/index.html

@@ -32,7 +32,7 @@ <h2 id=quick-example>Quick example<a href="#quick-example" class="headerlink" ti
 </ul>
 <p>Imagine you want to create a configuration that focuses only on security.
 First you will create a new package in an empty folder:</p>
-<figure class="highlight bash"><table><tr><td class="code"><pre>mkdir webhint-configuration-security
+<figure class="highlight bash"><table><tr><td class="code"><pre><span class="hljs-built_in">mkdir</span> webhint-configuration-security
 <span class="hljs-built_in">cd</span> webhint-configuration-security
 npm init</pre></td></tr></table></figure><p>Answer all the questions from the wizard making sure to:</p>
 <ul>

docs/docs/contributor-guide/how-to/connector/index.html

@@ -50,7 +50,7 @@ <h2 id=develop-a-full-connector>Develop a “full” connector<a href="#develop-
 <p>For more details about how the events look like and the properties they
 should implement, see the <a href="../../getting-started/events/" >events page</a>.</p>
 <p>Also, connectors need to expose some methods:</p>
-<figure class="highlight ts"><table><tr><td class="code"><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">interface</span> IConnector &#123;
+<figure class="highlight ts"><table><tr><td class="code"><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">interface</span> <span class="hljs-title class_">IConnector</span> &#123;
     <span class="hljs-comment">/** The original DOM of the resource collected. */</span>
     <span class="hljs-attr">dom</span>: <span class="hljs-built_in">object</span>;
     <span class="hljs-comment">/** The original HTML of the resource collected. */</span>
@@ -66,7 +66,7 @@ <h2 id=develop-a-full-connector>Develop a “full” connector<a href="#develop-
     <span class="hljs-comment">/** Evaluates the given JavaScript `code` asynchronously in the target. */</span>
     evaluate(<span class="hljs-attr">code</span>: <span class="hljs-built_in">string</span>): <span class="hljs-title class_">Promise</span>&lt;<span class="hljs-built_in">any</span>&gt;;
     <span class="hljs-comment">/** Finds all the nodes that match the given query. */</span>
-    <span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-attr">query</span>: <span class="hljs-built_in">string</span>): HTMLElement[];
+    <span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-attr">query</span>: <span class="hljs-built_in">string</span>): <span class="hljs-title class_">HTMLElement</span>[];
 &#125;</pre></td></tr></table></figure><h2 id=how-to-test-a-full-connector>How to test a “full” connector<a href="#how-to-test-a-full-connector" class="headerlink" title="How to test a “full” connector"></a></h2><p>To make sure your connector is a “full” connector, it has to pass the
 following tests:</p>
 <ol>

docs/docs/contributor-guide/how-to/formatter/index.html

@@ -6,9 +6,9 @@
 <p>The following is a basic <code>formatter</code> that <code>.stringify()</code>s the results:</p>
 <!-- eslint-disable require-await -->
 
-<figure class="highlight js"><table><tr><td class="code"><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">JSONFormatter</span> implements IFormatter &#123;
+<figure class="highlight js"><table><tr><td class="code"><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">JSONFormatter</span> implements <span class="hljs-title class_">IFormatter</span> &#123;
     public <span class="hljs-keyword">async</span> <span class="hljs-title function_">format</span>(<span class="hljs-params">messages: Problem[], options: FormatterOptions = &#123;&#125;</span>) &#123;
-        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable constant_">JSON</span>.<span class="hljs-title function_">stringify</span>(messages, <span class="hljs-literal">null</span>, <span class="hljs-number">2</span>));
+        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">stringify</span>(messages, <span class="hljs-literal">null</span>, <span class="hljs-number">2</span>));
     &#125;
 &#125;</pre></td></tr></table></figure><!-- eslint-enable require-await -->
 
@@ -32,7 +32,7 @@
 
 <figure class="highlight js"><table><tr><td class="code"><pre><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> _ <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;lodash&#x27;</span>;
 
-<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">JSONFormatter</span> implements IFormatter &#123;
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">JSONFormatter</span> implements <span class="hljs-title class_">IFormatter</span> &#123;
     <span class="hljs-comment">/** Format the problems grouped by `resource` name and sorted by line and column number */</span>
     public <span class="hljs-keyword">async</span> <span class="hljs-title function_">format</span>(<span class="hljs-params">messages: Problem[], options: FormatterOptions = &#123;&#125;</span>) &#123;
         <span class="hljs-keyword">const</span> resources = _.<span class="hljs-title function_">groupBy</span>(messages, <span class="hljs-string">&#x27;resource&#x27;</span>);
@@ -41,7 +41,7 @@
             <span class="hljs-keyword">const</span> sortedMessages = _.<span class="hljs-title function_">sortBy</span>(msgs, [<span class="hljs-string">&#x27;location.line&#x27;</span>, <span class="hljs-string">&#x27;location.column&#x27;</span>]);
 
             <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`<span class="hljs-subst">$&#123;resource&#125;</span>: <span class="hljs-subst">$&#123;msgs.length&#125;</span> issues`</span>);
-            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable constant_">JSON</span>.<span class="hljs-title function_">stringify</span>(sortedMessages, <span class="hljs-literal">null</span>, <span class="hljs-number">2</span>));
+            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">stringify</span>(sortedMessages, <span class="hljs-literal">null</span>, <span class="hljs-number">2</span>));
         &#125;);
     &#125;
 &#125;</pre></td></tr></table></figure><!-- eslint-enable require-await -->