[jsx-filename-extension]: option to allow empty files

jsx-eslint · Jan 9, 2024 · 06deeb2 · 06deeb2
1 parent ca162fd
commit 06deeb2
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 0 deletions.
diff --git a/docs/rules/jsx-filename-extension.md b/docs/rules/jsx-filename-extension.md
@@ -46,6 +46,16 @@ The set of allowed extensions is configurable. By default '.jsx' is allowed. If
 }
 ```
 
+### `ignoreFilesWithoutCode` (default: `false`)
+
+If enabled, files that do not contain code (i.e. are empty, contain only whitespaces or comments) will not be rejected.
+
+```js
+"rules": {
+  "react/jsx-filename-extension": [1, { "ignoreFilesWithoutCode": true }]
+}
+```
+
 ## When Not To Use It
 
 If you don't care about restricting the file extensions that may contain JSX.
diff --git a/lib/rules/jsx-filename-extension.js b/lib/rules/jsx-filename-extension.js
@@ -16,6 +16,7 @@ const report = require('../util/report');
 const DEFAULTS = {
   allow: 'always',
   extensions: ['.jsx'],
+  ignoreFilesWithoutCode: false,
 };
 
 // ------------------------------------------------------------------------------
@@ -50,6 +51,9 @@ module.exports = {
             type: 'string',
           },
         },
+        ignoreFilesWithoutCode: {
+          type: 'boolean',
+        },
       },
       additionalProperties: false,
     }],
@@ -67,6 +71,8 @@ module.exports = {
 
     const allow = (context.options[0] && context.options[0].allow) || DEFAULTS.allow;
     const allowedExtensions = (context.options[0] && context.options[0].extensions) || DEFAULTS.extensions;
+    const ignoreFilesWithoutCode = (context.options[0] && context.options[0].ignoreFilesWithoutCode)
+      || DEFAULTS.ignoreFilesWithoutCode;
     const isAllowedExtension = allowedExtensions.some((extension) => filename.slice(-extension.length) === extension);
 
     function handleJSX(node) {
@@ -97,6 +103,9 @@ module.exports = {
         }
 
         if (isAllowedExtension && allow === 'as-needed') {
+          if (ignoreFilesWithoutCode && node.body.length === 0) {
+            return;
+          }
           report(context, messages.extensionOnlyForJSX, 'extensionOnlyForJSX', {
             node,
             data: {

diff --git a/tests/lib/rules/jsx-filename-extension.js b/tests/lib/rules/jsx-filename-extension.js
@@ -29,6 +29,13 @@ const parserOptions = {
 const withJSXElement = 'module.exports = function MyComponent() { return <div>\n<div />\n</div>; }';
 const withJSXFragment = 'module.exports = function MyComponent() { return <>\n</>; }';
 const withoutJSX = 'module.exports = {}';
+const onlyComments = [
+  '// some initial comment',
+  '',
+  '/* multiline',
+  ' * comment',
+  ' */',
+].join('\n');
 
 // ------------------------------------------------------------------------------
 // Tests
@@ -80,6 +87,16 @@ ruleTester.run('jsx-filename-extension', rule, {
       code: withJSXFragment,
       features: ['fragment'],
     },
+    {
+      filename: 'MyComponent.js',
+      code: onlyComments,
+      options: [{ allow: 'as-needed' }],
+    },
+    {
+      filename: 'MyComponent.jsx',
+      code: onlyComments,
+      options: [{ allow: 'as-needed', ignoreFilesWithoutCode: true }],
+    },
   ]),
 
   invalid: parsers.all([