Replace ESLint Love with Prettier and recommended

.prettierrc.mjs

@@ -0,0 +1,7 @@
+export default {
+  semi: false,
+  singleQuote: true,
+  jsxSingleQuote: true,
+  arrowParens: 'avoid',
+  printWidth: 100,
+}

.vscode/extensions.json

@@ -1,6 +1,7 @@
 {
   "recommendations": [
     "arcanis.vscode-zipfs",
-    "dbaeumer.vscode-eslint"
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
   ]
 }

.vscode/settings.json

@@ -8,5 +8,6 @@
     "**/.pnp.*": true
   },
   "eslint.nodePath": ".yarn/sdks",
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "prettier.prettierPath": ".yarn/sdks/prettier/index.cjs"
 }

.yarn/sdks/prettier/bin/prettier.cjs

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, register} = require(`module`);
+const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
+const absRequire = createRequire(absPnpApiPath);
+
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require prettier/bin/prettier.cjs
+    require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
+  }
+}
+
+const wrapWithUserWrapper = existsSync(absUserWrapperPath)
+  ? exports => absRequire(absUserWrapperPath)(exports)
+  : exports => exports;
+
+// Defer to the real prettier/bin/prettier.cjs your application uses
+module.exports = wrapWithUserWrapper(absRequire(`prettier/bin/prettier.cjs`));

.yarn/sdks/prettier/index.cjs

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, register} = require(`module`);
+const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
+
+const relPnpApiPath = "../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
+const absRequire = createRequire(absPnpApiPath);
+
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require prettier
+    require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
+  }
+}
+
+const wrapWithUserWrapper = existsSync(absUserWrapperPath)
+  ? exports => absRequire(absUserWrapperPath)(exports)
+  : exports => exports;
+
+// Defer to the real prettier your application uses
+module.exports = wrapWithUserWrapper(absRequire(`prettier`));

.yarn/sdks/prettier/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "prettier",
+  "version": "3.4.2-sdk",
+  "main": "./index.cjs",
+  "type": "commonjs",
+  "bin": "./bin/prettier.cjs"
+}

__tests__/index.test.tsx

@@ -5,8 +5,6 @@ import Home from '../pages/index'
 
 test('renders a heading', () => {
   render(<Home />)
-  const heading = screen.getByRole('heading', {
-    name: /Octyne/i
-  })
+  const heading = screen.getByRole('heading', { name: /Octyne/i })
   expect(heading).toBeDefined()
 })

eslint.config.mjs

@@ -1,54 +1,81 @@
-import love from 'eslint-config-love'
+import js from '@eslint/js'
+import tseslint from 'typescript-eslint'
+import nextPlugin from '@next/eslint-plugin-next'
 import standardJsx from 'eslint-config-standard-jsx'
 import standardReact from 'eslint-config-standard-react'
 import react from 'eslint-plugin-react'
 import reactHooks from 'eslint-plugin-react-hooks'
+import importPlugin from 'eslint-plugin-import'
+import pluginPromise from 'eslint-plugin-promise'
+import nodePlugin from 'eslint-plugin-n'
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 
-export default [
+export default tseslint.config(
   {
-    ignores: ['.pnp.cjs', '.pnp.loader.mjs', '.yarn', '.next'],
+    ignores: [
+      '.pnp.cjs',
+      '.pnp.loader.mjs',
+      '.yarn',
+      '.next',
+      '.prettierrc.mjs',
+      '*.config.{mjs,js}',
+    ],
   },
+  js.configs.recommended,
+  tseslint.configs.strictTypeChecked,
+  tseslint.configs.stylisticTypeChecked,
+  react.configs.flat.recommended,
+  pluginPromise.configs['flat/recommended'],
+  importPlugin.flatConfigs.recommended, // Could use TypeScript resolver
+  nodePlugin.configs['flat/recommended-module'],
   {
-    ...love,
-    files: [
-      '__tests__/**/*.{js,ts,tsx}',
-      'imports/**/*.{js,ts,tsx}',
-      'pages/**/*.{js,ts,tsx}',
-    ],
+    plugins: { '@next/next': nextPlugin },
+    rules: nextPlugin.configs.recommended.rules,
+  },
+  {
+    plugins: { 'react-hooks': reactHooks },
+    rules: reactHooks.configs.recommended.rules,
   },
-  { ...react.configs.flat.recommended, settings: { react: { version: 'detect' } } },
-  { plugins: { 'react-hooks': reactHooks }, rules: reactHooks.configs.recommended.rules },
   { rules: standardJsx.rules },
   { rules: standardReact.rules },
   {
+    settings: { react: { version: 'detect' } },
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
     rules: {
-      // Make TypeScript ESLint less strict.
-      '@typescript-eslint/strict-boolean-expressions': 'off',
-      '@typescript-eslint/triple-slash-reference': 'off',
-      '@typescript-eslint/restrict-template-expressions': 'off',
       '@typescript-eslint/no-confusing-void-expression': 'off',
-      'multiline-ternary': 'off', // Temporary.
-      // Allow no-multi-str.
-      'no-multi-str': 'off',
-      // Make ESLint Config Love less strict. Perhaps move to ESLint+TS-ESLint+import+promise+n?
-      '@typescript-eslint/max-params': 'off',
-      '@typescript-eslint/no-require-imports': 'off',
+      /* '@typescript-eslint/restrict-template-expressions': [
+        'error',
+        {
+          allowAny: false,
+          allowBoolean: false,
+          allowNullish: false,
+          allowNumber: true,
+          allowRegExp: false,
+          allowNever: false,
+        },
+      ], */
+      'n/no-missing-import': 'off',
+      'n/no-unsupported-features/node-builtins': 'off',
+      'n/no-unsupported-features/es-syntax': 'off',
+      'import/no-unresolved': 'off',
+      // TODO: Re-enable these!
+      '@typescript-eslint/use-unknown-in-catch-callback-variable': 'off',
+      '@typescript-eslint/restrict-template-expressions': 'off',
+      '@typescript-eslint/no-unnecessary-condition': 'off',
+      '@typescript-eslint/no-unsafe-member-access': 'off',
+      '@typescript-eslint/no-unsafe-assignment': 'off',
       '@typescript-eslint/no-unsafe-return': 'off',
       '@typescript-eslint/no-empty-function': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
-      '@typescript-eslint/no-magic-numbers': 'off',
-      '@typescript-eslint/no-unsafe-argument': 'off',
-      '@typescript-eslint/no-unsafe-assignment': 'off',
-      '@typescript-eslint/no-unsafe-member-access': 'off',
-      '@typescript-eslint/no-unnecessary-condition': 'off',
-      '@typescript-eslint/no-unsafe-type-assertion': 'off',
-      '@typescript-eslint/class-methods-use-this': 'off',
-      '@typescript-eslint/prefer-destructuring': 'off',
-      '@typescript-eslint/use-unknown-in-catch-callback-variable': 'off',
-      'complexity': 'off',
-      'promise/avoid-new': 'off',
-      '@typescript-eslint/init-declarations': 'off',
-      '@typescript-eslint/no-loop-func': 'off',
+      'promise/catch-or-return': 'off',
+      'promise/always-return': 'off',
+      'promise/no-nesting': 'off',
     },
   },
-]
+  eslintPluginPrettierRecommended,
+)

imports/dashboard/console/consoleButtons.tsx

@@ -4,7 +4,9 @@ import Stop from '@mui/icons-material/Stop'
 import Close from '@mui/icons-material/Close'
 import PlayArrow from '@mui/icons-material/PlayArrow'
 
-const ConsoleButtons = ({ stopStartServer }: {
+const ConsoleButtons = ({
+  stopStartServer,
+}: {
   stopStartServer: (operation: 'START' | 'TERM' | 'KILL') => void
 }): React.JSX.Element => {
   const smallScreen = useMediaQuery(useTheme().breakpoints.only('xs'))
@@ -56,26 +58,24 @@ const ConsoleButtons = ({ stopStartServer }: {
     </>
   )
 
-  return smallScreen
-    ? (
-      <Paper elevation={10} style={{ marginTop: 10, padding: 10 }}>
-        {Buttons}
-      </Paper>
-      )
-    : (
-      <div
-        style={{
-          justifyContent: 'center',
-          display: 'flex',
-          flexDirection: 'column',
-          marginTop: 10,
-          padding: 10,
-          width: '100%'
-        }}
-      >
-        {Buttons}
-      </div>
-      )
+  return smallScreen ? (
+    <Paper elevation={10} style={{ marginTop: 10, padding: 10 }}>
+      {Buttons}
+    </Paper>
+  ) : (
+    <div
+      style={{
+        justifyContent: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        marginTop: 10,
+        padding: 10,
+        width: '100%',
+      }}
+    >
+      {Buttons}
+    </div>
+  )
 }
 
 export default ConsoleButtons

imports/dashboard/console/consoleView.tsx

@@ -2,39 +2,43 @@ import React, { useRef, useLayoutEffect } from 'react'
 import Typography from '@mui/material/Typography'
 import styled from '@emotion/styled'
 
-let chrome = false
-try {
-  if (
-    Object.hasOwnProperty.call(window, 'chrome') &&
-    !navigator.userAgent.includes('Trident') &&
-    !navigator.userAgent.includes('Edge') // Chromium Edge uses Edg *sad noises*
-  ) chrome = true
-} catch (e) {}
+const chrome =
+  Object.hasOwnProperty.call(window, 'chrome') &&
+  typeof navigator === 'object' &&
+  typeof navigator.userAgent === 'string' &&
+  !navigator.userAgent.includes('Trident') &&
+  !navigator.userAgent.includes('Edge') // Chromium Edge uses Edg *sad noises*
 
 const ChromeConsoleViewContainer = styled.div({
   height: '100%',
   width: '100%',
   overflow: 'auto',
   display: 'flex',
-  flexDirection: 'column-reverse'
+  flexDirection: 'column-reverse',
 })
 
-const ChromeConsoleView = (props: { console: Array<{ id: number, text: string }> }): React.JSX.Element => (
+const ChromeConsoleView = (props: {
+  console: { id: number; text: string }[]
+}): React.JSX.Element => (
   <ChromeConsoleViewContainer>
     <div style={{ minHeight: '5px' }} />
     <Typography variant='body2' style={{ lineHeight: 1.5, wordWrap: 'break-word' }} component='div'>
-      {props.console.map((i) => (
-        <span key={i.id}>{i.text}<br /></span>
-      )) /* Truncate to 650 lines due to performance issues afterwards. */}
+      {props.console.map(i => (
+        <span key={i.id}>
+          {i.text}
+          <br />
+        </span>
+      ))}
     </Typography>
   </ChromeConsoleViewContainer>
 )
 
-const ConsoleView = (props: { console: Array<{ id: number, text: string }> }): React.JSX.Element => {
+const ConsoleView = (props: { console: { id: number; text: string }[] }): React.JSX.Element => {
   const ref = useRef<HTMLDivElement>(null)
-  const isScrolledToBottom = ref.current !== null
-    ? ref.current.scrollHeight - ref.current.clientHeight <= ref.current.scrollTop + 1
-    : false
+  const isScrolledToBottom =
+    ref.current !== null
+      ? ref.current.scrollHeight - ref.current.clientHeight <= ref.current.scrollTop + 1
+      : false
 
   useLayoutEffect(() => {
     if (ref.current) ref.current.scrollTop = ref.current.scrollHeight - ref.current.clientHeight
@@ -47,10 +51,17 @@ const ConsoleView = (props: { console: Array<{ id: number, text: string }> }): R
 
   return (
     <div style={{ height: '100%', width: '100%', overflow: 'auto' }} ref={ref}>
-      <Typography variant='body2' style={{ lineHeight: 1.5, wordWrap: 'break-word' }} component='div'>
-        {props.console.map((i) => (
-          <span key={i.id}>{i.text}<br /></span>
-        )) /* Truncate to 650 lines due to performance issues afterwards. */}
+      <Typography
+        variant='body2'
+        style={{ lineHeight: 1.5, wordWrap: 'break-word' }}
+        component='div'
+      >
+        {props.console.map(i => (
+          <span key={i.id}>
+            {i.text}
+            <br />
+          </span>
+        ))}
       </Typography>
       <div style={{ minHeight: '5px' }} />
     </div>