Use prettier to sort imports

.prettierrc

@@ -1,6 +1,10 @@
 {
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
   "tabWidth": 2,
   "useTabs": false,
   "trailingComma": "es5",
-  "proseWrap": "always"
+  "proseWrap": "always",
+  "importOrder": ["^@", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
 }

functions/src/index.ts

@@ -1,5 +1,8 @@
-import * as functions from "firebase-functions";
 import * as admin from "firebase-admin";
+import * as functions from "firebase-functions";
+import Stripe from "stripe";
+
+import { GameMode, findSet, generateSeed, modes, replayEvents } from "./game";
 
 if (process.env.FUNCTIONS_EMULATOR) {
   // We don't pass any configs, so admin SDK queries firebase API to get them.
@@ -14,15 +17,12 @@ if (process.env.FUNCTIONS_EMULATOR) {
   admin.initializeApp();
 }
 
-import Stripe from "stripe";
 const stripe = !functions.config().stripe
   ? null
   : new Stripe(functions.config().stripe.secret, {
       apiVersion: "2020-08-27",
     });
 
-import { generateSeed, replayEvents, findSet, GameMode, modes } from "./game";
-
 const MAX_GAME_ID_LENGTH = 64;
 const MAX_UNFINISHED_GAMES_PER_HOUR = 4;
 

package.json

@@ -28,6 +28,7 @@
   },
   "devDependencies": {
     "@google-cloud/pubsub": "^2.19.0",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "cross-env": "^7.0.3",
     "prettier": "^3.4.2"
   },

scripts/src/index.js

@@ -1,10 +1,10 @@
 import admin from "firebase-admin";
 import inquirer from "inquirer";
 
+import { calcStats } from "./calcStats";
+import { fixGames } from "./fixGames";
 import { listAdmins, listPatrons } from "./listUsers";
 import { sanitizeNames } from "./sanitizeNames";
-import { fixGames } from "./fixGames";
-import { calcStats } from "./calcStats";
 
 // Add scripts as functions to this array
 const scripts = [listAdmins, listPatrons, sanitizeNames, fixGames, calcStats];

src/App.js

@@ -1,29 +1,29 @@
-import { useState, useEffect, useMemo } from "react";
-import firebase from "./firebase";
-import "./styles.css";
+import { useEffect, useMemo, useState } from "react";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
 
-import { BrowserRouter, Switch, Route } from "react-router-dom";
 import CssBaseline from "@material-ui/core/CssBaseline";
 import { ThemeProvider } from "@material-ui/core/styles";
 
-import { generateColor, generateName, standardLayouts } from "./util";
-import { UserContext, SettingsContext } from "./context";
-import useStorage from "./hooks/useStorage";
 import ConnectionsTracker from "./components/ConnectionsTracker";
-import WelcomeDialog from "./components/WelcomeDialog";
 import Navbar from "./components/Navbar";
-import RoomPage from "./pages/RoomPage";
-import GamePage from "./pages/GamePage";
-import LobbyPage from "./pages/LobbyPage";
-import LoadingPage from "./pages/LoadingPage";
-import NotFoundPage from "./pages/NotFoundPage";
-import BannedPage from "./pages/BannedPage";
-import HelpPage from "./pages/HelpPage";
+import WelcomeDialog from "./components/WelcomeDialog";
+import { SettingsContext, UserContext } from "./context";
+import firebase from "./firebase";
+import useStorage from "./hooks/useStorage";
 import AboutPage from "./pages/AboutPage";
+import BannedPage from "./pages/BannedPage";
 import ConductPage from "./pages/ConductPage";
+import GamePage from "./pages/GamePage";
+import HelpPage from "./pages/HelpPage";
 import LegalPage from "./pages/LegalPage";
+import LoadingPage from "./pages/LoadingPage";
+import LobbyPage from "./pages/LobbyPage";
+import NotFoundPage from "./pages/NotFoundPage";
 import ProfilePage from "./pages/ProfilePage";
-import { lightTheme, darkTheme, withCardColors } from "./themes";
+import RoomPage from "./pages/RoomPage";
+import "./styles.css";
+import { darkTheme, lightTheme, withCardColors } from "./themes";
+import { generateColor, generateName, standardLayouts } from "./util";
 
 function makeThemes(customColors) {
   let parsed;

src/components/AccountOptionsDialog.js

@@ -1,14 +1,14 @@
-import { useState, useContext } from "react";
+import { useContext, useState } from "react";
 
 import Button from "@material-ui/core/Button";
 import Dialog from "@material-ui/core/Dialog";
 import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogContentText from "@material-ui/core/DialogContentText";
 import DialogTitle from "@material-ui/core/DialogTitle";
+import red from "@material-ui/core/colors/red";
 import PersonAddIcon from "@material-ui/icons/PersonAdd";
 import VpnKeyIcon from "@material-ui/icons/VpnKey";
-import red from "@material-ui/core/colors/red";
 
 import { UserContext } from "../context";
 import firebase, { authProvider } from "../firebase";

src/components/BoardLayoutDialog.js

@@ -2,18 +2,18 @@ import { useContext, useMemo } from "react";
 
 import Button from "@material-ui/core/Button";
 import Dialog from "@material-ui/core/Dialog";
-import Select from "@material-ui/core/Select";
 import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
-import InputLabel from "@material-ui/core/InputLabel";
 import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
 import MenuItem from "@material-ui/core/MenuItem";
+import Select from "@material-ui/core/Select";
 import { makeStyles } from "@material-ui/core/styles";
 
-import Game from "./Game";
-import { generateDeck } from "../game";
 import { SettingsContext } from "../context";
+import { generateDeck } from "../game";
+import Game from "./Game";
 
 const useStyles = makeStyles((theme) => ({
   gameBoard: {

src/components/Chat.js

@@ -1,28 +1,28 @@
-import { useEffect, useRef, useState, useMemo, useContext, memo } from "react";
+import clsx from "clsx";
+import { memo, useContext, useEffect, useMemo, useRef, useState } from "react";
 
-import Typography from "@material-ui/core/Typography";
-import Tooltip from "@material-ui/core/Tooltip";
-import MoreVertIcon from "@material-ui/icons/MoreVert";
-import MenuItem from "@material-ui/core/MenuItem";
 import Menu from "@material-ui/core/Menu";
+import MenuItem from "@material-ui/core/MenuItem";
+import Tooltip from "@material-ui/core/Tooltip";
+import Typography from "@material-ui/core/Typography";
 import { makeStyles } from "@material-ui/core/styles";
-import clsx from "clsx";
+import MoreVertIcon from "@material-ui/icons/MoreVert";
 
-import User from "./User";
-import InternalLink from "./InternalLink";
-import SimpleInput from "./SimpleInput";
-import Subheading from "./Subheading";
-import Scrollbox from "./Scrollbox";
-import ChatCards from "./ChatCards";
-import ElapsedTime from "./ElapsedTime";
+import { UserContext } from "../context";
 import firebase from "../firebase";
-import { censorText } from "../util";
-import autoscroll from "../utils/autoscroll";
 import useFirebaseQuery from "../hooks/useFirebaseQuery";
 import useStats from "../hooks/useStats";
 import useStorage from "../hooks/useStorage";
-import { UserContext } from "../context";
+import { censorText } from "../util";
+import autoscroll from "../utils/autoscroll";
 import emoji from "../utils/emoji";
+import ChatCards from "./ChatCards";
+import ElapsedTime from "./ElapsedTime";
+import InternalLink from "./InternalLink";
+import Scrollbox from "./Scrollbox";
+import SimpleInput from "./SimpleInput";
+import Subheading from "./Subheading";
+import User from "./User";
 
 const useStyles = makeStyles((theme) => ({
   chatPanel: {

src/components/ChatCards.js

@@ -4,10 +4,10 @@ import Tooltip from "@material-ui/core/Tooltip";
 import Typography from "@material-ui/core/Typography";
 import { makeStyles } from "@material-ui/core/styles";
 
-import SetCard from "./SetCard";
-import User from "./User";
 import { cardsFromEvent, checkSetUltra, conjugateCard, modes } from "../game";
 import { formatTime } from "../util";
+import SetCard from "./SetCard";
+import User from "./User";
 
 const useStyles = makeStyles((theme) => ({
   logEntry: {

src/components/ColorChoiceDialog.js

@@ -1,16 +1,16 @@
 import { useState } from "react";
+import { ChromePicker } from "react-color";
 
-import { ThemeProvider, makeStyles, withTheme } from "@material-ui/core/styles";
 import Button from "@material-ui/core/Button";
 import Dialog from "@material-ui/core/Dialog";
-import Grid from "@material-ui/core/Grid";
 import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
-import { ChromePicker } from "react-color";
+import Grid from "@material-ui/core/Grid";
+import { ThemeProvider, makeStyles, withTheme } from "@material-ui/core/styles";
 
-import ResponsiveSetCard from "./ResponsiveSetCard";
 import { darkTheme, lightTheme, withCardColors } from "../themes";
+import ResponsiveSetCard from "./ResponsiveSetCard";
 
 const useStyles = makeStyles({
   colorPickerColumn: {

src/components/ConnectionsTracker.js

@@ -1,8 +1,8 @@
-import { useState, useEffect, useContext } from "react";
+import { useContext, useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 
-import firebase from "../firebase";
 import { UserContext } from "../context";
+import firebase from "../firebase";
 
 function ConnectionsTracker() {
   const user = useContext(UserContext);

src/components/DonateDialog.js

@@ -1,3 +1,5 @@
+import { useHistory } from "react-router-dom";
+
 import Button from "@material-ui/core/Button";
 import Dialog from "@material-ui/core/Dialog";
 import DialogActions from "@material-ui/core/DialogActions";
@@ -6,11 +8,10 @@ import DialogTitle from "@material-ui/core/DialogTitle";
 import Link from "@material-ui/core/Link";
 import Typography from "@material-ui/core/Typography";
 import WhatshotIcon from "@material-ui/icons/Whatshot";
-import { useHistory } from "react-router-dom";
 
-import useStorage from "../hooks/useStorage";
-import useMoment from "../hooks/useMoment";
 import firebase from "../firebase";
+import useMoment from "../hooks/useMoment";
+import useStorage from "../hooks/useStorage";
 
 function DonateDialog({ active }) {
   const history = useHistory();