Browser Plugin

Flint’s browser plugin includes rules targeted to code that runs in browsers and browser-like environments.

npm install @flint.fyi/plugin-browser

pnpm install @flint.fyi/plugin-browser

yarn install @flint.fyi/plugin-browser

Presets

Flint’s browser plugin provides the following presets:

Preset	Recommended	Description
`logical`	✅ Always	Common rules for finding bugs and good practices in browsers and browser-like runtimes.
`logicalStrict`	☑️ When Ready	Additional rules for finding bugs and good practices in browsers and browser-like runtimes.
`stylistic`	✅ Always	Common rules for consistent styling in browsers and browser-like runtimes.
`stylisticStrict`	☑️ When Ready	Additional rules for consistent styling in browsers and browser-like runtimes.

If you are just getting started with linting, Flint recommends using the logical and stylistic presets:

import { browser } from "@flint.fyi/browser";
import { defineConfig, ts } from "flint";

export default defineConfig({
  use: [
    {
      files: ts.files.all,
      rules: [browser.presets.logical, browser.presets.stylistic],
    },
  ],
});

If you are experienced with both JavaScript/TypeScript and linting, Flint recommends using the logicalStrict and stylisticStrict presets:

import { browser } from "@flint.fyi/browser";
import { defineConfig, ts } from "flint";

export default defineConfig({
  use: [
    {
      files: ts.files.all,
      rules: [browser.presets.logicalStrict, browser.presets.stylisticStrict],
    },
  ],
});

`logical`

Rules that find bugs and enforce good browser and DOM practices for most-to-all JavaScript and TypeScript files.

import { browser } from "@flint.fyi/browser";
import { defineConfig, ts } from "flint";

export default defineConfig({
  use: [
    {
      files: ts.files.all,
      rules: browser.presets.logical,
    },
  ],
});

`logicalStrict`

Additional logical rules that enforce best practices which are not always straightforward to implement. These rules are recommended for projects where a majority of developers are experienced with both JavaScript/TypeScript and using a linter.

import { browser } from "@flint.fyi/browser";
import { defineConfig, ts } from "flint";

export default defineConfig({
  use: [
    {
      files: ts.files.all,
      rules: browser.presets.logicalStrict,
    },
  ],
});

This preset’s rules are a superset of those in logical.

`stylistic`

Rules that enforce consistent styling and best stylistic practices for most-to-all JavaScript and TypeScript files dealing with browser APIs.

import { browser } from "@flint.fyi/browser";
import { defineConfig, ts } from "flint";

export default defineConfig({
  use: [
    {
      files: ts.files.all,
      rules: browser.presets.stylistic,
    },
  ],
});

`stylisticStrict`

Additional stylistic rules that enforce best practices which are not always straightforward to implement. These rules are recommended for projects where a majority of developers are experienced with both JavaScript/TypeScript and using a linter.

import { browser } from "@flint.fyi/browser";
import { defineConfig, ts } from "flint";

export default defineConfig({
  use: [
    {
      files: ts.files.all,
      rules: browser.presets.stylisticStrict,
    },
  ],
});

This preset’s rules are a superset of those in stylistic.

Rules

Implemented: 2 of 14 (14.2%)

Flint Name	Preset	Biome Rule(s)	ESLint Rule(s)	Oxlint Rule(s)
`alerts`	Logical	`noAlert`	`no-alert`	`eslint/no-alert`
`implicitGlobals`	Logical		`no-implicit-globals`
`removeEventListenerExpressions`	Logical		`unicorn/no-invalid-remove-event-listener`	`unicorn/no-invalid-remove-event-listener`
`scriptUrls`	Logical		`no-script-url`	`eslint/no-script-url`
`documentCookies`	Logical (Strict)	`noDocumentCookie`	`unicorn/no-document-cookie`	`unicorn/no-document-cookie`
`eventClasses`	Logical (Strict)		`unicorn/prefer-event-target`	`unicorn/prefer-event-target`
`eventListenerSubscriptions`	Logical (Strict)		`unicorn/prefer-add-event-listener`	`unicorn/prefer-add-event-listener`
`nodeAppendMethods`	Logical (Strict)		`unicorn/prefer-dom-node-append`	`unicorn/prefer-dom-node-append`
`nodeDatasetAttributes`	Logical (Strict)		`unicorn/prefer-dom-node-dataset`	`unicorn/prefer-dom-node-dataset`
`nodeModificationMethods`	Logical (Strict)		`unicorn/prefer-modern-dom-apis`	`unicorn/prefer-modern-dom-apis`
`nodeRemoveMethods`	Logical (Strict)		`unicorn/prefer-dom-node-remove`	`unicorn/prefer-dom-node-remove`
`nodeTextContents`	Logical (Strict)		`unicorn/prefer-dom-node-text-content`	`unicorn/prefer-dom-node-text-content`
`classListToggles`	Stylistic		`unicorn/prefer-classlist-toggle`
`nodeQueryMethods`	Stylistic (Strict)		`unicorn/prefer-query-selector`	`unicorn/prefer-query-selector`

Made with ❤️‍🔥 in Boston by Josh Goldberg and contributors.