Skip to content

Commit

Permalink
Add jsx-boolean-value rule (fixes #11)
Browse files Browse the repository at this point in the history
  • Loading branch information
yannickcr committed Apr 6, 2015
1 parent 62ba591 commit 50061e4
Show file tree
Hide file tree
Showing 5 changed files with 107 additions and 2 deletions.
2 changes: 2 additions & 0 deletions README.md
100644 → 100755
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ Finally, enable all of the rules that you would like to use.
{
"rules": {
"react/display-name": 1,
"react/jsx-boolean-value": 1,
"react/jsx-quotes": 1,
"react/jsx-no-undef": 1,
"react/jsx-sort-props": 1,
Expand All @@ -63,6 +64,7 @@ Finally, enable all of the rules that you would like to use.
# List of supported rules

* [display-name](docs/rules/display-name.md): Prevent missing displayName in a React component definition
* [jsx-boolean-value](docs/rules/jsx-boolean-value.md): Enforce boolean attributes notation in JSX
* [jsx-quotes](docs/rules/jsx-quotes.md): Enforce quote style for JSX attributes
* [jsx-no-undef](docs/rules/jsx-no-undef.md): Disallow undeclared variables in JSX
* [jsx-sort-props](docs/rules/jsx-sort-props.md): Enforce props alphabetical sorting
Expand Down
35 changes: 35 additions & 0 deletions docs/rules/jsx-boolean-value.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
# Enforce boolean attributes notation in JSX (jsx-boolean-value)

In JSX when using a boolean attribute you can set the attribute value to `true` or omit the value. This rule will enforce one or the other to keep consistency in your code.

## Rule Details

This rule takes one argument. If it is `"always"` then it warns whenever an attribute is missing it's value. If `"never"` then it warns if an attribute has a `true` value. The default value of this option is `"never"`.

The following patterns are considered warnings when configured `"never"`:

```js
var Hello = <Hello personal={true} />;
```

The following patterns are not considered warnings when configured `"never"`:

```js
var Hello = <Hello personal />;
```

The following patterns are considered warnings when configured `"always"`:

```js
var Hello = <Hello personal />;
```

The following patterns are not considered warnings when configured `"always"`:

```js
var Hello = <Hello personal={true} />;
```

## When Not To Use It

If you do not want to enforce any style for boolean attributes, then you can disable this rule.
6 changes: 4 additions & 2 deletions index.js
100644 → 100755
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ module.exports = {
'jsx-no-undef': require('./lib/rules/jsx-no-undef'),
'jsx-quotes': require('./lib/rules/jsx-quotes'),
'no-unknown-property': require('./lib/rules/no-unknown-property'),
'jsx-sort-props': require('./lib/rules/jsx-sort-props')
'jsx-sort-props': require('./lib/rules/jsx-sort-props'),
'jsx-boolean-value': require('./lib/rules/jsx-boolean-value')
},
rulesConfig: {
'jsx-uses-react': 0,
Expand All @@ -31,6 +32,7 @@ module.exports = {
'jsx-no-undef': 0,
'jsx-quotes': 0,
'no-unknown-property': 0,
'jsx-sort-props': 0
'jsx-sort-props': 0,
'jsx-boolean-value': 0
}
};
36 changes: 36 additions & 0 deletions lib/rules/jsx-boolean-value.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/**
* @fileoverview Enforce boolean attributes notation in JSX
* @author Yannick Croissant
*/
'use strict';

// ------------------------------------------------------------------------------
// Rule Definition
// ------------------------------------------------------------------------------

module.exports = function(context) {

var configuration = context.options[0] || {};

var NEVER_MESSAGE = 'Value must be omitted for boolean attributes';
var ALWAYS_MESSAGE = 'Value must be set for boolean attributes';

return {
JSXAttribute: function(node) {
switch (configuration) {
case 'always':
if (node.value === null) {
context.report(node, ALWAYS_MESSAGE);
}
break;
case 'never':
if (node.value && node.value.type === 'JSXExpressionContainer' && node.value.expression.value === true) {
context.report(node, NEVER_MESSAGE);
}
break;
default:
break;
}
}
};
};
30 changes: 30 additions & 0 deletions tests/lib/rules/jsx-boolean-value.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/**
* @fileoverview Enforce boolean attributes notation in JSX
* @author Yannick Croissant
*/
'use strict';

// ------------------------------------------------------------------------------
// Requirements
// ------------------------------------------------------------------------------

var eslint = require('eslint').linter;
var ESLintTester = require('eslint-tester');

// ------------------------------------------------------------------------------
// Tests
// ------------------------------------------------------------------------------

var eslintTester = new ESLintTester(eslint);
eslintTester.addRuleTest('lib/rules/jsx-boolean-value', {
valid: [
{code: '<App foo />;', args: [1, 'never'], ecmaFeatures: {jsx: true}},
{code: '<App foo={true} />;', args: [1, 'always'], ecmaFeatures: {jsx: true}}
],
invalid: [
{code: '<App foo={true} />;', args: [1, 'never'],
errors: [{message: 'Value must be omitted for boolean attributes'}], ecmaFeatures: {jsx: true}},
{code: '<App foo />;', args: [1, 'always'],
errors: [{message: 'Value must be set for boolean attributes'}], ecmaFeatures: {jsx: true}}
]
});

0 comments on commit 50061e4

Please sign in to comment.