diff --git a/README.md b/README.md old mode 100644 new mode 100755 index 0793baf295..667d04427e --- a/README.md +++ b/README.md @@ -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, @@ -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 diff --git a/docs/rules/jsx-boolean-value.md b/docs/rules/jsx-boolean-value.md new file mode 100755 index 0000000000..5b11d8bed8 --- /dev/null +++ b/docs/rules/jsx-boolean-value.md @@ -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 = ; +``` + +The following patterns are not considered warnings when configured `"never"`: + +```js +var Hello = ; +``` + +The following patterns are considered warnings when configured `"always"`: + +```js +var Hello = ; +``` + +The following patterns are not considered warnings when configured `"always"`: + +```js +var Hello = ; +``` + +## When Not To Use It + +If you do not want to enforce any style for boolean attributes, then you can disable this rule. diff --git a/index.js b/index.js old mode 100644 new mode 100755 index fcf197c34a..e31712ffe5 --- a/index.js +++ b/index.js @@ -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, @@ -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 } }; diff --git a/lib/rules/jsx-boolean-value.js b/lib/rules/jsx-boolean-value.js new file mode 100755 index 0000000000..acf12eaea4 --- /dev/null +++ b/lib/rules/jsx-boolean-value.js @@ -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; + } + } + }; +}; diff --git a/tests/lib/rules/jsx-boolean-value.js b/tests/lib/rules/jsx-boolean-value.js new file mode 100755 index 0000000000..8c01a07428 --- /dev/null +++ b/tests/lib/rules/jsx-boolean-value.js @@ -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: ';', args: [1, 'never'], ecmaFeatures: {jsx: true}}, + {code: ';', args: [1, 'always'], ecmaFeatures: {jsx: true}} + ], + invalid: [ + {code: ';', args: [1, 'never'], + errors: [{message: 'Value must be omitted for boolean attributes'}], ecmaFeatures: {jsx: true}}, + {code: ';', args: [1, 'always'], + errors: [{message: 'Value must be set for boolean attributes'}], ecmaFeatures: {jsx: true}} + ] +});