[Fix] jsx-closing-bracket-location: In tag-aligned, made a distinction between tabs and spaces

Fixes ##756.

Author: Moong0122

CHANGELOG.md

@@ -16,7 +16,9 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 * [`jsx-handler-names`]: handle whitespace ([#2789][] @AriPerkkio)
 * [`prop-types`]: Detect TypeScript types for destructured default prop values ([#2780][] @sunghyunjo)
 * [`jsx-pascal-case`]: Handle single character namespaced component ([#2791][] @daviferreira)
+* [`jsx-closing-bracket-location`]: In `tag-aligned`, made a distinction between tabs and spaces ([#2796][] @Moong0122)
 
+[#2796]: https://github.com/yannickcr/eslint-plugin-react/pull/2796
 [#2791]: https://github.com/yannickcr/eslint-plugin-react/pull/2791
 [#2789]: https://github.com/yannickcr/eslint-plugin-react/pull/2789
 [#2780]: https://github.com/yannickcr/eslint-plugin-react/pull/2780

lib/rules/jsx-closing-bracket-location.js

@@ -201,11 +201,17 @@ module.exports = {
         };
       }
       const openingLine = sourceCode.lines[opening.line - 1];
+      const closingLine = sourceCode.lines[closing.line - 1];
+      const isTab = {
+        openTab: /^\t/.test(openingLine),
+        closeTab: /^\t/.test(closingLine)
+      };
       const openingStartOfLine = {
         column: /^\s*/.exec(openingLine)[0].length,
         line: opening.line
       };
       return {
+        isTab,
         tag,
         opening,
         closing,
@@ -239,11 +245,17 @@ module.exports = {
       'JSXOpeningElement:exit'(node) {
         const attributeNode = lastAttributeNode[getOpeningElementId(node)];
         const cachedLastAttributeEndPos = attributeNode ? attributeNode.range[1] : null;
+
         let expectedNextLine;
         const tokens = getTokensLocations(node);
         const expectedLocation = getExpectedLocation(tokens);
+        let usingSameIndentation = true;
+
+        if (expectedLocation === 'tag-aligned') {
+          usingSameIndentation = tokens.isTab.openTab === tokens.isTab.closeTab;
+        }
 
-        if (hasCorrectLocation(tokens, expectedLocation)) {
+        if (hasCorrectLocation(tokens, expectedLocation) && usingSameIndentation) {
           return;
         }
 

tests/lib/rules/jsx-closing-bracket-location.js

@@ -1689,5 +1689,81 @@ ruleTester.run('jsx-closing-bracket-location', rule, {
       line: 4,
       column: 6
     }]
+  }, {
+    code: [
+      '\t\t<div',
+      '\t\t\tclassName={styles}',
+      '  >',
+      '\t\t\t{props}',
+      '\t\t</div>'
+    ].join('\n'),
+    output: [
+      '\t\t<div',
+      '\t\t\tclassName={styles}',
+      '\t\t>',
+      '\t\t\t{props}',
+      '\t\t</div>'
+    ].join('\n'),
+    options: [{location: 'tag-aligned'}],
+    errors: [{
+      message: messageWithDetails(MESSAGE_TAG_ALIGNED, 3, false),
+      line: 3,
+      column: 3
+    }]
+  }, {
+    code: [
+      '  <div',
+      '    className={styles}',
+      '\t\t>',
+      '    {props}',
+      '  </div>'
+    ].join('\n'),
+    output: [
+      '  <div',
+      '    className={styles}',
+      '  >',
+      '    {props}',
+      '  </div>'
+    ].join('\n'),
+    options: [{location: 'tag-aligned'}],
+    errors: [{
+      message: messageWithDetails(MESSAGE_TAG_ALIGNED, 3, false),
+      line: 3,
+      column: 3
+    }]
+  }, {
+    code: [
+      '  <App',
+      '    foo',
+      '\t\t/>'
+    ].join('\n'),
+    output: [
+      '  <App',
+      '    foo',
+      '  />'
+    ].join('\n'),
+    options: [{location: 'tag-aligned'}],
+    errors: [{
+      message: messageWithDetails(MESSAGE_TAG_ALIGNED, 3, false),
+      line: 3,
+      column: 3
+    }]
+  }, {
+    code: [
+      '\t\t<App',
+      '\t\t\tfoo',
+      '  />'
+    ].join('\n'),
+    output: [
+      '\t\t<App',
+      '\t\t\tfoo',
+      '\t\t/>'
+    ].join('\n'),
+    options: [{location: 'tag-aligned'}],
+    errors: [{
+      message: messageWithDetails(MESSAGE_TAG_ALIGNED, 3, false),
+      line: 3,
+      column: 3
+    }]
   }]
 });