New jsx-filename-extension: Add allow option

jsx-eslint · Aug 8, 2020 · 729678b · 729678b
1 parent da960ed
commit 729678b
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 1 deletion.
diff --git a/docs/rules/jsx-filename-extension.md b/docs/rules/jsx-filename-extension.md
@@ -22,6 +22,18 @@ function MyComponent() {
 
 ## Rule Options
 
+### `allow` (default: `"always"`)
+
+When to allow a JSX filename extension. By default all files may have a JSX extension. Set this to `as-needed` to only allow JSX file extensions in files that contain JSX syntax.
+
+```js
+"rules": {
+  "react/jsx-filename-extension": [1, { "allow": "as-needed" }]
+}
+```
+
+### `extensions` (default: `[".jsx"]`)
+
 The set of allowed extensions is configurable. By default '.jsx' is allowed. If you wanted to allow both '.jsx' and '.js', the configuration would be:
 
 ```js

diff --git a/lib/rules/jsx-filename-extension.js b/lib/rules/jsx-filename-extension.js
@@ -13,6 +13,7 @@ const docsUrl = require('../util/docsUrl');
 // ------------------------------------------------------------------------------
 
 const DEFAULTS = {
+  allow: 'always',
   extensions: ['.jsx']
 };
 
@@ -32,6 +33,9 @@ module.exports = {
     schema: [{
       type: 'object',
       properties: {
+        allow: {
+          enum: ['always', 'as-needed']
+        },
         extensions: {
           type: 'array',
           items: {
@@ -53,6 +57,7 @@ module.exports = {
       return {};
     }
 
+    const allow = (context.options[0] && context.options[0].allow) || DEFAULTS.allow;
     const allowedExtensions = (context.options[0] && context.options[0].extensions) || DEFAULTS.extensions;
     const isAllowedExtension = allowedExtensions.some((extension) => filename.slice(-extension.length) === extension);
 
@@ -70,14 +75,22 @@ module.exports = {
       JSXElement: handleJSX,
       JSXFragment: handleJSX,
 
-      'Program:exit'() {
+      'Program:exit'(node) {
         if (jsxNode) {
           if (!isAllowedExtension) {
             context.report({
               node: jsxNode,
               message: `JSX not allowed in files with extension '${path.extname(filename)}'`
             });
           }
+          return;
+        }
+
+        if (isAllowedExtension && allow === 'as-needed') {
+          context.report({
+            node,
+            message: `Only files containing JSX may use the extension '${path.extname(filename)}'`
+          });
         }
       }
     };

diff --git a/tests/lib/rules/jsx-filename-extension.js b/tests/lib/rules/jsx-filename-extension.js
@@ -45,6 +45,14 @@ ruleTester.run('jsx-filename-extension', rule, {
     {
       filename: 'MyComponent.jsx',
       code: withJSXElement
+    }, {
+      filename: 'MyComponent.js',
+      code: withoutJSX,
+      options: [{allow: 'as-needed'}]
+    }, {
+      filename: 'MyComponent.jsx',
+      code: withJSXElement,
+      options: [{allow: 'as-needed'}]
     }, {
       filename: 'MyComponent.js',
       options: [{extensions: ['.js', '.jsx']}],
@@ -74,6 +82,11 @@ ruleTester.run('jsx-filename-extension', rule, {
       filename: 'MyComponent.js',
       code: withJSXElement,
       errors: [{message: 'JSX not allowed in files with extension \'.js\''}]
+    }, {
+      filename: 'MyComponent.jsx',
+      code: withoutJSX,
+      options: [{allow: 'as-needed'}],
+      errors: [{message: 'Only files containing JSX may use the extension \'.jsx\''}]
     }, {
       filename: 'MyComponent.jsx',
       code: withJSXElement,