Replace ESLint formatting rules with Oxfmt

ESLint formatting rules are deprecated [1] and angular-eslint recommends
against using ESLint for formatting [2], so we should remove these
formatting rules from our ESLint config. However, we still want to
enforce these formatting rules, so it makes sense to replace them with
something else. Oxfmt provides more than enough configuration for our
needs and far outperforms Prettier, so we think it makes the most sense
for our codebase.

[1]: https://eslint.org/blog/2023/10/deprecating-formatting-rules/
[2]: https://github.com/angular-eslint/angular-eslint/blob/v21.3.0/docs/FORMATTING_RULES.md

Author: lberrymage

.github/workflows/deploy.yaml

@@ -33,4 +33,4 @@ jobs:
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           environment: ${{ matrix.env }}
-          wranglerVersion: "latest"
+          wranglerVersion: 'latest'

.oxfmtrc.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "bracketSameLine": true,
+  "overrides": [
+    {
+      "files": ["*.json", "*.yaml"],
+      "options": {
+        "tabWidth": 2
+      }
+    },
+    {
+      "files": ["*.ts", "*.yaml"],
+      "options": {
+        "singleQuote": true
+      }
+    }
+  ],
+  "tabWidth": 4
+}

angular.json

@@ -21,15 +21,10 @@
               "base": "dist/console"
             },
             "index": "src/index.html",
-            "polyfills": [
-              "zone.js"
-            ],
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
               "node_modules/@fontsource-variable/roboto/index.css",
               "node_modules/@fontsource/material-icons/index.css",
@@ -123,38 +118,25 @@
         "test": {
           "builder": "@angular/build:karma",
           "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.scss"],
             "scripts": []
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         }
       }
     }
   },
   "cli": {
-    "schematicCollections": [
-      "@angular-eslint/schematics"
-    ],
+    "schematicCollections": ["@angular-eslint/schematics"],
     "analytics": false
   }
 }

eslint.config.mjs

@@ -12,52 +12,61 @@ const __dirname = path.dirname(__filename);
 const compat = new FlatCompat({
     baseDirectory: __dirname,
     recommendedConfig: js.configs.recommended,
-    allConfig: js.configs.all
+    allConfig: js.configs.all,
 });
 
-export default [{
-    ignores: ["projects/**/*"],
-}, ...compat.extends(
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:@angular-eslint/recommended",
-    "plugin:@angular-eslint/template/process-inline-templates",
-).map(config => ({
-    ...config,
-    files: ["**/*.ts"],
-})), {
-    files: ["**/*.ts"],
-
-    rules: {
-        "@angular-eslint/directive-selector": ["error", {
-            type: "attribute",
-            prefix: "acc",
-            style: "camelCase",
-        }],
-
-        "@angular-eslint/component-selector": ["error", {
-            type: "element",
-            prefix: "acc",
-            style: "kebab-case",
-        }],
+export default [
+    {
+        ignores: ["projects/**/*"],
+    },
+    ...compat
+        .extends(
+            "eslint:recommended",
+            "plugin:@typescript-eslint/recommended",
+            "plugin:@angular-eslint/recommended",
+            "plugin:@angular-eslint/template/process-inline-templates",
+        )
+        .map((config) => ({
+            ...config,
+            files: ["**/*.ts"],
+        })),
+    {
+        files: ["**/*.ts"],
 
-        "@typescript-eslint/explicit-function-return-type": "error",
-        eqeqeq: ["error", "always"],
-        indent: ["error", 4],
+        rules: {
+            "@angular-eslint/directive-selector": [
+                "error",
+                {
+                    type: "attribute",
+                    prefix: "acc",
+                    style: "camelCase",
+                },
+            ],
 
-        quotes: ["error", "single", {
-            allowTemplateLiterals: true,
-        }],
+            "@angular-eslint/component-selector": [
+                "error",
+                {
+                    type: "element",
+                    prefix: "acc",
+                    style: "kebab-case",
+                },
+            ],
 
-        semi: ["error", "always"],
+            "@typescript-eslint/explicit-function-return-type": "error",
+            eqeqeq: ["error", "always"],
+        },
+    },
+    ...compat
+        .extends(
+            "plugin:@angular-eslint/template/recommended",
+            "plugin:@angular-eslint/template/accessibility",
+        )
+        .map((config) => ({
+            ...config,
+            files: ["**/*.html"],
+        })),
+    {
+        files: ["**/*.html"],
+        rules: {},
     },
-}, ...compat.extends(
-    "plugin:@angular-eslint/template/recommended",
-    "plugin:@angular-eslint/template/accessibility",
-).map(config => ({
-    ...config,
-    files: ["**/*.html"],
-})), {
-    files: ["**/*.html"],
-    rules: {},
-}];
+];