JSX linting
quick-lint-js supports JSX in JavaScript and TypeScript code. Different web frameworks, such as React.js, treat JSX differently. quick-lint-js has different diagnostics for different frameworks.
JSX modes
quick-lint-js has a configurable JSX mode which determines which diagnostics are reported, if any, for invalid JSX use.
| JSX mode | Description |
|---|---|
"auto" (default) |
See below |
"react" |
React.js |
"none" |
JSX is allowed, but no framework-specific diagnostics are reported |
You can specify the JSX mode explicitly by creating a quick-lint-js.config file. This is useful if quick-lint-js fails to automatically detect your framework. For example:
{
"jsx-mode": "react"
}import "react";
Specifying a JSX mode in quick-lint-js.config was introduced in
quick-lint-js version 3.1.0. Prior to version 3.1.0, the JSX mode was
always "react".
"auto" JSX mode
By default, quick-lint-js's JSX mode is
"auto". If the JSX mode is
"auto", then quick-lint-js will guess which
framework you are using based on
import statements in your code:
| Import | Guessed JSX mode |
|---|---|
import React from "react";
|
"react" |
import ReactDOM from "react-dom";
|
"react" |
import ReactDOM from "react-dom/client";
|
"react" |
import ReactDOM from "react-dom/server";
|
"react" |
(none of the above
import statements)
|
"none" |
| (multiple JSX modes detected) | "none" |
The "auto" JSX mode was introduced in
quick-lint-js version 3.1.0.
React.js ("react" JSX mode)
quick-lint-js detects misuse of JSX with the React.js framework if the
JSX mode is "react".
React.js-specific diagnostics: E0191, E0192, E0193
import React from "react";
export function CommentButton({onClick}) {
return (
<button
onclick={onClick}
accesskey="c"
class="red-button"
>
Comment
</button>
);
}
The "react" JSX mode was introduced
quick-lint-js version 2.0.0. The "react" JSX
mode was the default JSX mode until quick-lint-js version 3.1.0.