Browser Plugin

Rules for code that runs in browsers and other environments with DOM (Document Object Model) elements.
This plugin is provided in a standalone @flint.fyi/plugin-browser npm package.

npm

npm install @flint.fyi/plugin-browser

pnpm

pnpm install @flint.fyi/plugin-browser

yarn

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:

flint.config.ts

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:

flint.config.ts

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],
    },
  ],
});

Note

Coming soon: more expansive documentation on choosing and combining plugins & presets with Flint.

logical

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

flint.config.ts

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.

flint.config.ts

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.

flint.config.ts

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.

flint.config.ts

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

Flint Rule	Preset
alertsReports uses of the global alert/confirm/prompt dialog APIs.	logical
implicitGlobalsPrevents implicit global variable declarations in browser scripts.	logical
keyboardEventKeysPrefer KeyboardEvent.key over deprecated properties like keyCode, charCode, and which.	logical
removeEventListenerExpressionsDisallow inline function expressions in removeEventListener calls.	logical
scriptUrlsReports javascript: URLs that can act as a form of eval.	logical
windowMessagingTargetOriginRequires specifying the targetOrigin argument when calling window.postMessage().	logical
documentCookiesReports uses of document.cookie which can be error-prone and has security implications.	logical (strict)
eventListenerSubscriptionsPrefer addEventListener over assigning to on* event handler properties.	logical (strict)
nodeAppendMethodsPrefer modern DOM append/prepend methods over appendChild/insertBefore.	logical (strict)
nodeDatasetAttributesPrefer using element.dataset over getAttribute/setAttribute for data-* attributes.	logical (strict)
nodeModificationMethodsPrefer modern DOM APIs like .replaceWith() and .before() over legacy methods like .replaceChild() and .insertBefore().	logical (strict)
nodeRemoveMethodsPrefer the modern node.remove() method over the legacy parentNode.removeChild(node) API.	logical (strict)
nodeTextContentsPrefer textContent over innerText for DOM nodes.	logical (strict)
classListTogglesPrefer using classList.toggle() over conditional classList.add() and classList.remove().	stylistic
nodeQueryMethodsPrefer modern querySelector and querySelectorAll over legacy DOM query methods.	stylistic (strict)