eslint-plugin-jsx-falsy
Avoid accidentally rendering falsy values in your JSX. Only works with @typescript-eslint/parser
, and uses type information.
Exposes a single eslint rule, no-falsy-and
, that errors if the left side of an inline &&
expression in JSX is a string or number. These expressions can cause unwanted values to render, and can even cause some crashes in React Native, when the string or number is falsy (""
or 0
).
Examples
Installation
You'll first need to install ESLint and @typescript-eslint/parser
:
$ yarn add --dev eslint @typescript-eslint/parser
Next, install eslint-plugin-jsx-falsy
:
$ yarn add --dev eslint-plugin-jsx-falsy
Note: If you installed ESLint globally (using yarn global
or npm install -g
) then you must also install eslint-plugin-jsx-falsy
globally.
Usage
Add jsx-falsy
to the plugins section of your .eslintrc
configuration file. You can omit the eslint-plugin-
prefix. Note that the rule won't work unless project
is specified in parserOptions
, since this rule uses type information (more details here).
Then configure the rules you want to use under the rules section.