Meta: Enable JSX linting (#2678)

package.json

@@ -72,7 +72,10 @@
 		"daily-version": "^0.12.0",
 		"dot-json": "^1.0.4",
 		"eslint": "^6.7.2",
+		"eslint-config-xo-react": "^0.20.0",
 		"eslint-config-xo-typescript": "^0.23.0",
+		"eslint-plugin-react": "^7.17.0",
+		"eslint-plugin-react-hooks": "^2.3.0",
 		"esm": "^3.2.25",
 		"fork-ts-checker-webpack-plugin": "^3.1.1",
 		"jsdom": "^15.2.1",
@@ -94,6 +97,7 @@
 		"xo": "^0.25.3"
 	},
 	"xo": {
+		"extends": "xo-react",
 		"envs": [
 			"browser"
 		],
@@ -111,7 +115,10 @@
 			"no-alert": "off",
 			"prefer-named-capture-group": "off",
 			"import/no-unassigned-import": "off",
+			"react/jsx-key": "off",
+			"react/no-unknown-property": "off",
 			"unicorn/prevent-abbreviations": "error",
+			"react/jsx-first-prop-new-line": "error",
 			"import/extensions": [
 				"error",
 				"never",
@@ -123,7 +130,10 @@
 		"overrides": [
 			{
 				"files": "**/*.+(ts|tsx)",
-				"extends": "xo-typescript",
+				"extends": [
+					"xo-typescript",
+					"xo-react"
+				],
 				"rules": {
 					"@typescript-eslint/promise-function-async": "off",
 					"@typescript-eslint/no-empty-function": "off",

source/features/add-tag-to-commits.tsx

@@ -139,7 +139,8 @@ async function init(): Promise<void | false> {
 							<a href={`/${getRepoURL()}/releases/tag/${tags}`}>{tags}</a>
 							{(i + 1) === targetTags.length ? '' : ', '}
 						</>
-					))}</span>
+					))}
+					</span>
 				</div>
 			);
 		}

source/features/comments-time-machine-links.tsx

@@ -24,7 +24,8 @@ function addInlineLinks(comment: HTMLElement, timestamp: string): void {
 			<a
 				href={linkParts.join('/') + link.hash}
 				className="muted-link tooltipped tooltipped-n"
-				aria-label="Visit as permalink">
+				aria-label="Visit as permalink"
+			>
 				{clockIcon()}
 			</a>
 		);
@@ -41,12 +42,13 @@ function addDropdownLink(comment: HTMLElement, timestamp: string): void {
 
 	appendBefore(dropdown, '.dropdown-divider',
 		<>
-			<div className="dropdown-divider" />
+			<div className="dropdown-divider"/>
 			<a
 				href={`/${getRepoURL()}/tree/HEAD@{${timestamp}}`}
 				className="dropdown-item btn-link"
 				role="menuitem"
-				title="Browse repository like it appeared on this day">
+				title="Browse repository like it appeared on this day"
+			>
 				View repo at this time
 			</a>
 		</>

source/features/copy-file.tsx

@@ -27,7 +27,8 @@ function renderButton(): void {
 				<button
 					className="btn btn-sm tooltipped tooltipped-n BtnGroup-item rgh-copy-file"
 					aria-label="Copy file to clipboard"
-					type="button">
+					type="button"
+				>
 					Copy
 				</button>
 			);

source/features/default-branch-button.tsx

@@ -28,7 +28,8 @@ async function init(): Promise<false | void> {
 		<a
 			className="btn btn-sm tooltipped tooltipped-ne"
 			href={url}
-			aria-label="See this view on the default branch">
+			aria-label="See this view on the default branch"
+		>
 			{chevronLeftIcon()}
 		</a>
 	);

source/features/deprioritize-marketplace-link.tsx

@@ -14,7 +14,7 @@ async function init(): Promise<void> {
 	await domLoaded;
 
 	select.last('.header-nav-current-user ~ .dropdown-divider')!.before(
-		<div className="dropdown-divider"></div>,
+		<div className="dropdown-divider"/>,
 		<a className="dropdown-item" href="/marketplace">Marketplace</a>
 	);
 }

source/features/download-folder-button.tsx

@@ -8,7 +8,8 @@ function init(): void {
 		buttonGroup.prepend(
 			<a
 				className="btn btn-sm BtnGroup-item"
-				href={`https://download-directory.github.io/?url=${location.href}`}>
+				href={`https://download-directory.github.io/?url=${location.href}`}
+			>
 				Download
 			</a>
 		);

source/features/edit-files-faster.tsx

@@ -22,7 +22,7 @@ async function init(): Promise<void> {
 			pathnameParts[4] = defaultBranch; // Replaces /${tag|commit}/
 		}
 
-		wrap(fileIcon, <a href={pathnameParts.join('/')} className="rgh-edit-files-faster" />);
+		wrap(fileIcon, <a href={pathnameParts.join('/')} className="rgh-edit-files-faster"/>);
 		fileIcon.after(pencilIcon());
 	}
 }

source/features/edit-readme.tsx

@@ -25,9 +25,11 @@ async function init(): Promise<void | false> {
 	}
 
 	readmeHeader.after(
-		<a href={pathnameParts.join('/')}
+		<a
+			href={pathnameParts.join('/')}
 			className="Box-btn-octicon btn-octicon float-right"
-			aria-label="Edit this file">
+			aria-label="Edit this file"
+		>
 			{pencilIcon()}
 		</a>
 	);

source/features/embed-gist-inline.tsx

@@ -33,8 +33,9 @@ async function embedGist(link: HTMLAnchorElement): Promise<void> {
 						max-height: 16em;
 						overflow-y: auto;
 					}
-				`}</style>,
-				<link rel="stylesheet" href={gistData.stylesheet} />,
+				`}
+				</style>,
+				<link rel="stylesheet" href={gistData.stylesheet}/>,
 				files
 			);
 		}

source/features/faster-pr-diff-options.tsx

@@ -14,18 +14,23 @@ function createDiffStyleToggle(): DocumentFragment {
 
 	const makeLink = (type: string, icon: Element, selected: boolean): HTMLElement => {
 		parameters.set('diff', type);
-		return <a
-			className={`btn btn-sm BtnGroup-item tooltipped tooltipped-s ${selected ? 'selected' : ''}`}
-			aria-label={`Show ${type} diffs`}
-			href={`?${String(parameters)}`}>
-			{icon}
-		</a>;
+		return (
+			<a
+				className={`btn btn-sm BtnGroup-item tooltipped tooltipped-s ${selected ? 'selected' : ''}`}
+				aria-label={`Show ${type} diffs`}
+				href={`?${String(parameters)}`}
+			>
+				{icon}
+			</a>
+		);
 	};
 
-	return <>
-		{makeLink('unified', diffIcon(), isUnified)}
-		{makeLink('split', bookIcon(), !isUnified)}
-	</>;
+	return (
+		<>
+			{makeLink('unified', diffIcon(), isUnified)}
+			{makeLink('split', bookIcon(), !isUnified)}
+		</>
+	);
 }
 
 function createWhitespaceButton(): HTMLElement {
@@ -39,20 +44,24 @@ function createWhitespaceButton(): HTMLElement {
 	}
 
 	return (
-		<a href={`?${String(searchParameters)}`}
+		<a
+			href={`?${String(searchParameters)}`}
 			data-hotkey="d w"
 			className={`btn btn-sm btn-outline tooltipped tooltipped-s ${isHidingWhitespace ? 'bg-gray-light text-gray-light' : ''}`}
-			aria-label={`${isHidingWhitespace ? 'Show' : 'Hide'} whitespace in diffs`}>
+			aria-label={`${isHidingWhitespace ? 'Show' : 'Hide'} whitespace in diffs`}
+		>
 			{isHidingWhitespace && checkIcon()} No Whitespace
 		</a>
 	);
 }
 
 function wrap(...elements: Node[]): DocumentFragment {
 	if (features.isSingleCommit()) {
-		return <div className="float-right">
+		return (
+			<div className="float-right">
 			{...elements.map(element => <div className="ml-3 BtnGroup">{element}</div>)}
-		</div>;
+			</div>
+		);
 	}
 
 	return <>{elements.map(element => <div className="diffbar-item">{element}</div>)}</>;

source/features/filter-comments-by-you.tsx

@@ -11,7 +11,8 @@ function init(): void {
 			<a
 				href={`/${repoUrl}/issues?q=is%3Aopen+commenter:${getUsername()}`}
 				className="SelectMenu-item"
-				role="menuitem">
+				role="menuitem"
+			>
 					Everything commented by you
 			</a>
 		);

source/features/follow-file-renames.tsx

@@ -47,7 +47,8 @@ function init(): false | void {
 						<a
 							href={url}
 							aria-label={`Renamed ${isNewer ? 'to' : 'from'} ${file[toKey]}`}
-							className="btn btn-outline BtnGroup-item tooltipped tooltipped-n tooltipped-no-delay">
+							className="btn btn-outline BtnGroup-item tooltipped tooltipped-n tooltipped-no-delay"
+						>
 							{button.textContent}
 						</a>
 					);