jsx-filename-extension: support shorthand fragments

Author: alexzherdev

lib/rules/jsx-filename-extension.js

@@ -43,38 +43,41 @@ module.exports = {
   },
 
   create: function(context) {
+    let invalidExtension;
+    let invalidNode;
+
     function getExtensionsConfig() {
       return context.options[0] && context.options[0].extensions || DEFAULTS.extensions;
     }
 
-    let invalidExtension;
-    let invalidNode;
+    function handleJSX(node) {
+      const filename = context.getFilename();
+      if (filename === '<text>') {
+        return;
+      }
 
-    // --------------------------------------------------------------------------
-    // Public
-    // --------------------------------------------------------------------------
+      if (invalidNode) {
+        return;
+      }
 
-    return {
-      JSXElement: function(node) {
-        const filename = context.getFilename();
-        if (filename === '<text>') {
-          return;
-        }
+      const allowedExtensions = getExtensionsConfig();
+      const isAllowedExtension = allowedExtensions.some(extension => filename.slice(-extension.length) === extension);
 
-        if (invalidNode) {
-          return;
-        }
+      if (isAllowedExtension) {
+        return;
+      }
 
-        const allowedExtensions = getExtensionsConfig();
-        const isAllowedExtension = allowedExtensions.some(extension => filename.slice(-extension.length) === extension);
+      invalidNode = node;
+      invalidExtension = path.extname(filename);
+    }
 
-        if (isAllowedExtension) {
-          return;
-        }
+    // --------------------------------------------------------------------------
+    // Public
+    // --------------------------------------------------------------------------
 
-        invalidNode = node;
-        invalidExtension = path.extname(filename);
-      },
+    return {
+      JSXElement: handleJSX,
+      JSXFragment: handleJSX,
 
       'Program:exit': function() {
         if (!invalidNode) {

tests/lib/rules/jsx-filename-extension.js

@@ -23,7 +23,8 @@ const parserOptions = {
 // Code Snippets
 // ------------------------------------------------------------------------------
 
-const withJSX = 'module.exports = function MyComponent() { return <div>\n<div />\n</div>; }';
+const withJSXElement = 'module.exports = function MyComponent() { return <div>\n<div />\n</div>; }';
+const withJSXFragment = 'module.exports = function MyComponent() { return <>\n</>; }';
 const withoutJSX = 'module.exports = {}';
 
 // ------------------------------------------------------------------------------
@@ -36,29 +37,54 @@ ruleTester.run('jsx-filename-extension', rule, {
   valid: [
     {
       filename: '<text>',
-      code: withJSX
+      code: withJSXElement
     },
     {
       filename: 'MyComponent.jsx',
-      code: withJSX
+      code: withJSXElement
     }, {
       filename: 'MyComponent.js',
       options: [{extensions: ['.js', '.jsx']}],
-      code: withJSX
+      code: withJSXElement
     }, {
       filename: 'notAComponent.js',
       code: withoutJSX
+    }, {
+      filename: '<text>',
+      code: withJSXFragment,
+      parser: 'babel-eslint'
+    },
+    {
+      filename: 'MyComponent.jsx',
+      code: withJSXFragment,
+      parser: 'babel-eslint'
+    }, {
+      filename: 'MyComponent.js',
+      options: [{extensions: ['.js', '.jsx']}],
+      code: withJSXFragment,
+      parser: 'babel-eslint'
     }
   ],
 
   invalid: [
     {
       filename: 'MyComponent.js',
-      code: withJSX,
+      code: withJSXElement,
+      errors: [{message: 'JSX not allowed in files with extension \'.js\''}]
+    }, {
+      filename: 'MyComponent.jsx',
+      code: withJSXElement,
+      options: [{extensions: ['.js']}],
+      errors: [{message: 'JSX not allowed in files with extension \'.jsx\''}]
+    }, {
+      filename: 'MyComponent.js',
+      code: withJSXFragment,
+      parser: 'babel-eslint',
       errors: [{message: 'JSX not allowed in files with extension \'.js\''}]
     }, {
       filename: 'MyComponent.jsx',
-      code: withJSX,
+      code: withJSXFragment,
+      parser: 'babel-eslint',
       options: [{extensions: ['.js']}],
       errors: [{message: 'JSX not allowed in files with extension \'.jsx\''}]
     }