webhint

https://webhint.io/docs/
Admin
webhint is a customizable linting tool that provides hints to improve web development practices,...
Tokens:105,224
Snippets:1,391
Trust Score:9.9
Update:5 months ago
Show doc for...
Tokens:
Raw
### Basic npm script for testing a local server (won't work)

Source: https://webhint.io/docs/user-guide/development-flow-integration/local-server

This example shows a basic npm script setup for testing a local server. It will not work as intended because `npm start` will not stop, preventing the `hint` command from executing.

```json
{
    "...": "...",
    "scripts": {
        "...": "...",
        "start": "start your web server somehow",
        "test": "npm start && hint http://localhost:8080",
        "...": "..."
    },
    "...": "..."
}
```

--------------------------------

### Install a recommended configuration package

Source: https://webhint.io/docs/contributor-guide/how-to/configuration

Install a pre-existing webhint configuration package as a development dependency.

```bash
npm install `@hint/configuration-web-recommended` --save-dev
```

--------------------------------

### Example Error Message During Installation

Source: https://webhint.io/docs/user-guide/troubleshoot/summary

This is an example of an error message that may appear during webhint installation, particularly when binary packages fail to build on systems like WSL.

```text
Info looking for cached prebuild @ /home/mahome/.npm/_prebuilds/47fbee-iltorb-v2.4.3-node-v59-linux-x64.tar.gz
WARN install No prebuilt binaries found (target=9.10.0 runtime=node arch=x64 libc= platform=linux)
gyp ERR! build error
gyp ERR! stack Error: not found: make
```

--------------------------------

### Install Performance Budget Hint

Source: https://webhint.io/docs/user-guide/hints/hint-performance-budget

Install the performance budget hint using npm. You can save it as a devDependency or install it globally.

```bash
npm install @hint/hint-performance-budget
```

--------------------------------

### Create a new parser using npm init

Source: https://webhint.io/docs/contributor-guide/how-to/parser

Use this command to quickly scaffold a new parser project. It will guide you through the setup with a wizard.

```bash
npm init parser
```

--------------------------------

### Install Custom Hints

Source: https://webhint.io/docs/user-guide/concepts/hints

Install custom hint packages as development dependencies.

```bash
npm -i -D @myOrg/webhint-hint-clever-custom-audit webhint-hint-another-example1
```

--------------------------------

### webhint Configuration with Additional Formatter

Source: https://webhint.io/docs/user-guide/configurations/configuration-web-recommended

This example shows how to extend the web-recommended configuration and add the 'codeframe' formatter to your webhint setup.

```json
{
    "extends": ["web-recommended"],
    "formatters": ["codeframe"]
}
```

--------------------------------

### Install no-inline-styles hint

Source: https://webhint.io/docs/user-guide/hints/hint-no-inline-styles

Install the hint using npm. This is a required step before activating it in the configuration.

```bash
npm install @hint/hint-no-inline-styles --save-dev
```

--------------------------------

### Install webhint as dev dependency (short syntax)

Source: https://webhint.io/docs/user-guide

Use the shorthand 'i' for install and '-D' for --save-dev to add webhint as a development dependency.

```bash
npm i -D hint
```

--------------------------------

### Install security hints and dependencies

Source: https://webhint.io/docs/contributor-guide/how-to/configuration

Install specific security-related hints and other necessary packages like connectors and formatters for your custom configuration.

```bash
npm install --save @hint/disown-opener @hint/https-only @hint/no-disallowed-headers ...
```

```bash
npm install --save @hint/connector-jsdom @hint/formatter-html
```

--------------------------------

### Allowed Server Header Example

Source: https://webhint.io/docs/user-guide/hints/hint-no-disallowed-headers

This example shows a minimal 'Server' header that passes the hint check.

```http
HTTP/... 200 OK

...
Server: apache
```

--------------------------------

### Install windows-build-tools

Source: https://webhint.io/docs/user-guide/troubleshoot/summary

Run this command in an Elevated PowerShell prompt to install necessary build tools on Windows.

```bash
npm install --global windows-build-tools
```

--------------------------------

### Install dependencies and build hint project

Source: https://webhint.io/docs/contributor-guide/guides/create-custom-hint

After navigating to the hint's directory, run `npm run init` to install dependencies and compile TypeScript files. For core hints, use `yarn` and `yarn build`.

```bash
npm run init
```

```bash
yarn
yarn build
```

--------------------------------

### Install meta-theme-color Hint

Source: https://webhint.io/docs/user-guide/hints/hint-meta-theme-color

This command installs the 'meta-theme-color' hint as a development dependency using npm. It's recommended to install hints as devDependencies.

```bash
npm install @hint/hint-meta-theme-color --save-dev
```

--------------------------------

### Verify webhint installation

Source: https://webhint.io/docs/user-guide

Check if webhint is installed correctly by running the version command. This confirms the installation was successful.

```bash
hint -v
```

--------------------------------

### Install a custom shareable configuration

Source: https://webhint.io/docs/contributor-guide/how-to/configuration

Install your custom shareable configuration package in projects where you want to use it.

```bash
npm install webhint-configuration-security
```

--------------------------------

### Install Nu HTML Test Hint

Source: https://webhint.io/docs/user-guide/concepts/hints

Install the `@hint/hint-html-checker` package as a development dependency.

```bash
npm i -D @hint/hint-html-checker
```

--------------------------------

### Example URLs with File Revving

Source: https://webhint.io/docs/user-guide/hints/hint-http-cache

Examples of URLs that match the file revving patterns, demonstrating various methods of versioning static assets.

```url
https://example.com/assets/jquery-2.1.1.js
```

```url
https://example.com/assets/jquery-2.1.1.min.js
```

```url
https://example.com/assets/jquery-3.0.0-beta.js
```

```url
https://example.com/assets/favicon.123.ico
```

```url
https://example.com/wp-content/uploads/fvm/out/header-cb050ccd-1524626949.min.js
```

```url
https://example.com/jquery.lazy/1.6.5/jquery.lazy.min.js
```

```url
https://example.com/site/javascript/v5/jquery.cookie.js
```

```url
https://example.com/rsrc.php/v3iJhv4/yG/l/en_US/sqNNamBywvN.js
```

```url
https://example.com/assets/unicorn-d41d8cd98f.css
```

```url
https://example.com/assets/app.e1c7a.bundle.js
```

```url
https://example.com/assets/9f61f58dd1cc3bb82182.bundle.js
```

```url
https://example.com/assets/9f61f.js
```

```url
https://example.com/assets/9f61f.min.js
```

--------------------------------

### Create New Hint

Source: https://webhint.io/docs/contributor-guide/getting-started/development-environment

Start the wizard to create a new hint under the `/packages/` directory.

```bash
yarn new:hint
```

--------------------------------

### Valid webpack configuration example

Source: https://webhint.io/docs/user-guide/hints/hint-webpack-config/is-valid

This example shows a syntactically correct webpack configuration that will pass the hint. It includes a valid 'entry' and 'output' configuration.

```javascript
const path = require('path');

module.exports = {
    entry: ['entry'],
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    }
};
```

--------------------------------

### Install webhint

Source: https://webhint.io/docs/user-guide/configurations/configuration-accessibility

Install webhint as a development dependency in your project. This package includes the accessibility configuration by default.

```bash
npm install hint --save-dev
```

--------------------------------

### Install JSON Formatter

Source: https://webhint.io/docs/user-guide/formatters/formatter-json

Install the JSON formatter as a development dependency using npm.

```bash
npm install @hint/formatter-json --save-dev
```

--------------------------------

### Install Excel Formatter

Source: https://webhint.io/docs/user-guide/formatters/formatter-excel

Install the Excel formatter as a development dependency using npm. This is the recommended way to integrate webhint into your project.

```bash
npm install @hint/formatter-excel --save-dev
```

--------------------------------

### Verify Node.js and npm Installation

Source: https://webhint.io/docs/user-guide

Check if Node.js (version 14 or later) and npm are installed on your system. This is a prerequisite for using webhint.

```bash
node -v && npm -v
```

--------------------------------

### Install webhint globally

Source: https://webhint.io/docs/user-guide

Install the webhint package globally using npm. This makes the 'hint' command available in your terminal.

```bash
npm install hint
```

--------------------------------

### Install Dependencies with Yarn

Source: https://webhint.io/docs/contributor-guide/getting-started/development-environment

Install all necessary project dependencies using yarn. This step requires an active internet connection.

```bash
yarn
```

--------------------------------

### Disallowed Headers Example 2

Source: https://webhint.io/docs/user-guide/hints/hint-no-disallowed-headers

This example demonstrates the 'Public-Key-Pins-Report-Only' header, which also triggers the hint.

```http
HTTP/... 200 OK

...
Public-Key-Pins-Report-Only:
  pin-sha256="MoScTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs=";
  pin-sha256="C5HTzCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE=";
  includeSubDomains;
  report-uri="https://www.example.com/hpkp-report"
```

--------------------------------

### Extended PWA Configuration Example

Source: https://webhint.io/docs/user-guide/configurations/configuration-progressive-web-apps

This example shows how to extend the PWA configuration while overriding default formatters. It includes common PWA hints and uses the puppeteer connector.

```json
{
    "connector": {
        "name": "puppeteer"
    },
    "formatters": [
        "html",
        "summary"
    ],
    "hints": {
        "apple-touch-icons": "error",
        "manifest-app-name": "error",
        "manifest-exists": "error",
        "manifest-file-extension": "error",
        "manifest-icons": "error",
        "manifest-is-valid": "error",
        ...
    },
    "hintsTimeout": 120000,
    "parsers": [
        "manifest"
    ],
    ...
}
```

--------------------------------

### Disallowed Headers Example 1

Source: https://webhint.io/docs/user-guide/hints/hint-no-disallowed-headers

This example shows HTTP response headers that trigger the hint, including 'Server' and 'X-Powered-By'.

```http
HTTP/... 200 OK

...
Server: Apache/2.2.27 (Unix) mod_ssl/2.2.27 OpenSSL/1.0.1e-fips mod_bwlimited/1.4
X-Powered-By: PHP/5.3.28
```

--------------------------------

### Example of a response triggering the hint

Source: https://webhint.io/docs/user-guide/hints/hint-http-compression

This example shows a response that might trigger the HTTP compression hint. It includes a `Content-Type` header but lacks the `Content-Encoding` header, indicating that compression might not be applied correctly or is missing for a compressible resource.

```http
HTTP/... 200 OK

...
Content-Type: image/svg+xml

<file content>
```

--------------------------------

### fetch::start::<resource-type>

Source: https://webhint.io/docs/contributor-guide/getting-started/events

Indicates the start of a request to fetch a target resource. It includes the URL of the resource to be downloaded.

```APIDOC
## `fetch::start::<resource-type>`

Event is emitted **when** the request to fetch the `target` is about to start

### Format:

```typescript
type FetchStart = {
    /** The URL to download */
    resource: string;
}
```
```

--------------------------------

### Invalid webpack configuration example

Source: https://webhint.io/docs/user-guide/hints/hint-webpack-config/is-valid

This example demonstrates an invalid webpack configuration that will trigger the hint. It contains a syntax error in the 'entry' property.

```javascript
module.exports = {
    entry: 'invalid',
    output: {
        filename: 'bundle.js'
    }
};
```

--------------------------------

### Install Azure CLI in Travis CI

Source: https://webhint.io/docs/user-guide/development-flow-integration/travis-and-azure

Installs the Azure CLI on a Debian-based system within the Travis CI environment. This is typically run in the `before_install` stage.

```bash
AZ_REPO=$(lsb_release -cs) && echo "deb [arch=amd64] https://packages.microsoft.com/repos/azure-cli/ $AZ_REPO main" | sudo tee /etc/apt/sources.list.d/azure-cli.list
curl -L https://packages.microsoft.com/keys/microsoft.asc | sudo apt-key add -
sudo apt-get install apt-transport-https
sudo apt-get update && sudo apt-get install azure-cli
```

--------------------------------

### Example .hintrc configuration

Source: https://webhint.io/docs/user-guide/configuring-webhint/summary

A sample .hintrc file demonstrating various configuration options like connectors, formatters, parsers, hints, and timeouts.

```json
{
    "connector": {
        "name": "connectorName"
    },
    "formatters": ["formatterName"],
    "parsers": ["parserName"],
    "hints": {
        "hint1": "error",
        "hint2": "warning",
        "hint3": "off"
    },
    "hintsTimeout": 120000
}
```

--------------------------------

### Run Initial Build

Source: https://webhint.io/docs/contributor-guide/getting-started/development-environment

Execute the initial build process for the entire project. This step downloads pre-built assets to expedite the first build.

```bash
yarn build
```

--------------------------------

### CircleCI Config for Node Projects

Source: https://webhint.io/docs/user-guide/development-flow-integration/circleci

Configure CircleCI for Node.js projects. This setup installs dependencies and runs your npm test script, which should include the webhint scan.

```yaml
version: 2.1
jobs:
  build:
    docker:
      - image: circleci/node:lts-browsers
    steps:
      - checkout # check out the code in the project directory
      # Add the necessary steps to deploy your website.
      - run: npm install
      - run: npm run test
```

--------------------------------

### Core hints setup for create-hint package

Source: https://webhint.io/docs/contributor-guide/guides/create-custom-hint

Specific steps for creating a hint within the main webhint repository. This involves setting up the monorepo and building the create-hint package before scaffolding.

```bash
yarn
yarn build
cd packages/create-hint
yarn webpack
npm create hint
```

--------------------------------

### Travis CI Configuration for Node.js Projects

Source: https://webhint.io/docs/user-guide/development-flow-integration/travisci

Configure Travis CI for Node.js projects. This setup specifies the Node.js version, installs Chrome for browser-based testing, and runs the project's test script.

```yaml
language: node_js
node_js:
- 10.16.2

addons:
  chrome: stable

script:
  - npm install
  - npm run test
```

--------------------------------

### Example package.json with hintConfig

Source: https://webhint.io/docs/user-guide/configuring-webhint/summary

Shows how to embed webhint configuration directly within the package.json file using the hintConfig property.

```json
{
    "name": "project name",
    "dependencies": {
        ...
    },
    "scripts": {
        ...
    },
    ...
    "hintConfig": {
        "connector": {
            "name": "connectorName"
        },
        "formatters": ["formatterName"],
        "parsers": ["parserName"],
        "hints": {
            "hint1": "error",
            "hint2": "warning",
            "hint3": "off"
        },
        "hintsTimeout": 120000
    }
}
```

--------------------------------

### Resource missing X-Content-Type-Options header

Source: https://webhint.io/docs/user-guide/hints/hint-x-content-type-options

This example shows a resource served without the X-Content-Type-Options header, which will trigger the hint.

```http
HTTP/... 200 OK

...

Content-Type: image/png
```

--------------------------------

### Create a .hintrc file

Source: https://webhint.io/docs/user-guide/configuring-webhint/summary

Run this command to generate a basic .hintrc configuration file.

```bash
npm create hintrc
```

--------------------------------

### Resource Served Compressed When It Should Not Be

Source: https://webhint.io/docs/user-guide/hints/hint-http-compression

This example demonstrates a scenario where a resource that should not be compressed (like an image) is served compressed.

```http
GET /example.png HTTP/1.1
Host: example.com
Accept-Encoding: gzip, deflate, br
```

```http
HTTP/1.1 200 OK
Content-Encoding: br
Content-Type: image/png
Vary: Accept-Encoding

<file content compressed with Brotli>
```

--------------------------------

### Basic Hint Test Setup

Source: https://webhint.io/docs/contributor-guide/how-to/test-rules

This template sets up a basic test file for a hint. It imports necessary utilities, defines test cases with server configurations and expected reports, and runs the tests using `testHint`.

```typescript
import { generateHTMLPage } from '@hint/utils-create-server';
import { getHintPath, HintTest, testHint } from '@hint/utils-tests-helpers';

const hintPath = getHintPath(__filename);

const tests: HintTest[] = [
    {
        name: 'This test should pass',
        serverConfig: generateHTMLPage()
    },
    {
        name: `This test should fail`,
        reports: [{ message: `This should be your error message` }],
        serverConfig: generateHTMLPage()
    }
];

testHint(hintPath, tests);
```

--------------------------------

### Install Codeframe Formatter

Source: https://webhint.io/docs/user-guide/formatters/formatter-codeframe

Install the codeframe formatter as a development dependency using npm.

```bash
npm install @hint/formatter-codeframe --save-dev
```

--------------------------------

### Initialize a custom configuration package

Source: https://webhint.io/docs/contributor-guide/how-to/configuration

Create a new directory for your custom configuration package and initialize it using `npm init`.

```bash
mkdir webhint-configuration-security
cd webhint-configuration-security
npm init
```

--------------------------------

### Correct X-UA-Compatible HTTP Header (Passes Hint)

Source: https://webhint.io/docs/user-guide/hints/hint-highest-available-document-mode

This example shows a correctly configured 'X-UA-Compatible' HTTP header, which will pass the hint with default settings.

```http
HTTP/... 200 OK

... 
X-UA-Compatible: ie=edge
```

--------------------------------

### Navigate to Project Directory

Source: https://webhint.io/docs/contributor-guide/getting-started/development-environment

Change your current directory to the cloned webhint project folder.

```bash
cd hint
```

--------------------------------

### Example commit message: Docs

Source: https://webhint.io/docs/contributor-guide/getting-started/pull-requests

An example of a commit message following the specified format, used for documentation changes.

```git
Docs: Fix broken links in `pull-requests.md`
```

--------------------------------

### Link to manifest with standard extension

Source: https://webhint.io/docs/user-guide/hints/hint-manifest-file-extension

This example shows the correct usage of the `.webmanifest` file extension for the web app manifest, which will pass the `manifest-file-extension` hint.

```html
<link rel="manifest" href="site.webmanifest">
```

--------------------------------

### Configure Hint with Customization (Array Syntax)

Source: https://webhint.io/docs/user-guide/concepts/hints

Configure the 'example1' hint with 'warning' severity and custom options using array syntax in `.hintrc`.

```json
{
    "hints": [
        [
            "example1:warning",
            {
                "customization1": "value1",
                "customization2": "value2"
            }
        ]
    ]
}
```

--------------------------------

### CSS border-radius Property Example

Source: https://webhint.io/docs/user-guide/hints/hint-compat-api/css

This example demonstrates the use of the border-radius property, which passes when targeting IE 9 or higher.

```css
.example {
    border-radius: 10px;
}
```

--------------------------------

### CSS @charset Rule Example

Source: https://webhint.io/docs/user-guide/hints/hint-compat-api/css

This example shows a valid @charset rule that passes when targeting Chrome 2 or higher.

```css
@charset "UTF-8";
```

--------------------------------

### Custom Event Definition Example

Source: https://webhint.io/docs/contributor-guide/getting-started/events

Example of defining custom events for a parser, including event types and their expected values.

```APIDOC
## Custom Event Definition Example

This example demonstrates how to define custom events for a parser. It includes exporting event types and their associated data structures.

### Code Example

```typescript
// example.ts
import { Event, Events } from 'hint/dist/src/lib/types/events';
// ...
export type StyleParse = Event & {
    ast: Root;
    code: string;
    element: HTMLElement | null;
};

export type StyleEvents = Events & {
    'parse::end::css': StyleParse;
    'parse::start::css': Event;
};

export default class CSSParser extends Parser<StyleEvents> {
    public constructor(engine: Engine<StyleEvents>) {
        super(engine, 'css');
        // ...
    }
    // ...
}
```
```

--------------------------------

### Equivalent .hintrc configuration for environment variable

Source: https://webhint.io/docs/user-guide/configuring-webhint/summary

Demonstrates the direct .hintrc file equivalent of the environment variable setting for connector options.

```json
{
    "connector": {
        "options": {
            "waitFor": 60000
        }
    }
}
```

--------------------------------

### Configure Hint with Customization (Object Syntax)

Source: https://webhint.io/docs/user-guide/concepts/hints

Configure the 'example1' hint with 'warning' severity and custom options using object syntax in `.hintrc`.

```json
{
    "hints": [
        {
            "example1": [
                "warning",
                {
                    "customization1": "value1",
                    "customization2": "value2"
                }
            ]
        }
    ]
}
```

--------------------------------

### Example commit message: New feature

Source: https://webhint.io/docs/contributor-guide/getting-started/pull-requests

An example of a commit message for adding a new feature, adhering to the required format.

```git
New: Add hint to check life-work balance
```

--------------------------------

### Example 403 Forbidden response over 256 bytes

Source: https://webhint.io/docs/user-guide/hints/hint-no-friendly-error-pages

This example shows a 403 Forbidden response with a body exceeding 256 bytes, ensuring it will be displayed by all browsers. Note that the HTTP status code in the example is 500, which is a discrepancy from the title but reflects the source content.

```http
HTTP/... 500 Internal Server Error

...
```

```html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>HTTP 403 - Forbidden</title>
    </head>
    <body>
        <h1>HTTP 403 - Forbidden</h1>
        <p>......................................................................</p>
        <p>This page has over 256 bytes, so it will be displayed by all browsers.</p>
        <p>......................................................................</p>
        <p>......................................................................</p>
    </body>
</html>
```

--------------------------------

### X-UA-Compatible Header and Meta Tag Used Together (Triggers Hint)

Source: https://webhint.io/docs/user-guide/hints/hint-highest-available-document-mode

This example shows both the 'X-UA-Compatible' header and the meta tag being used, which triggers the hint when the default configuration is active (header preferred).

```http
HTTP/... 200 OK

... 
X-UA-Compatible: ie=edge
```

```html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>example</title>
        ...
    </head>
    <body>...</body>
</html>
```

--------------------------------

### IIS Starter Snippet for Common File Types

Source: https://webhint.io/docs/user-guide/hints/hint-content-type

A comprehensive IIS configuration snippet that maps common file extensions to their appropriate Content-Type and charset. This starter includes overrides for predefined IIS mappings to ensure correct headers are sent.

```xml
<configuration>
    <system.webServer>
        <staticContent>
            <!-- IIS doesn't set the charset automatically, so we have to override some
                 of the predefined ones -->

            <!-- Data interchange -->
            <mimeMap fileExtension=".json" mimeType="application/json; charset=utf-8"/>
            <mimeMap fileExtension=".map" mimeType="application/json; charset=utf-8"/>
            <mimeMap fileExtension=".rss" mimeType="application/rss+xml; charset=utf-8"/>
            <mimeMap fileExtension=".xml" mimeType="text/xml; charset=utf-8"/>

            <!-- JavaScript -->
            <!-- https://html.spec.whatwg.org/multipage/scripting.html#scriptingLanguages -->
            <mimeMap fileExtension=".js" mimeType="text/javascript; charset=utf-8"/>
            <mimeMap fileExtension=".mjs" mimeType="text/javascript; charset=utf-8"/>

            <!-- Manifest files -->
            <mimeMap fileExtension=".appcache" mimeType="text/cache-manifest; charset=utf-8"/>
            <mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json; charset=utf-8"/>

            <!-- Media files -->
            <mimeMap fileExtension=".f4a" mimeType="audio/mp4"/>
            <mimeMap fileExtension=".f4b" mimeType="audio/mp4"/>
            <mimeMap fileExtension=".m4a" mimeType="audio/mp4"/>
            <mimeMap fileExtension=".oga" mimeType="audio/ogg"/>
            <mimeMap fileExtension=".ogg" mimeType="audio/ogg"/>
            <mimeMap fileExtension=".spx" mimeType="audio/ogg"/>

            <mimeMap fileExtension=".mp4" mimeType="video/mp4"/>
            <mimeMap fileExtension=".mp4v" mimeType="video/mp4"/>
            <mimeMap fileExtension=".mpg4" mimeType="video/mp4"/>
            <mimeMap fileExtension=".ogv" mimeType="video/ogg"/>
            <mimeMap fileExtension=".webm" mimeType="video/webm"/>
            <mimeMap fileExtension=".flv" mimeType="video/x-flv"/>

            <mimeMap fileExtension=".cur" mimeType="image/x-icon"/>
            <mimeMap fileExtension=".ico" mimeType="image/x-icon"/>
            <mimeMap fileExtension=".svg" mimeType="image/svg+xml; charset=utf-8"/>
            <mimeMap fileExtension=".svgz" mimeType="image/svg+xml"/>
            <mimeMap fileExtension=".webp" mimeType="image/webp"/>


            <!-- Font files -->
            <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject"/>
            <mimeMap fileExtension=".otf" mimeType="font/otf"/>
            <mimeMap fileExtension=".ttc" mimeType="font/collection"/>
```

--------------------------------

### Correct X-UA-Compatible Meta Tag (Passes Hint)

Source: https://webhint.io/docs/user-guide/hints/hint-highest-available-document-mode

This example shows a correctly placed and configured 'X-UA-Compatible' meta tag, which will pass the hint when the meta tag is the required method.

```html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>example</title>
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <script src="example.js"></script>
        ...
    </head>
    <body>...</body>
</html>
```

--------------------------------

### Example commit message: Build changes

Source: https://webhint.io/docs/contributor-guide/getting-started/pull-requests

An example commit message for changes related to the build process, following the established format.

```git
Build: Generate new Travis CI token
```

--------------------------------

### Configure Performance Budget Hint

Source: https://webhint.io/docs/user-guide/hints/hint-performance-budget

Configure the 'performance-budget' hint in your .hintrc file to specify connection type and target load time.

```json
{
    "connector": {...},
    "formatters": [...],
    "hints": {
        "performance-budget": ["error", {
            "connectionType": "Dial",
            "loadTime": 10
        }],
        ...
    },
    ...
}
```

--------------------------------

### Evaluate JavaScript that does not work

Source: https://webhint.io/docs/contributor-guide/how-to/common-hint-scenarios

Examples of JavaScript code that will not work with `context.evaluate`. These examples are not wrapped in an IIFE and may lead to unexpected behavior.

```typescript
const script = `return true;`;

context.evaluate(script);
```

```typescript
const script = `return Promise.resolve(true);`;

context.evaluate(script);
```

--------------------------------

### Build and Test All Packages

Source: https://webhint.io/docs/contributor-guide/getting-started/development-environment

Build the entire project and run tests for all packages. This script is only available in the root `package.json`.

```bash
yarn test-all
```

--------------------------------

### Analyze website and use formatters

Source: https://webhint.io/docs/user-guide/api/using-api

An example showing how to analyze a website and use configured formatters to display the results, such as HTML or summary formatters.

```typescript
import { Analyzer } from 'hint';

const userConfig = { extends: ['web-recommended'] };

const webhint = Analyzer.create(userConfig);

const results: AnalyzerResult[] = await webhint.analyze('http://example.com');

results.forEach((result) => {
    console.log(`Result for: ${result.url}`);

    // Print the result using `formatter-html` and `formatter-summary`
    webhint.format(result.problems);
});
```

--------------------------------

### Install Azure CLI for Deployment in .travis.yml

Source: https://webhint.io/docs/user-guide/development-flow-integration/travis-and-azure

Install the Azure CLI within the Travis CI environment. This snippet assumes a Linux-based runner.

```yaml
install:
  - apt-get update && apt-get install -y azure-cli
```

--------------------------------

### Expanded .hintrc with accessibility configuration

Source: https://webhint.io/docs/user-guide/configurations/configuration-accessibility

An example of an expanded .hintrc file that includes the accessibility configuration along with custom settings for connector, formatters, and hints. This shows how to explicitly define hints like 'axe/aria', 'axe/color', and 'axe/forms' as errors.

```json
{
    "connector": "puppeteer",
    "formatters": [
        "html",
        "summary"
    ],
    "hints": {
        "axe/aria": "error",
        "axe/color": "error",
        "axe/forms": "error",
        "...": "error"
    },
    "hintsTimeout": 120000
}
```

--------------------------------

### P3P Header Not Sent (Passing Example)

Source: https://webhint.io/docs/user-guide/hints/hint-no-p3p

This example shows a successful scenario where the P3P header is not sent. This is the desired state as P3P is deprecated.

```http
HTTP/... 200 OK
Content-Type: text/html; charset=utf-8
...

```

--------------------------------

### Basic .hintrc Configuration

Source: https://webhint.io/docs/user-guide/configurations/configuration-development

Use the 'development' configuration by extending it in your .hintrc file.

```json
{
    "extends": ["development"]
}
```

--------------------------------

### Configure CircleCI for webhint integration

Source: https://webhint.io/docs/user-guide/development-flow-integration/circleci

Set up the .circleci/config.yml file to install Node.js dependencies, run npm install, and execute the webhint test script.

```yaml
version: 2.1
jobs:
  build:
    docker:
      - image: circleci/node:lts
    steps:
      - checkout # check out the code in the project directory
      - run: npm install
      - run: npm run test-hint
```

--------------------------------

### Analyze website and print results manually

Source: https://webhint.io/docs/user-guide/api/using-api

An example demonstrating how to analyze a website and manually print the results, including iterating through problems and logging details.

```typescript
import { Analyzer } from 'hint';

const userConfig = {
    extends: ['web-recommended'],
    formatters: []
};

const webhint = Analyzer.create(userConfig);

const results: AnalyzerResult[] = await webhint.analyze('http://example.com');

results.forEach((result) => {
    console.log(`Result for: ${result.url}`);

    result.problems.forEach((problem) => {
        console.log(`${problem.hintId} - ${problem.resource} - ${problem.message}`);
    });
});
```

--------------------------------

### Inline Style Attribute Example

Source: https://webhint.io/docs/user-guide/hints/hint-no-inline-styles

This example demonstrates an HTML element with an inline style attribute, which will trigger the 'No Inline CSS Styles' hint.

```html
<div style="color: blue;"></div>
```

--------------------------------

### Example Scan Result

Source: https://webhint.io/docs/contributor-guide/guides/create-custom-hint

This output shows an example of a scan result where the custom footer hint detected an error because the required string was missing from the footer.

```text
https://webhint.io/
line 1  col 8379  Error  "(c) webhint" is not included in the footer.  validate-footer
✖ Found 1 error and 0 warnings

✖ Found a total of 1 error and 0 warnings
```

--------------------------------

### Configure Hint with Array Syntax

Source: https://webhint.io/docs/user-guide/concepts/hints

Configure the '@hint/hint-example1' hint with 'warning' severity using array syntax in `.hintrc`.

```json
{
    "hints": [
        "example1:warning"
    ]
}
```

--------------------------------

### No P3Pv1 Link Tag (Passing Example)

Source: https://webhint.io/docs/user-guide/hints/hint-no-p3p

This example demonstrates a passing scenario where no P3P link tag (rel="P3Pv1") is present in the HTML.

```html
There isn’t any <link rel="P3Pv1"> in the HTML.
The server doesn’t have content in /w3c/p3p.xml:

```

--------------------------------

### HTML with a valid manifest link

Source: https://webhint.io/docs/user-guide/hints/hint-manifest-exists

This example shows an HTML document with a correctly specified web app manifest file. This will pass the hint.

```html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>example</title>
        <link rel="manifest" href="site.webmanifest">
        ...
    </head>
    <body>...</body>
</html>
```

--------------------------------

### Internal Style Tag Example

Source: https://webhint.io/docs/user-guide/hints/hint-no-inline-styles

This example shows the use of an internal `<style>` tag within the HTML, which is also flagged by the hint. This check is disabled by default.

```html
<style>
    div {
        color: blue;
    }
</style>
```

--------------------------------

### Example Webhint Error Report

Source: https://webhint.io/docs/contributor-guide/guides/create-custom-hint

This is an example of an error message reported by webhint when the custom 'copyright' hint fails. It indicates that the expected string was not found in the footer.

```text
https://webhint.io/
line 1  col 8403  Error  "(c) webhint.io" is not included in the footer.  validate-footer
✖ Found 1 error and 0 warnings

✖ Found a total of 1 error and 0 warnings
```

--------------------------------

### Run webhint Package

Source: https://webhint.io/docs/contributor-guide/getting-started/development-environment

Execute the `webhint` command from the `packages/hint` directory. This is typically used for testing the main webhint package.

```bash
yarn webhint
```

--------------------------------

### CSS @supports with Supported Property Example

Source: https://webhint.io/docs/user-guide/hints/hint-compat-api/css

This example shows a valid @supports block using 'display: grid', which passes when the target browsers support CSS Grid.

```css
@supports (display: grid) {
    .example {
        display: grid;
    }
}
```

--------------------------------

### Configure Hint with Object Syntax

Source: https://webhint.io/docs/user-guide/concepts/hints

Configure the '@hint/hint-example1' hint with 'warning' severity using object syntax in `.hintrc`.

```json
{
    "hints": {
        "example1": "warning"
    }
}
```

--------------------------------

### Invalid Babel Configuration Example

Source: https://webhint.io/docs/user-guide/hints/hint-babel-config/is-valid

This example demonstrates an invalid Babel configuration where 'moduleId' is incorrectly set to a number instead of a string. This would trigger the 'is-valid' hint.

```json
{
    "plugins": [
        "example"
    ],
    "moduleId": 1, // This should be a string.
    "ignore": [
        "foo.js",
        "bar/**/*.js"
    ]
}
```

--------------------------------

### Run webhint with a Specific Configuration File

Source: https://webhint.io/docs/user-guide/troubleshoot/summary

This command allows you to run webhint using a specified configuration file (.hintrc) without needing to install webhint globally. Replace './path/to/.hintrc' with the actual path to your configuration file.

```bash
npx hint -c ./path/to/.hintrc https://example.com
```

--------------------------------

### Example Passing Scoped SVG Styles Hint

Source: https://webhint.io/docs/user-guide/hints/hint-scoped-svg-styles

This example shows styles within an SVG that are correctly scoped and do not affect elements outside the SVG, thus passing the hint.

```html
<html>
    <body>
        <h1 class="html-style">Heading</h1>

        <svg>
            <style>
                .svg-style {
                    opacity: 0.5;
                }
            </style>
            <text class="svg-style">SVG text</text>
        </svg>
    </body>
</html>
```

--------------------------------

### Valid manifest with name and short_name

Source: https://webhint.io/docs/user-guide/hints/hint-manifest-app-name

This example shows a correctly configured manifest where 'name' is under 30 characters and 'short_name' is under 12 characters, satisfying the hint's requirements.

```json
{
    "name": "Baldwin Museum of Science",
    "short_name": "Baldwin"
    ...
}
```

--------------------------------

### Configure HTTP method for 'no-broken-links' hint

Source: https://webhint.io/docs/user-guide/hints/hint-no-broken-links

Customize the HTTP method (e.g., GET, HEAD) used by the 'no-broken-links' hint to check resource availability. By default, it uses 'GET'.

```json
{
    "connector": {...},
    "formatters": [...],
    "hints": {
        "no-broken-links": ["error", {
            "method": "GET|HEAD"
        }],
        ...
    },
    ...
}
```

--------------------------------

### Example Triggering Scoped SVG Styles Hint

Source: https://webhint.io/docs/user-guide/hints/hint-scoped-svg-styles

This example demonstrates a style rule within an SVG that targets a class also used outside the SVG, causing the hint to trigger.

```html
<html>
    <body>
        <h1 class="my-style">Heading</h1>

        <svg>
            <style>
                .my-style {
                    opacity: 0.5;
                }
            </style>
            <text class="my-style">SVG text</text>
        </svg>
    </body>
</html>
```

--------------------------------

### Create a new hint using CLI

Source: https://webhint.io/docs/contributor-guide/how-to/hint

Use the `create-hint` package to start a wizard for generating a new hint. This command initiates an interactive process to gather information about your hint.

```bash
npm init hint
```

--------------------------------

### Well-Known P3P Location Returns 404 (Passing Example)

Source: https://webhint.io/docs/user-guide/hints/hint-no-p3p

This example shows a passing scenario where the server does not return content for the well-known P3P location (/w3c/p3p.xml), indicated by a 404 response.

```http
HTTP/... 404 OK

...

```

--------------------------------

### CSS Example Triggering Paint Reflow

Source: https://webhint.io/docs/user-guide/hints/hint-detect-css-reflows/paint

This CSS example demonstrates a property change that will trigger the Paint pipeline, potentially causing performance degradation. Use this to identify problematic CSS.

```css
.example {
    padding-left: auto;
}
```

--------------------------------

### Configure webhint to use manifest-is-valid hint

Source: https://webhint.io/docs/user-guide/hints/hint-manifest-is-valid

Activate the 'manifest-is-valid' hint via the .hintrc configuration file.

```json
{
    "connector": {...},
    "formatters": [...],
    "hints": {
        "manifest-is-valid": "error",
        ...
    },
    "parsers": [...],
    ...
}
```
Tokens:
Raw