-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adds jsx-no-ampersands #1
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
// NOTE: Base config ran from `npx eslint --init` | ||
{ | ||
"env": { | ||
"browser": true, | ||
"commonjs": true, | ||
"es2021": true | ||
}, | ||
"parserOptions": { | ||
"ecmaVersion": 12 | ||
}, | ||
"rules": { | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -102,3 +102,6 @@ dist | |
|
||
# TernJS port file | ||
.tern-port | ||
|
||
# VSCode | ||
.vscode/ |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
## Disallow && condition inside JSX Embed. (react/jsx-embed-condition) | ||
This rule disallows use of && inside JSX Embeds to avoid conditional numbers from being rendered. | ||
|
||
## Why? | ||
Here is an [acrticle](https://kentcdodds.com/blog/use-ternaries-rather-than-and-and-in-jsx) explaining the problems that can happen when you use && to conditionally render content in JSX. | ||
|
||
## Rule Details | ||
Examples of incorrect code for this rule: | ||
|
||
<div> | ||
{x && <MyProfile />} | ||
</div> | ||
<div> | ||
{x || y && <strong>Hello</strong>} | ||
</div> | ||
Examples of correct code for this rule: | ||
|
||
<div> | ||
{x ? <MyProfile /> : null} | ||
</div> | ||
// -- | ||
<div> | ||
{x || y ? <strong>Hello</strong> : null} | ||
</div> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
/** | ||
* Minimal configuration based on `eslint-plugin-react` | ||
* @see: https://github.com/yannickcr/eslint-plugin-react/blob/master/index.js | ||
*/ | ||
|
||
const allRules = { | ||
'jsx-no-ampersands': require('./lib/rules/jsx-no-ampersands'), | ||
} | ||
|
||
module.exports = { | ||
rules: allRules, | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
/** | ||
* @fileoverview Prevents usage of && condition in JSX Embeds. | ||
* @author Anees Iqbal <i@steelbrain.me> | ||
* @see: https://github.com/yannickcr/eslint-plugin-react/blob/ee232bbaef4fb04740413d5048877559abf06222/lib/rules/jsx-embed-condition.js | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. OOO cool, it looks like adding jsx-embed-condition to There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. From the discussion being had on their PR it doesn't seem like they are moving forward with it, so we're adding it ourselves for or own use case |
||
* @see: https://kentcdodds.com/blog/use-ternaries-rather-than-and-and-in-jsx | ||
*/ | ||
'use strict'; | ||
|
||
module.exports = { | ||
// NOTE [@niculistana]: this is a slimmed down version of the export which does not include docs | ||
|
||
create(context) { | ||
return { | ||
JSXExpressionContainer(node) { | ||
if ( | ||
node.parent == null | ||
|| node.parent.type !== 'JSXElement' | ||
|| node.expression == null | ||
|| node.expression.type !== 'LogicalExpression' | ||
|| node.expression.operator === '??' | ||
) { | ||
return; | ||
} | ||
context.report({ | ||
node, | ||
message: 'Using && to condition JSX embeds is forbidden. Convert it to a ternary operation instead' | ||
}); | ||
} | ||
}; | ||
} | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Typo!