[Fix] jsx-key: improve docs and confusing error message

docs/rules/jsx-key.md

@@ -27,10 +27,32 @@ data.map((x, i) => <Hello key={i}>{x}</Hello>);
 <Hello key={id} {...{ id, caption }} />
 ```
 
+## Rule Options
+
+```js
+...
+"react/jsx-key": [<enabled>, { "checkFragmentShorthand": <boolean> }]
+...
+```
+
+### `checkFragmentShorthand` (default: `false`)
+
+When `true` the rule will check if usage of the [shorthand fragment syntax][short_syntax] requires a key. This option was added to avoid a breaking change and will be the default in the next major version. 
+
+The following patterns are considered warnings:
+
+```jsx
+[<></>, <></>, <></>];
+
+data.map(x => <>{x}</>);
+```
+
 ## When not to use
 
 If you are not using JSX then you can disable this rule.
 
 Also, if you have some prevalent situation where you use arrow functions to
 return JSX that will not be held in an iterable, you may want to disable this
 rule.
+
+[short_syntax]: https://reactjs.org/docs/fragments.html#short-syntax

lib/rules/jsx-key.js

@@ -7,6 +7,7 @@
 
 const hasProp = require('jsx-ast-utils/hasProp');
 const docsUrl = require('../util/docsUrl');
+const pragmaUtil = require('../util/pragma');
 
 
 // ------------------------------------------------------------------------------
@@ -40,6 +41,8 @@ module.exports = {
   create(context) {
     const options = Object.assign({}, defaultOptions, context.options[0]);
     const checkFragmentShorthand = options.checkFragmentShorthand;
+    const reactPragma = pragmaUtil.getFromContext(context);
+    const fragmentPragma = pragmaUtil.getFragmentFromContext(context);
 
     function checkIteratorElement(node) {
       if (node.type === 'JSXElement' && !hasProp(node.openingElement.attributes, 'key')) {
@@ -50,7 +53,7 @@ module.exports = {
       } else if (checkFragmentShorthand && node.type === 'JSXFragment') {
         context.report({
           node,
-          message: 'Missing "key" prop for element in iterator. Shorthand fragment syntax does support providing keys'
+          message: `Missing "key" prop for element in iterator. Shorthand fragment syntax does not support providing keys. Use ${reactPragma}.${fragmentPragma} instead`
         });
       }
     }
@@ -81,7 +84,7 @@ module.exports = {
         if (node.parent.type === 'ArrayExpression') {
           context.report({
             node,
-            message: 'Missing "key" prop for element in array. Shorthand fragment syntax does support providing keys'
+            message: `Missing "key" prop for element in array. Shorthand fragment syntax does not support providing keys. Use ${reactPragma}.${fragmentPragma} instead`
           });
         }
       },

tests/lib/rules/jsx-key.js

@@ -22,6 +22,13 @@ const parserOptions = {
   }
 };
 
+const settings = {
+  react: {
+    pragma: 'Act',
+    fragment: 'Frag'
+  }
+};
+
 // ------------------------------------------------------------------------------
 // Tests
 // ------------------------------------------------------------------------------
@@ -65,11 +72,13 @@ ruleTester.run('jsx-key', rule, {
     code: '[1, 2, 3].map(x => <>{x}</>);',
     parser: parsers.BABEL_ESLINT,
     options: [{checkFragmentShorthand: true}],
-    errors: [{message: 'Missing "key" prop for element in iterator. Shorthand fragment syntax does support providing keys'}]
+    settings,
+    errors: [{message: 'Missing "key" prop for element in iterator. Shorthand fragment syntax does not support providing keys. Use Act.Frag instead'}]
   }, {
     code: '[<></>];',
     parser: parsers.BABEL_ESLINT,
     options: [{checkFragmentShorthand: true}],
-    errors: [{message: 'Missing "key" prop for element in array. Shorthand fragment syntax does support providing keys'}]
+    settings,
+    errors: [{message: 'Missing "key" prop for element in array. Shorthand fragment syntax does not support providing keys. Use Act.Frag instead'}]
   }]
 });