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: ';' } ] });