Add jsx-sort-props ignoreTags option

jsx-eslint · Apr 30, 2021 · fa43041 · fa43041
1 parent 1185b37
commit fa43041
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 0 deletions.
diff --git a/docs/rules/jsx-sort-props.md b/docs/rules/jsx-sort-props.md
@@ -98,6 +98,16 @@ With `reservedFirst: ["key"]`, the following will **not** warn:
 <Hello key={'uuid'} name="John" ref="ref" />
 ```
 
+### `ignoreTags`
+
+An array of element (tag) names to ignore when checking the properties order.
+
+With `ignoreTags: ["Can"]`, the following will **not** warn:
+
+```jsx
+<Can i="create" a="post" />
+```
+
 ## When not to use
 
 This rule is a formatting preference and not following it won't negatively affect the quality of your code. If alphabetizing props isn't a part of your coding standards, then you can leave this rule off.
diff --git a/lib/rules/jsx-sort-props.js b/lib/rules/jsx-sort-props.js
@@ -249,6 +249,9 @@ module.exports = {
         },
         reservedFirst: {
           type: ['array', 'boolean']
+        },
+        ignoreTags: {
+          type: 'array'
         }
       },
       additionalProperties: false
@@ -265,9 +268,27 @@ module.exports = {
     const reservedFirst = configuration.reservedFirst || false;
     const reservedFirstError = validateReservedFirstConfig(context, reservedFirst);
     let reservedList = Array.isArray(reservedFirst) ? reservedFirst : RESERVED_PROPS_LIST;
+    const ignoreTags = configuration.ignoreTags || [];
+    const getTagNameFromMemberExpression = (node) => `${node.property.parent.object.name}.${node.property.name}`;
 
     return {
       JSXOpeningElement(node) {
+        if (ignoreTags.length > 0) {
+          const jsxOpeningElement = node.name;
+          const type = jsxOpeningElement.type;
+          let tagName;
+          if (type === 'JSXIdentifier') {
+            tagName = jsxOpeningElement.name;
+          } else if (type === 'JSXMemberExpression') {
+            tagName = getTagNameFromMemberExpression(jsxOpeningElement);
+          } else {
+            tagName = undefined;
+          }
+          if (tagName && ignoreTags.includes(tagName)) {
+            return;
+          }
+        }
+
         // `dangerouslySetInnerHTML` is only "reserved" on DOM components
         if (reservedFirst && !jsxUtil.isDOMComponent(node)) {
           reservedList = reservedList.filter((prop) => prop !== 'dangerouslySetInnerHTML');

diff --git a/tests/lib/rules/jsx-sort-props.js b/tests/lib/rules/jsx-sort-props.js
@@ -99,6 +99,9 @@ const reservedFirstAsEmptyArrayArgs = [{
 const reservedFirstAsInvalidArrayArgs = [{
   reservedFirst: ['notReserved']
 }];
+const ignoreTagsApp = [{
+  ignoreTags: ['App']
+}];
 
 ruleTester.run('jsx-sort-props', rule, {
   valid: [
@@ -165,6 +168,10 @@ ruleTester.run('jsx-sort-props', rule, {
     {
       code: '<App key="key" c="c" b />',
       options: reservedFirstWithShorthandLast
+    },
+    {
+      code: '<App c b a />;',
+      options: ignoreTagsApp
     }
   ],
   invalid: [
@@ -484,6 +491,10 @@ ruleTester.run('jsx-sort-props', rule, {
       code: '<App key={5} />',
       options: reservedFirstAsInvalidArrayArgs,
       errors: [expectedInvalidReservedFirstError]
+    },
+    {
+      code: '<NoApp c b a />;',
+      options: ignoreTagsApp
     }
   ]
 });