Merge pull request #1588 from louisscruz/bool-props-message

Allow for Boolean Prop Naming Custom Message
jsx-eslint · Dec 13, 2017 · 292ebed · 292ebed
2 parents f6e4c89 + 37902d4
commit 292ebed
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 3 deletions.
diff --git a/docs/rules/boolean-prop-naming.md b/docs/rules/boolean-prop-naming.md
@@ -30,7 +30,7 @@ var Hello = createReactClass({
 
 ```js
 ...
-"react/boolean-prop-naming": [<enabled>, { "propTypeNames": Array<string>, "rule": <string> }]
+"react/boolean-prop-naming": [<enabled>, { "propTypeNames": Array<string>, "rule": <string>, "message": <string> }]
 ...
 ```
 
@@ -65,3 +65,24 @@ For supporting "is" naming:
 ```jsx
 "react/boolean-prop-naming": ["error", { "rule": "^is[A-Z]([A-Za-z0-9]?)+" }]
 ```
+
+### `message`
+
+The custom message to display upon failure to match the rule. This overrides the default message.
+
+If you choose to use a custom message, you have access to two template variables.
+
+* `propName` – the name of the prop that does not match the pattern
+* `pattern` – the pattern against which all prop names are tested
+
+For example, if a prop is named `something`, and if the rule's pattern is set to `"^(is|has)[A-Z]([A-Za-z0-9]?)+"`, you could set the custom message as follows:
+
+```js
+message: 'It is better if your prop ({{ propName }}) matches this pattern: ({{ pattern }})'
+```
+
+And the failure would look like so:
+
+```
+It is better if your prop (something) matches this pattern: (^is[A-Z]([A-Za-z0-9]?)+)
+```
diff --git a/lib/rules/boolean-prop-naming.js b/lib/rules/boolean-prop-naming.js
@@ -35,6 +35,10 @@ module.exports = {
           default: '^(is|has)[A-Z]([A-Za-z0-9]?)+',
           minLength: 1,
           type: 'string'
+        },
+        message: {
+          minLength: 1,
+          type: 'string'
         }
       },
       type: 'object'
@@ -131,9 +135,11 @@ module.exports = {
         const propName = getPropName(propNode);
         context.report({
           node: propNode,
-          message: `Prop name (${propName}) doesn't match rule (${config.rule})`,
+          message: config.message || 'Prop name ({{ propName }}) doesn\'t match rule ({{ pattern }})',
           data: {
-            component: propName
+            component: propName,
+            propName: propName,
+            pattern: config.rule
           }
         });
       });

diff --git a/tests/lib/rules/boolean-prop-naming.js b/tests/lib/rules/boolean-prop-naming.js
@@ -634,5 +634,35 @@ ruleTester.run('boolean-prop-naming', rule, {
     errors: [{
       message: 'Prop name (showScore) doesn\'t match rule (^(is|has)[A-Z]([A-Za-z0-9]?)+)'
     }]
+  }, {
+    // If a custom message is provided, use it.
+    code: `
+      class Hello extends React.Component {
+        render () { return <div />; }
+      }
+      Hello.propTypes = {something: PropTypes.bool}
+    `,
+    options: [{
+      rule: '^is[A-Z]([A-Za-z0-9]?)+',
+      message: 'Boolean prop names must begin with either \'is\' or \'has\''
+    }],
+    errors: [{
+      message: 'Boolean prop names must begin with either \'is\' or \'has\''
+    }]
+  }, {
+    // Custom messages use ESLint string templating.
+    code: `
+      class Hello extends React.Component {
+        render () { return <div />; }
+      }
+      Hello.propTypes = {something: PropTypes.bool}
+    `,
+    options: [{
+      rule: '^is[A-Z]([A-Za-z0-9]?)+',
+      message: 'It is better if your prop ({{ propName }}) matches this pattern: ({{ pattern }})'
+    }],
+    errors: [{
+      message: 'It is better if your prop (something) matches this pattern: (^is[A-Z]([A-Za-z0-9]?)+)'
+    }]
   }]
 });