Getting Started

ViewLint is a tool that helps identify issues in the rendered output of a website.

Quick Start

Install and configure ViewLint with this command:

npm init @viewlint/config@latest

This will guide you through the creation of a configuration file and help you install the necessary dependencies.

Run ViewLint

After that, you can run ViewLint on any site like this:

npx viewlint https://example.com

Configuration

When you run npm init @viewlint/config you'll be asked a series of questions to help you set up your ViewLint configuration.

For example, if you select the base rules, your configuration file will look something like this:

import { defineConfig } from "viewlint/config";
import rules from "@viewlint/rules";

export default defineConfig({
  plugins: {
    rules,
  },
  extends: ["rules/recommended"],
});

The rules/recommended configuration ensures that all the rules marked as recommended on the rules reference page will be enabled. You can configure rules individually by defining a new rules key, as in this example:

import { defineConfig } from "viewlint/config";
import rules from "@viewlint/rules";

export default defineConfig({
  plugins: {
    rules,
  },
  extends: ["rules/recommended"],
  rules: {
	"text-contrast": "error",
  }
});

The name "text-contrast" is the name of a rule in ViewLint.

Difference from ESLint: The severity system has been slightly tweaked:

Severity levels must be a string as defined below. Assigning to 0, 1, or 2 do not work.
Rules now bundle a Default Severity. In order to keep the Default Severity, you can use the inherit level in config.

The value you assign to it is the severity level of the rule. All rules have a severity level out-of-the-box, but you can configure it yourself.

off: Turn off the rule completely
inherit: Continue using the current severity
info: Mark the rule as informational only. Doesn't affect exit code.
warn: Make the rule a warning. Doesn't affect exit code
error: Make the rule an error. Affects exit code when it happens

Manual Installation

You can also set up ViewLint manually.

Install Packages

Install ViewLint and the built-in rules:

npm install --save-dev viewlint@latest @viewlint/rules@latest

Install Playwright Browser

ViewLint uses Playwright under the hood, and Playwright does not ship browser binaries in the package itself. If you do not have a Playwright browser available, install a browser instance before running ViewLint, with your preferred package manager:

npx playwright install chromium

Add a ViewLint Config File

ViewLint config files can be written in both JS and TS, depending on your project. In this guide, we will use TypeScript

Difference from ESLint: Built-in TypeScript

ViewLint has TypeScript built in. That means that configuration files in TypeScript work out-of-the-box. All utility functions including defineConfig also are typed for a better DX.

touch viewlint.config.ts

Add a Configuration

Add a configuration file to your viewlint.config.ts. Refer to Configure Viewlint for more information about how to add rules, custom configurations, plugins, and more.

import { defineConfig } from "viewlint/config";
import rules from "@viewlint/rules";

export default defineConfig({
  plugins: {
    rules,
  },
  extends: ["rules/recommended"],
  rules: {
	"text-contrast": "error",
  }
});

Lint with ViewLint CLI

npx viewlint https://example.com

See the CLI Reference for more information on CLI options.

Next Steps

Learn how to Configure ViewLint
Learn how to author a custom rule
Get familiar with the command line options

On this page