JSX Plugin
Flint’s JSX plugin includes rules targeted to code that renders JSX.
npm install @flint.fyi/plugin-jsxpnpm install @flint.fyi/plugin-jsxyarn install @flint.fyi/plugin-jsxPresets
Section titled “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:
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:
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], }, ],});logical
Section titled “logical”Rules that find bugs and enforce best practices and catch common pitfalls around JSX for most-to-all JavaScript and TypeScript files.
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
Section titled “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 { 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
Section titled “stylistic”Rules that enforce consistent JSX styling and best JSX stylistic practices for most-to-all JavaScript and TypeScript files.
import { jsx } from "@flint.fyi/plugin-jsx";import { defineConfig, ts } from "flint";
export default defineConfig({ use: [ { files: jsx.files.all, rules: jsx.presets.stylistic, }, ],});Implemented: 3 of 43 (6.9%)
Selectors
Section titled “Selectors”Flint’s JSX plugin provides the following file selector:
all:**/*.{jsx,tsx}