JSX Plugin

Rules for code that describes UI with the "JSX" markup language, commonly in .jsx and/or .tsx files.
This plugin is provided in a standalone @flint.fyi/plugin-jsx npm package.

npm

npm install @flint.fyi/plugin-jsx

pnpm

pnpm install @flint.fyi/plugin-jsx

yarn

yarn install @flint.fyi/plugin-jsx

Presets

Flint’s JSX plugin provides the following presets:

Preset	Recommended	Description
logical	✅ Always	Common rules for finding bugs and enforcing good logical practices for JSX.
logicalStrict	☑️ When Ready	Additional rules for finding bugs and enforcing good logical practices for JSX.
stylistic	✅ Always	Common rules for consistent styling and best JSX stylistic practices for JSX.

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

flint.config.ts

import { jsx } from "@flint.fyi/plugin-jsx";
import { defineConfig, ts } from "flint";

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

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

flint.config.ts

import { jsx } from "@flint.fyi/plugin-jsx";
import { defineConfig, ts } from "flint";

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

Note

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

logical

Rules that find bugs and enforce best practices and catch common pitfalls around JSX for most-to-all JavaScript and TypeScript files.

flint.config.ts

import { jsx } from "@flint.fyi/plugin-jsx";
import { defineConfig, ts } from "flint";

export default defineConfig({
  use: [
    {
      files: jsx.files.all,
      rules: jsx.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 { jsx } from "@flint.fyi/plugin-jsx";
import { defineConfig, ts } from "flint";

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

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

stylistic

Rules that enforce consistent JSX styling and best JSX stylistic practices for most-to-all JavaScript and TypeScript files.

flint.config.ts

import { jsx } from "@flint.fyi/plugin-jsx";
import { defineConfig, ts } from "flint";

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

Rules

Implemented: 44 of 54 (81.4%)

Flint Rule	Preset
accessKeysDisallow the use of the accessKey / accesskey attribute on JSX elements.	logical
altTextsReports elements that require alt text but are missing it.	logical
anchorContentReports anchor elements without accessible content.	logical
anchorValidityReports invalid usage of anchor elements.	logical
ariaActiveDescendantTabIndexReports elements with aria-activedescendant without tabIndex.	logical
ariaPropsReports invalid ARIA properties.	logical
ariaPropTypesReports ARIA properties with invalid value types.	logical
ariaRoleValidityReports invalid or abstract ARIA roles.	logical
ariaUnsupportedElementsReports ARIA attributes on elements that don't support them.	logical
attributeValidity	logical
autocompleteEnsure the autocomplete attribute is correct and suitable for the form field.	logical
autoFocusPropsReports autoFocus props that are not set to false.	logical
buttonTypesReports button elements without an explicit type attribute.	logical
clickEventKeyEventsReports onClick without keyboard event handlers.	logical
commentTextNodesReports JSX text nodes that contain comment syntax but are rendered as text.	logical
distractingElementsReports distracting elements like <marquee> and <blink>.	logical
headingContentsReports heading elements without accessible content.	logical
htmlLangsReports <html> elements without a lang prop.	logical
iframeTitlesReports <iframe> elements without a title prop.	logical
inputCheckedMutability	logical
interactiveElementRolesReports interactive elements with non-interactive ARIA roles.	logical
interactiveElementsFocusableReports interactive elements that are not focusable via keyboard.	logical
labelAssociatedControlsReports <label> elements without an associated control element.	logical
mediaCaptionsReports media elements without captions.	logical
mouseEventKeyEventsReports mouse events without corresponding keyboard events.	logical
nonInteractiveElementInteractionsReports non-interactive elements with interactive event handlers.	logical
nonInteractiveElementRolesReports non-interactive elements with interactive ARIA roles.	logical
nonInteractiveElementTabIndexesReports non-interactive elements with positive or zero tabIndex values.	logical
propDuplicatesDisallow duplicate props in JSX elements.	logical
roleRedundanciesReports redundant ARIA roles on elements with implicit roles.	logical
roleRequiredAriaPropsReports ARIA roles missing their required ARIA properties.	logical
roleSupportedAriaPropsReports ARIA properties that are not supported by an element's role.	logical
scopePropsReports scope props on non-th elements.	logical
scriptUrls	logical
staticElementInteractionsReports static elements with event handlers that lack ARIA roles.	logical
svgTitlesReports <svg> elements without a <title> child element.	logical
tabIndexPositiveValuesReports positive tabIndex values.	logical
anchorAmbiguousTextReports anchor elements with ambiguous text that doesn't describe the link destination.	logical (strict)
ariaHiddenFocusablesReports elements with aria-hidden='true' that are focusable.	logical (strict)
childrenWhitespace	logical (strict)
elementChildrenValidityReports void DOM elements that have children, which is invalid HTML.	logical (strict)
iframeSandboxes	logical (strict)
langValidityReports invalid lang attribute values.	logical (strict)
pureComponentShouldUpdateDefinitions	logical (strict)
renderedLiteralLeaks	logical (strict)
roleTagsReports ARIA roles that have semantic HTML element equivalents.	logical (strict)
booleanValuesPrefer shorthand boolean attributes over explicit {true} values in JSX.	stylistic
bracedStatementsDisallow unnecessary JSX curly braces around literals and JSX elements.	stylistic
childrenPropsReports usage of the children prop.	stylistic
fragmentElements	stylistic
selfClosingTags	stylistic
unescapedEntitiesDisallow unescaped HTML entities in JSX text that may cause rendering issues.	stylistic
unnecessaryFragmentsDisallow unnecessary JSX fragments that wrap a single child or have no children.	stylistic
booleanPropNames	stylistic (strict)

Selectors

Flint’s JSX plugin provides the following file selector:

• all: **/*.{jsx,tsx}