chore: migrate to oxlint and oxfmt (#502)

Author: DerYeger

.editorconfig

@@ -8,6 +8,7 @@ end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
+quote_type = single
 
 [*.md]
 trim_trailing_whitespace = false

.npmrc

@@ -1,2 +1,2 @@
 provenance=true
-public-hoist-pattern[]=*eslint*
+public-hoist-pattern[]=oxlint

.oxfmtrc.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "semi": false,
+  "singleQuote": true
+}

.oxlintrc.json

@@ -0,0 +1,40 @@
+{
+  "plugins": [
+    "eslint",
+    "typescript",
+    "unicorn",
+    "react",
+    "react-perf",
+    "nextjs",
+    "oxc",
+    "import",
+    "jsdoc",
+    "jsx-a11y",
+    "node",
+    "promise",
+    "vitest",
+    "vue"
+  ],
+  "settings": {
+    "jsdoc": {
+      "tagNamePreference": {
+        "defaultValue": "defaultValue",
+        "remarks": "remarks"
+      }
+    }
+  },
+  "overrides": [
+    {
+      "files": ["docs/**/samples/**/*.ts"],
+      "rules": {
+        "no-unused-vars": "allow"
+      }
+    },
+    {
+      "files": ["packages/{fol,key-hierarchy,vue-persistent-storage-manager}/test/**/*.ts"],
+      "rules": {
+        "valid-expect": "allow"
+      }
+    }
+  ]
+}

.vscode/settings.json

@@ -1,45 +1,8 @@
 {
-  // Disable the default formatter, use eslint instead
   "prettier.enable": false,
   "editor.formatOnSave": false,
-
-  // Auto fix
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit",
-    "source.organizeImports": "never"
-  },
-
-  // Silent the stylistic rules in you IDE, but still auto fix them
-  "eslint.rules.customizations": [
-    { "rule": "style/*", "severity": "off" },
-    { "rule": "format/*", "severity": "off" },
-    { "rule": "*-indent", "severity": "off" },
-    { "rule": "*-spacing", "severity": "off" },
-    { "rule": "*-spaces", "severity": "off" },
-    { "rule": "*-order", "severity": "off" },
-    { "rule": "*-dangle", "severity": "off" },
-    { "rule": "*-newline", "severity": "off" },
-    { "rule": "*quotes", "severity": "off" },
-    { "rule": "*semi", "severity": "off" }
-  ],
-
-  // Enable eslint for all supported languages
-  "eslint.validate": [
-    "astro",
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact",
-    "vue",
-    "html",
-    "markdown",
-    "json",
-    "jsonc",
-    "yaml",
-    "toml"
-  ],
-  "eslint.workingDirectories": [{ "mode": "auto" }],
   "markdownlint.config": {
+    "MD024": false,
     "MD033": false
   },
   "vitest.commandLine": "pnpm test --run"

README.md

@@ -24,7 +24,6 @@
 
 - [@yeger/debounce](./packages/debounce)
 - [@yeger/deepmerge](./packages/deepmerge)
-- [@yeger/eslint-config](./packages/eslint-config)
 - [@yeger/fol](./packages/fol)
 - [@yeger/html-diff](./packages/html-diff)
 - [@yeger/playwright-config](./packages/playwright-config)

apps/formi/components/CopyButton.vue

@@ -5,8 +5,7 @@ const props = defineProps<{ content: string }>()
 const emit = defineEmits(['copied'])
 const { content } = toRefs(props)
 
-const isClipboardSupported =
-  typeof navigator !== 'undefined' && !!navigator.clipboard
+const isClipboardSupported = typeof navigator !== 'undefined' && !!navigator.clipboard
 
 const { info } = useNotification()
 

apps/formi/components/FOLTree.vue

@@ -30,7 +30,8 @@ const borderBreakpoints = [1, 3, 5] as const
       :class="{ 'cursor-pointer': children.length > 0 }"
       style="white-space: nowrap"
       @click="expanded = !expanded"
-    >{{ expanded ? fragment.text() : fragment.toFormattedString() }}</code>
+      >{{ expanded ? fragment.text() : fragment.toFormattedString() }}</code
+    >
     <div
       v-show="expanded && children.length > 0"
       class="mt-2 flex size-fit flex-row justify-evenly gap-2"

apps/formi/components/FeatureSection.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
-const props = defineProps<{ title: string, number: number }>()
+const props = defineProps<{ title: string; number: number }>()
 const { title, number } = toRefs(props)
 </script>
 
 <template>
   <section :data-testid="`features-section-${title}`">
-    <div
-      class="mb-16 flex items-center justify-center gap-4 text-xl sm:text-2xl md:text-3xl"
-    >
+    <div class="mb-16 flex items-center justify-center gap-4 text-xl sm:text-2xl md:text-3xl">
       <HLine />
       <CircledNumber :number="number" />
       <h2>{{ title }}</h2>

apps/formi/components/Footer.vue

@@ -22,9 +22,7 @@ const resources: Link[] = [
 </script>
 
 <template>
-  <footer
-    class="align-start mx-auto mt-8 flex w-fit flex-wrap justify-between gap-12"
-  >
+  <footer class="align-start mx-auto mt-8 flex w-fit flex-wrap justify-between gap-12">
     <FooterColumn title="Resources">
       <a
         v-for="link of resources"