Add jsx-intent rule (fixes #342)

README.md

@@ -67,6 +67,7 @@ Finally, enable all of the rules that you would like to use.
     "react/jsx-curly-spacing": 1,
     "react/jsx-handler-names": 1,
     "react/jsx-indent-props": 1,
+    "react/jsx-indent": 1,
     "react/jsx-key": 1,
     "react/jsx-max-props-per-line": 1,
     "react/jsx-no-bind": 1,
@@ -109,6 +110,7 @@ Finally, enable all of the rules that you would like to use.
 * [jsx-curly-spacing](docs/rules/jsx-curly-spacing.md): Enforce or disallow spaces inside of curly braces in JSX attributes
 * [jsx-handler-names](docs/rules/jsx-handler-names.md): Enforce event handler naming conventions in JSX
 * [jsx-indent-props](docs/rules/jsx-indent-props.md): Validate props indentation in JSX
+* [jsx-indent](docs/rules/jsx-indent.md): Validate JSX indentation
 * [jsx-key](docs/rules/jsx-key.md): Validate JSX has key prop when in array or iterator
 * [jsx-max-props-per-line](docs/rules/jsx-max-props-per-line.md): Limit maximum of props on a single line in JSX
 * [jsx-no-bind](docs/rules/jsx-no-bind.md): Prevent usage of `.bind()` and arrow functions in JSX props

docs/rules/jsx-indent.md

@@ -0,0 +1,79 @@
+# Validate JSX indentation (jsx-indent)
+
+This option validates a specific indentation style for JSX.
+
+## Rule Details
+
+This rule is aimed to enforce consistent indentation style. The default style is `4 spaces`.
+
+The following patterns are considered warnings:
+
+```jsx
+// 2 spaces indentation
+<App>
+  <Hello />
+</App>
+
+// no indentation
+<App>
+<Hello />
+</App>
+
+// 1 tab indentation
+<App>
+  <Hello />
+</App>
+```
+
+## Rule Options
+
+It takes an option as the second parameter which can be `"tab"` for tab-based indentation or a positive number for space indentations.
+
+```js
+...
+"jsx-indent": [<enabled>, 'tab'|<number>]
+...
+```
+
+The following patterns are considered warnings:
+
+```jsx
+// 2 spaces indentation
+// [2, 2]
+<App>
+    <Hello />
+</App>
+
+// tab indentation
+// [2, 'tab']
+<App>
+  <Hello />
+</App>
+```
+
+The following patterns are not warnings:
+
+```jsx
+
+// 2 spaces indentation
+// [2, 2]
+<App>
+  <Hello />
+</App>
+
+// tab indentation
+// [2, 'tab']
+<App>
+  <Hello />
+</App>
+
+// no indentation
+// [2, 0]
+<App>
+<Hello />
+</App>
+```
+
+## When not to use
+
+If you are not using JSX then you can disable this rule.

index.js

@@ -32,6 +32,7 @@ module.exports = {
     'jsx-max-props-per-line': require('./lib/rules/jsx-max-props-per-line'),
     'jsx-no-literals': require('./lib/rules/jsx-no-literals'),
     'jsx-indent-props': require('./lib/rules/jsx-indent-props'),
+    'jsx-indent': require('./lib/rules/jsx-indent'),
     'jsx-closing-bracket-location': require('./lib/rules/jsx-closing-bracket-location'),
     'no-direct-mutation-state': require('./lib/rules/no-direct-mutation-state'),
     'forbid-prop-types': require('./lib/rules/forbid-prop-types'),
@@ -70,6 +71,7 @@ module.exports = {
     'jsx-max-props-per-line': 0,
     'jsx-no-literals': 0,
     'jsx-indent-props': 0,
+    'jsx-indent': 0,
     'jsx-closing-bracket-location': 0,
     'no-direct-mutation-state': 0,
     'forbid-prop-types': 0,

lib/rules/jsx-indent.js

@@ -0,0 +1,162 @@
+/**
+ * @fileoverview Validate props indentation in JSX
+ * @author Yannick Croissant
+
+ * This rule has been ported and modified from eslint and nodeca.
+ * @author Vitaly Puzrin
+ * @author Gyandeep Singh
+ * @copyright 2015 Vitaly Puzrin. All rights reserved.
+ * @copyright 2015 Gyandeep Singh. All rights reserved.
+ Copyright (C) 2014 by Vitaly Puzrin
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the 'Software'), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in
+ all copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ THE SOFTWARE.
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+module.exports = function(context) {
+
+  var MESSAGE = 'Expected indentation of {{needed}} {{type}} {{characters}} but found {{gotten}}.';
+
+  var extraColumnStart = 0;
+  var indentType = 'space';
+  var indentSize = 4;
+
+  if (context.options.length) {
+    if (context.options[0] === 'tab') {
+      indentSize = 1;
+      indentType = 'tab';
+    } else if (typeof context.options[0] === 'number') {
+      indentSize = context.options[0];
+      indentType = 'space';
+    }
+  }
+
+  /**
+   * Reports a given indent violation and properly pluralizes the message
+   * @param {ASTNode} node Node violating the indent rule
+   * @param {Number} needed Expected indentation character count
+   * @param {Number} gotten Indentation character count in the actual node/code
+   * @param {Object=} loc Error line and column location
+   */
+  function report(node, needed, gotten, loc) {
+    var msgContext = {
+      needed: needed,
+      type: indentType,
+      characters: needed === 1 ? 'character' : 'characters',
+      gotten: gotten
+    };
+
+    if (loc) {
+      context.report(node, loc, MESSAGE, msgContext);
+    } else {
+      context.report(node, MESSAGE, msgContext);
+    }
+  }
+
+  /**
+   * Get node indent
+   * @param {ASTNode} node Node to examine
+   * @param {Boolean} byLastLine get indent of node's last line
+   * @param {Boolean} excludeCommas skip comma on start of line
+   * @return {Number} Indent
+   */
+  function getNodeIndent(node, byLastLine, excludeCommas) {
+    byLastLine = byLastLine || false;
+    excludeCommas = excludeCommas || false;
+
+    var src = context.getSource(node, node.loc.start.column + extraColumnStart);
+    var lines = src.split('\n');
+    if (byLastLine) {
+      src = lines[lines.length - 1];
+    } else {
+      src = lines[0];
+    }
+
+    var skip = excludeCommas ? ',' : '';
+
+    var regExp;
+    if (indentType === 'space') {
+      regExp = new RegExp('^[ ' + skip + ']+');
+    } else {
+      regExp = new RegExp('^[\t' + skip + ']+');
+    }
+
+    var indent = regExp.exec(src);
+    return indent ? indent[0].length : 0;
+  }
+
+  /**
+   * Checks node is the first in its own start line. By default it looks by start line.
+   * @param {ASTNode} node The node to check
+   * @return {Boolean} true if its the first in the its start line
+   */
+  function isNodeFirstInLine(node) {
+    var token = node;
+    do {
+      token = context.getTokenBefore(token);
+    } while (token.type === 'JSXText');
+    var startLine = node.loc.start.line;
+    var endLine = token ? token.loc.end.line : -1;
+
+    return startLine !== endLine;
+  }
+
+  /**
+   * Check indent for nodes list
+   * @param {ASTNode[]} nodes list of node objects
+   * @param {Number} indent needed indent
+   * @param {Boolean} excludeCommas skip comma on start of line
+   */
+  function checkNodesIndent(node, indent, excludeCommas) {
+    var nodeIndent = getNodeIndent(node, false, excludeCommas);
+    if (nodeIndent !== indent && isNodeFirstInLine(node)) {
+      report(node, indent, nodeIndent);
+    }
+  }
+
+  return {
+    JSXOpeningElement: function(node) {
+      if (!node.parent || !node.parent.parent) {
+        return;
+      }
+      var parentElementIndent = getNodeIndent(node.parent.parent);
+      var indent = node.parent.parent.loc.start.line === node.loc.start.line ? 0 : indentSize;
+      checkNodesIndent(node, parentElementIndent + indent);
+    },
+    JSXClosingElement: function(node) {
+      if (!node.parent) {
+        return;
+      }
+      var peerElementIndent = getNodeIndent(node.parent.openingElement);
+      checkNodesIndent(node, peerElementIndent);
+    }
+  };
+
+};
+
+module.exports.schema = [{
+  oneOf: [{
+    enum: ['tab']
+  }, {
+    type: 'integer'
+  }]
+}];