diff --git a/webui/.eslintrc b/webui/.eslintrc
index 112028d871cc4e22f410eec592636c4e6002acea..3c6e976f1861a35c901426be2b9c2cb8248b6a86 100644
--- a/webui/.eslintrc
+++ b/webui/.eslintrc
@@ -1,4 +1,25 @@
 {
-  "extends": ["react-app", "plugin:prettier/recommended"],
-  "ignorePatterns": ["src/fragmentTypes.js"]
+  "extends": [
+    "react-app",
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended"
+  ],
+  "rules": {
+    "import/order": [
+      "error", {
+        "alphabetize": {"order": "asc"},
+        "pathGroups": [{
+          "pattern": "@material-ui/**",
+          "group": "external",
+          "position": "after"
+        }, {
+          "pattern": "*.generated",
+          "group": "sibling",
+          "position": "after"
+        }],
+        "groups": [["builtin", "external"], "parent", ["sibling", "index"]],
+        "newlines-between": "always"
+      }
+    ]
+  }
 }
diff --git a/webui/codegen.yaml b/webui/codegen.yaml
index 161fd1c765e29034898d3cdc216db8925f5a1325..30b67e45ced118ea38f97e6da86338266ebf4fe7 100644
--- a/webui/codegen.yaml
+++ b/webui/codegen.yaml
@@ -26,4 +26,4 @@ generates:
 
 hooks:
   afterOneFileWrite:
-  - prettier --write
+  - eslint --fix
diff --git a/webui/package.json b/webui/package.json
index 03ac4da9cefffff3ad0b153ae064a376f0a4cba6..ed143e68edf7100a3e8f7efe30519212eb960643 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -46,7 +46,7 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "generate": "graphql-codegen",
-    "lint": "eslint src/"
+    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'"
   },
   "proxy": "http://localhost:3001",
   "browserslist": [
diff --git a/webui/src/App.tsx b/webui/src/App.tsx
index 928d73504492261811df43540bde4f395374ed4c..6f66a6ecd6930907e2670b30e82209acf40a9386 100644
--- a/webui/src/App.tsx
+++ b/webui/src/App.tsx
@@ -1,18 +1,18 @@
 import AppBar from '@material-ui/core/AppBar';
 import CssBaseline from '@material-ui/core/CssBaseline';
+import Toolbar from '@material-ui/core/Toolbar';
 import {
   createMuiTheme,
   ThemeProvider,
   makeStyles,
 } from '@material-ui/core/styles';
-import Toolbar from '@material-ui/core/Toolbar';
 import React from 'react';
 import { Route, Switch } from 'react-router';
 import { Link } from 'react-router-dom';
 
+import CurrentIdentity from './CurrentIdentity';
 import BugQuery from './bug/BugQuery';
 import ListQuery from './list/ListQuery';
-import CurrentIdentity from './CurrentIdentity';
 
 const theme = createMuiTheme({
   palette: {
diff --git a/webui/src/Author.tsx b/webui/src/Author.tsx
index 475244db65b51c09a2af4c8b2470e1e6e77c104e..20de583a338cc048ea813bb0a7be461ea4c634ee 100644
--- a/webui/src/Author.tsx
+++ b/webui/src/Author.tsx
@@ -1,5 +1,5 @@
-import Tooltip from '@material-ui/core/Tooltip/Tooltip';
 import MAvatar from '@material-ui/core/Avatar';
+import Tooltip from '@material-ui/core/Tooltip/Tooltip';
 import React from 'react';
 
 import { AuthoredFragment } from './Author.generated';
diff --git a/webui/src/Content.tsx b/webui/src/Content.tsx
index 9683f478ae40acbb4b5b8feb03fe11c350beda54..889c9987f41977ffc29a27d528643e1664e803f3 100644
--- a/webui/src/Content.tsx
+++ b/webui/src/Content.tsx
@@ -1,8 +1,9 @@
-import unified from 'unified';
-import parse from 'remark-parse';
+import { ReactNode } from 'react';
 import html from 'remark-html';
+import parse from 'remark-parse';
 import remark2react from 'remark-react';
-import { ReactNode } from 'react';
+import unified from 'unified';
+
 import ImageTag from './tag/ImageTag';
 import PreTag from './tag/PreTag';
 
diff --git a/webui/src/CurrentIdentity.tsx b/webui/src/CurrentIdentity.tsx
index 07ff648cef2b21bf61b91c9924becc419b4af3e5..5b8fcbb9e4777cd95f91bd925ab41a6bf1bb32b4 100644
--- a/webui/src/CurrentIdentity.tsx
+++ b/webui/src/CurrentIdentity.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
 import Avatar from '@material-ui/core/Avatar';
 import { makeStyles } from '@material-ui/core/styles';
+import React from 'react';
 
 import { useCurrentIdentityQuery } from './CurrentIdentity.generated';
 
diff --git a/webui/src/Label.tsx b/webui/src/Label.tsx
index 68c50b9de9cf66ecab6b19414b3e33753b8da2a8..a33b4c2c38710e46963d3958c950f1bd49af14af 100644
--- a/webui/src/Label.tsx
+++ b/webui/src/Label.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
+import { common } from '@material-ui/core/colors';
 import { makeStyles } from '@material-ui/core/styles';
 import {
   getContrastRatio,
   darken,
 } from '@material-ui/core/styles/colorManipulator';
-import { common } from '@material-ui/core/colors';
+import React from 'react';
 
-import { Color } from './gqlTypes';
 import { LabelFragment } from './Label.generated';
+import { Color } from './gqlTypes';
 
 // Minimum contrast between the background and the text color
 const contrastThreshold = 2.5;
diff --git a/webui/src/bug/Bug.tsx b/webui/src/bug/Bug.tsx
index 3685b50667e01fee0e9487f13bfb456b2483b016..f4029a5fd1d8aa09f05340bb2f822ab4484a6873 100644
--- a/webui/src/bug/Bug.tsx
+++ b/webui/src/bug/Bug.tsx
@@ -1,11 +1,13 @@
-import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
+
 import Author from '../Author';
 import Date from '../Date';
-import TimelineQuery from './TimelineQuery';
 import Label from '../Label';
+
 import { BugFragment } from './Bug.generated';
+import TimelineQuery from './TimelineQuery';
 
 const useStyles = makeStyles(theme => ({
   main: {
diff --git a/webui/src/bug/BugQuery.tsx b/webui/src/bug/BugQuery.tsx
index b436db5a948e1a8cd8ca4d289da4553a9d55cef9..ea7bb7dacb3e6deefab5776a4b26c21de9c98970 100644
--- a/webui/src/bug/BugQuery.tsx
+++ b/webui/src/bug/BugQuery.tsx
@@ -2,8 +2,8 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 
-import { useGetBugQuery } from './BugQuery.generated';
 import Bug from './Bug';
+import { useGetBugQuery } from './BugQuery.generated';
 
 type Props = RouteComponentProps<{
   id: string;
diff --git a/webui/src/bug/LabelChange.js b/webui/src/bug/LabelChange.js
index df8ab0a5b9bd38c130066b7f83219a9559d3c1dd..442cbbb443eabd9d587bb5d76cebb384ef561c07 100644
--- a/webui/src/bug/LabelChange.js
+++ b/webui/src/bug/LabelChange.js
@@ -1,5 +1,6 @@
 import { makeStyles } from '@material-ui/styles';
 import React from 'react';
+
 import Author from '../Author';
 import Date from '../Date';
 import Label from '../Label';
diff --git a/webui/src/bug/Message.js b/webui/src/bug/Message.js
index 4c22745f540f2593b5f9dda63a1f239c2be70295..68d3cea009d5f1116c0b2bf3822c2e69d85b44f8 100644
--- a/webui/src/bug/Message.js
+++ b/webui/src/bug/Message.js
@@ -1,10 +1,11 @@
-import { makeStyles } from '@material-ui/styles';
 import Paper from '@material-ui/core/Paper';
+import { makeStyles } from '@material-ui/styles';
 import React from 'react';
+
 import Author from '../Author';
 import { Avatar } from '../Author';
-import Date from '../Date';
 import Content from '../Content';
+import Date from '../Date';
 
 const useStyles = makeStyles(theme => ({
   author: {
diff --git a/webui/src/bug/SetStatus.js b/webui/src/bug/SetStatus.js
index eb7f5bfea3ff65b38849dd70290a5d59c7aa2ec2..b6dd419d5bfc2fd8e86e0c7258f6de09d99e9566 100644
--- a/webui/src/bug/SetStatus.js
+++ b/webui/src/bug/SetStatus.js
@@ -1,5 +1,6 @@
 import { makeStyles } from '@material-ui/styles';
 import React from 'react';
+
 import Author from '../Author';
 import Date from '../Date';
 
diff --git a/webui/src/bug/SetTitle.js b/webui/src/bug/SetTitle.js
index b20ed9ca69745537452997b57874677f74c9a171..09343ad170def3a959140d76bf206a4ad6edccf4 100644
--- a/webui/src/bug/SetTitle.js
+++ b/webui/src/bug/SetTitle.js
@@ -1,5 +1,6 @@
 import { makeStyles } from '@material-ui/styles';
 import React from 'react';
+
 import Author from '../Author';
 import Date from '../Date';
 
diff --git a/webui/src/bug/Timeline.js b/webui/src/bug/Timeline.js
index 7d1946f271f079ca3d9c8ef07def1375a8cfe682..aeef7d2bc2e080e8ef952d2ca8879fc05923dbc0 100644
--- a/webui/src/bug/Timeline.js
+++ b/webui/src/bug/Timeline.js
@@ -1,5 +1,6 @@
 import { makeStyles } from '@material-ui/styles';
 import React from 'react';
+
 import LabelChange from './LabelChange';
 import Message from './Message';
 import SetStatus from './SetStatus';
diff --git a/webui/src/bug/TimelineQuery.js b/webui/src/bug/TimelineQuery.js
index 0c9305b1f497f1cdb3990b6cedb891760be983ce..11f3d08ce43edbcf1b196f7e8fadc5f3be070a65 100644
--- a/webui/src/bug/TimelineQuery.js
+++ b/webui/src/bug/TimelineQuery.js
@@ -1,7 +1,7 @@
 import CircularProgress from '@material-ui/core/CircularProgress';
 import React from 'react';
-import Timeline from './Timeline';
 
+import Timeline from './Timeline';
 import { useTimelineQuery } from './TimelineQuery.generated';
 
 const TimelineQuery = ({ id }) => {
diff --git a/webui/src/index.tsx b/webui/src/index.tsx
index 6f838c6908ef443970ea5427f264ab1da2687ebf..c64daf0c755b576ac7d43e93e93a64afaa42a364 100644
--- a/webui/src/index.tsx
+++ b/webui/src/index.tsx
@@ -1,5 +1,5 @@
-import ThemeProvider from '@material-ui/styles/ThemeProvider';
 import { createMuiTheme } from '@material-ui/core/styles';
+import ThemeProvider from '@material-ui/styles/ThemeProvider';
 import ApolloClient from 'apollo-boost';
 import {
   IntrospectionFragmentMatcher,
@@ -10,8 +10,8 @@ import { ApolloProvider } from 'react-apollo';
 import ReactDOM from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
 
-import introspectionQueryResultData from './fragmentTypes';
 import App from './App';
+import introspectionQueryResultData from './fragmentTypes';
 
 const theme = createMuiTheme();
 
diff --git a/webui/src/list/BugRow.tsx b/webui/src/list/BugRow.tsx
index 6979b2966345ebf0e7022e2ee91bec760634c88d..f94538a71ebbd78ab75831baef8ee580438c08df 100644
--- a/webui/src/list/BugRow.tsx
+++ b/webui/src/list/BugRow.tsx
@@ -1,16 +1,18 @@
-import { makeStyles } from '@material-ui/core/styles';
 import TableCell from '@material-ui/core/TableCell/TableCell';
 import TableRow from '@material-ui/core/TableRow/TableRow';
 import Tooltip from '@material-ui/core/Tooltip/Tooltip';
-import ErrorOutline from '@material-ui/icons/ErrorOutline';
+import { makeStyles } from '@material-ui/core/styles';
 import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
+import ErrorOutline from '@material-ui/icons/ErrorOutline';
 import React from 'react';
 import { Link } from 'react-router-dom';
+
 import Date from '../Date';
 import Label from '../Label';
-import { BugRowFragment } from './BugRow.generated';
 import { Status } from '../gqlTypes';
 
+import { BugRowFragment } from './BugRow.generated';
+
 type OpenClosedProps = { className: string };
 const Open = ({ className }: OpenClosedProps) => (
   <Tooltip title="Open">
diff --git a/webui/src/list/Filter.tsx b/webui/src/list/Filter.tsx
index d009130608eab3b6828f5e9f4cf9ea2f9023899a..30b52de83e811b6e95dd19c4992d9c4426e26093 100644
--- a/webui/src/list/Filter.tsx
+++ b/webui/src/list/Filter.tsx
@@ -1,12 +1,12 @@
-import React, { useState, useRef } from 'react';
-import { Link } from 'react-router-dom';
-import { LocationDescriptor } from 'history';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-import { SvgIconProps } from '@material-ui/core/SvgIcon';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
+import { SvgIconProps } from '@material-ui/core/SvgIcon';
+import { makeStyles } from '@material-ui/core/styles';
 import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
+import clsx from 'clsx';
+import { LocationDescriptor } from 'history';
+import React, { useState, useRef } from 'react';
+import { Link } from 'react-router-dom';
 
 export type Query = { [key: string]: Array<string> };
 
diff --git a/webui/src/list/FilterToolbar.tsx b/webui/src/list/FilterToolbar.tsx
index 2aaf7f84d4ca16ca62562c6bab0edd3f91109ee1..df295054cfbe1a705956826c6a1b3d7af3d912ef 100644
--- a/webui/src/list/FilterToolbar.tsx
+++ b/webui/src/list/FilterToolbar.tsx
@@ -1,10 +1,11 @@
-import { makeStyles } from '@material-ui/core/styles';
-import React from 'react';
-import { LocationDescriptor } from 'history';
 import { pipe } from '@arrows/composition';
 import Toolbar from '@material-ui/core/Toolbar';
-import ErrorOutline from '@material-ui/icons/ErrorOutline';
+import { makeStyles } from '@material-ui/core/styles';
 import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
+import ErrorOutline from '@material-ui/icons/ErrorOutline';
+import { LocationDescriptor } from 'history';
+import React from 'react';
+
 import {
   FilterDropdown,
   FilterProps,
diff --git a/webui/src/list/List.tsx b/webui/src/list/List.tsx
index 23b193d4d187de58c2cce21c3182023a5d61a6b3..cebd13f288a7bc619588d249a8f604c8ce0eb454 100644
--- a/webui/src/list/List.tsx
+++ b/webui/src/list/List.tsx
@@ -1,6 +1,7 @@
 import Table from '@material-ui/core/Table/Table';
 import TableBody from '@material-ui/core/TableBody/TableBody';
 import React from 'react';
+
 import BugRow from './BugRow';
 import { BugListFragment } from './ListQuery.generated';
 
diff --git a/webui/src/list/ListQuery.tsx b/webui/src/list/ListQuery.tsx
index a9bb15dfcab94a9a7a20d8e6875a9810b033fe22..c91264e173c3abc84e697ae0bd23ef6c5019d4b4 100644
--- a/webui/src/list/ListQuery.tsx
+++ b/webui/src/list/ListQuery.tsx
@@ -1,16 +1,17 @@
-import { fade, makeStyles, Theme } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
+import InputBase from '@material-ui/core/InputBase';
+import Paper from '@material-ui/core/Paper';
+import { fade, makeStyles, Theme } from '@material-ui/core/styles';
+import ErrorOutline from '@material-ui/icons/ErrorOutline';
 import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
-import ErrorOutline from '@material-ui/icons/ErrorOutline';
-import Paper from '@material-ui/core/Paper';
-import InputBase from '@material-ui/core/InputBase';
 import Skeleton from '@material-ui/lab/Skeleton';
+import { ApolloError } from 'apollo-boost';
 import React, { useState, useEffect, useRef } from 'react';
 import { useLocation, useHistory, Link } from 'react-router-dom';
-import { ApolloError } from 'apollo-boost';
-import List from './List';
+
 import FilterToolbar from './FilterToolbar';
+import List from './List';
 import { useListBugsQuery } from './ListQuery.generated';
 
 type StylesProps = { searching?: boolean };
diff --git a/webui/src/tag/ImageTag.tsx b/webui/src/tag/ImageTag.tsx
index 7c7d7e98488782501e497c15a1febc5adf565eae..bdb36873875708dae45f9f2bbbb385554a0127c1 100644
--- a/webui/src/tag/ImageTag.tsx
+++ b/webui/src/tag/ImageTag.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import { makeStyles } from '@material-ui/styles';
+import React from 'react';
 
 const useStyles = makeStyles({
   tag: {
diff --git a/webui/src/tag/PreTag.tsx b/webui/src/tag/PreTag.tsx
index 0199927713da4dd7788e6972fb7dd076863d254a..d3b4c27339aa4dc0f38bb44b7fb3a499cc7aa600 100644
--- a/webui/src/tag/PreTag.tsx
+++ b/webui/src/tag/PreTag.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import { makeStyles } from '@material-ui/styles';
+import React from 'react';
 
 const useStyles = makeStyles({
   tag: {