diff --git a/docs/rules/jsx-sort-props.md b/docs/rules/jsx-sort-props.md
index 2b8e36e295..0846c43639 100644
--- 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:
```
+### `ignoreTags`
+
+An array of element (tag) names to ignore when checking the properties order.
+
+With `ignoreTags: ["Can"]`, the following will **not** warn:
+
+```jsx
+
+```
+
## 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
index 5e0402d1ce..3c7471a556 100644
--- 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
index cffd4b37f0..9ddb02006e 100644
--- 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: '',
options: reservedFirstWithShorthandLast
+ },
+ {
+ code: ';',
+ options: ignoreTagsApp
}
],
invalid: [
@@ -484,6 +491,12 @@ ruleTester.run('jsx-sort-props', rule, {
code: '',
options: reservedFirstAsInvalidArrayArgs,
errors: [expectedInvalidReservedFirstError]
+ },
+ {
+ code: ';',
+ options: ignoreTagsApp,
+ errors: [expectedError],
+ output: ';'
}
]
});