tslint: enforce self closing of empty jsx elements

src/client/components/checkbox/checkbox.tsx

@@ -60,7 +60,7 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
     }
 
     return <div className={classNames("checkbox", type, className, { selected, color })} onClick={onClick}>
-      <div className="checkbox-body" style={style}></div>
+      <div className="checkbox-body" style={style} />
       {this.renderIcon()}
       {label ? <div className="label">{label}</div> : null}
     </div>;

src/client/components/drag-indicator/fancy-drag-indicator.tsx

@@ -43,7 +43,7 @@ export class FancyDragIndicator extends React.Component<FancyDragIndicatorProps,
     } else {
       ghostArrowLeft = dragPosition.replace * sectionWidth + CORE_ITEM_WIDTH / 2;
       let left = dragPosition.replace * sectionWidth;
-      dragGhostElement = <div className="drag-ghost-element" style={{ left }}></div>;
+      dragGhostElement = <div className="drag-ghost-element" style={{ left }} />;
     }
 
     return <div className="fancy-drag-indicator">

src/client/components/drop-indicator/drop-indicator.tsx

@@ -29,7 +29,7 @@ export class DropIndicator extends React.Component<DropIndicatorProps, DropIndic
 
   render() {
     return <div className="drop-indicator">
-      <div className="white-out"></div>
+      <div className="white-out" />
       <div className="action">
         <SvgIcon svg={require("../../icons/split-replace.svg")} />
       </div>

src/client/components/highlighter/highlighter.tsx

@@ -44,8 +44,8 @@ export function Highlighter(props: HighlighterProps) {
   };
 
   return <div className="highlighter">
-    <div className="whiteout left" style={whiteoutLeftStyle}></div>
-    <div className="frame" style={frameStyle}></div>
-    <div className="whiteout right" style={whiteoutRightStyle}></div>
+    <div className="whiteout left" style={whiteoutLeftStyle} />
+    <div className="frame" style={frameStyle} />
+    <div className="whiteout right" style={whiteoutRightStyle} />
   </div>;
 }

src/client/components/shpitz/shpitz.tsx

@@ -33,7 +33,7 @@ export class Shpitz extends React.Component<ShpitzProps, ShpitzState> {
     const { direction, style } = this.props;
 
     return <div className={classNames("shpitz", direction)} style={style}>
-      <div className="rectangle"></div>
+      <div className="rectangle" />
     </div>;
   }
 }

src/client/visualizations/scatterplot/heatmap.tsx

@@ -118,6 +118,5 @@ const Rectangle: React.FunctionComponent<RectangleProps> = ({
     x={xPosition}
     width={width}
     y={yPosition}
-    height={height}>
-  </rect>;
+    height={height} />;
 };

tslint.json

@@ -73,7 +73,6 @@
     "jsx-no-lambda": false, // disallow lambda in props (creates new function value and forces rerender of component)
     "jsx-no-multiline-js": false, // disallow multiline js in jsx (reduces readability)
     "jsx-no-string-ref": false, // passing string refs is discouraged in React now
-    "jsx-self-close": false, // enforce self closing of empty jsx elements
     "jsx-wrap-multiline": false, // enforce wrapping of multiline jsx elements in parens (React's de facto standard)
     "max-classes-per-file": false, // disallow multiple classes in a single file
     "no-angle-bracket-type-assertion": false, // enforce consistent "as X" type assertion style, "<X>" style is not compatible with TSX