Merge pull request #316 from lazercaveman/294-replace-eslint-with-oxlint-for-significantly-improved-performance

294 replace eslint with oxlint for significantly improved performance

Author: lazercaveman

.husky/pre-push

@@ -1,18 +1,23 @@
-  # 1. Force Prettier Structure
-  echo "🐶 Husky: 🌊 Enforcing TypeScript Types Check ..."
-  yarn type-check || { echo "🐶 Husky: ❌ Enforcing Types Check. Aborting push."; exit 1; }
-  echo "🐶 Husky: 🎉 TypeScript found no rule violations ..."
+# 1. TypeScript
+echo "🐶 Husky: 🌊 Enforcing TypeScript types check ..."
+yarn type-check || { echo "🐶 Husky: ❌ Enforcing types check failed. Aborting push."; exit 1; }
+echo "🐶 Husky: 🎉 TypeScript found no rule violations ..."
 
-  # 2. Linting
-  echo "🐶 Husky: 👮‍♂️ Executing EsLint ..."
-  yarn lint:eslint || { echo "🐶 Husky: ❌ ESLint found issues. Aborting push."; exit 1; }
-  echo "🐶 Husky: 🎉 Linter found no rule violations ..."
+# 2. Linting
+echo "🐶 Husky: 👮‍♂️ Executing Oxlint ..."
+yarn lint:fix || { echo "🐶 Husky: ❌ Oxlint found issues. Aborting push - you should install the Oxc extension!"; exit 1; }
+echo "🐶 Husky: 🎉 Linter found no rule violations ..."
 
-  # 4. Unit-Testing
-  echo "🐶 Husky: 🧪 Executing test:coverage ..."
-  yarn test:coverage || { echo "🐶 Husky: ❌ Tests failed. Aborting push."; exit 1; }
-  echo "🐶 Husky: 🎉 All tests passed successfully!"
+# 3. Formatting
+echo "🐶 Husky: 🍰 Executing OxFmt ..."
+yarn format || { echo "🐶 Husky: ❌ OxFmt found issues. Aborting push - you should install the Oxc extension!"; exit 1; }
+echo "🐶 Husky: 🎉 Formatter found no rule violations ..."
 
-  # 6. Success
-  echo "🐶 Husky: 🎉 Pushing to git successfully - thank you for contributing!"
-  exit 0
+# 4. Unit-Testing
+echo "🐶 Husky: 🧪 Executing test:coverage ..."
+yarn test:coverage || { echo "🐶 Husky: ❌ Tests failed. Aborting push."; exit 1; }
+echo "🐶 Husky: 🎉 All unit-tests passed successfully!"
+
+# 6. Success
+echo "🐶 Husky: 🎉 Pushing to git successfully - thank you for contributing!"
+exit 0

.oxfmtrc.jsonc

@@ -0,0 +1,18 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "singleAttributePerLine": true,
+  "printWidth": 160,
+  "bracketSameLine": false,
+  "arrowParens": "always",
+  "insertFinalNewline": true,
+  "embeddedLanguageFormatting": "auto",
+  "ignorePatterns": ["node_modules", "coverage", "dist", ".output", ".github", ".nuxt", ".yarn", "**/*.md", "**/*.mdx"],
+  "sortTailwindcss": {
+    "stylesheet": "./app/assets/style/tailwind.css",
+  },
+}

.oxlintrc.jsonc

@@ -0,0 +1,47 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["typescript", "vue"],
+  "env": {
+    "browser": true,
+  },
+  "ignorePatterns": ["node_modules", "coverage", "dist", ".output", ".nuxt", "clean-project.js"],
+  /*
+    I consider these rules essential for this project.
+    Feel free to remove any that you find unnecessary
+    and/or extend the ruleset with additional ones as needed.
+    Documentation: https://oxc.rs/docs/guide/usage/linter/rules
+  */
+  "rules": {
+    "typescript/no-explicit-any": ["warn", { "fixToUnknown": true }],
+    "typescript/no-non-null-assertion": "warn",
+    "typescript/consistent-type-imports": "error",
+    "vue/no-export-in-script-setup": "error",
+    "vue/no-deprecated-destroyed-lifecycle": "error",
+    "vue/prefer-import-from-vue": "error",
+    "vue/define-props-declaration": ["error", "type-based"],
+    "vue/require-typed-ref": "warn",
+    "no-console": ["warn", { "allow": ["warn", "error"] }],
+    "no-debugger": "error",
+    "eqeqeq": "error",
+    "prefer-const": "error",
+    "no-unused-vars": [
+      "error",
+      {
+        "args": "all",
+        "argsIgnorePattern": "^(_|instance)",
+        "caughtErrors": "none",
+        "destructuredArrayIgnorePattern": "^_",
+        "varsIgnorePattern": "^(prop|pending|key)$",
+        "ignoreRestSiblings": true,
+      },
+    ],
+  },
+  "overrides": [
+    {
+      "files": ["nuxt.config.ts"],
+      "rules": {
+        "typescript/no-unsafe-call": "off",
+      },
+    },
+  ],
+}

.vscode/extensions.json

@@ -4,18 +4,15 @@
 
   // List of extensions which should be recommended for users of this workspace.
   "recommendations": [
-    "dbaeumer.vscode-eslint",
+    "oxc.oxc-vscode",
+    "oxc.oxfmt",
     "gruntfuggly.todo-tree",
     "vue.volar",
     "bradlc.vscode-tailwindcss",
     "syler.sass-indented",
     "unifiedjs.vscode-mdx",
-    "streetsidesoftware.code-spell-checker",
+    "streetsidesoftware.code-spell-checker"
   ],
   // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
-  "unwantedRecommendations": [
-    "octref.vetur",
-    "vue.vscode-typescript-vue-plugin",
-    "esbenp.prettier-vscode",
-  ]
+  "unwantedRecommendations": ["octref.vetur", "vue.vscode-typescript-vue-plugin", "esbenp.prettier-vscode"]
 }

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "todo-tree.tree.showBadges": false,
-  "editor.formatOnSave": false,
-  // Due to eslint autoformatting, prettier formatting has to be disabled - ESLint will do the formatting related to rules setup (requires the official ESLint extension: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-  "prettier.enable": false,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "oxc.oxfmt",
+  "prettier.enable": false
 }

CLAUDE.md

@@ -11,10 +11,11 @@ MIT-licensed, maintained by Ali Soueidan (@lazercaveman).
 - **Language:** TypeScript (strict mode)
 - **Build:** Vite (native Nuxt integration)
 - **Package Manager:** yarn (see version in `package.json`)
-- **Node:** v22.13.0 (pinned in `.nvmrc`)
+- **Node:** Version can be found in Package.json (enforced via `engines`)
 - **State:** Pinia (`@pinia/nuxt`)
 - **Styling:** Tailwind CSS v4 (`@tailwindcss/vite`) + SCSS (Sass)
-- **Linting:** ESLint v9 flat config (`eslint.config.ts`) — uses `eslint:recommended`, `typescript-eslint`, `eslint-plugin-vue`
+- **Linting:** Oxlint (`oxlint`) — configured in `.oxlintrc.jsonc` with `typescript` and `vue` plugins
+- **Formatting:** Oxfmt (`oxfmt`) — configured in `.oxfmtrc.jsonc`
 - **Testing:** Vitest + `@vitest/coverage-v8` + `@vitest/ui`
 - **Git Hooks:** Husky (pre-push: lint + test)
 
@@ -32,7 +33,8 @@ MIT-licensed, maintained by Ali Soueidan (@lazercaveman).
 ├── server/               # Nitro server routes & API
 │   └── api/
 ├── public/               # Static assets
-├── eslint.config.ts      # ESLint v9 flat config — DO NOT create .eslintrc files
+├── .oxlintrc.jsonc       # Oxlint config — DO NOT create .eslintrc files
+├── .oxfmtrc.jsonc        # Oxfmt formatter config
 ├── vitest.config.ts      # Vitest configuration
 ├── nuxt.config.ts        # Nuxt configuration
 ├── tsconfig.json         # TypeScript config
@@ -45,19 +47,26 @@ MIT-licensed, maintained by Ali Soueidan (@lazercaveman).
 yarn install              # Install dependencies
 yarn dev                  # Start dev server
 yarn build                # Production build
-yarn lint                 # Run ESLint
-yarn lint:fix             # Run ESLint with auto-fix
-yarn test                 # Run Vitest
+yarn generate             # Static site generation
+yarn preview              # Preview production build
+yarn start                # Start production server
+yarn type-check           # Run vue-tsc type checking
+yarn lint                 # Run oxlint
+yarn lint:fix             # Run oxlint with auto-fix
+yarn format               # Format with oxfmt
+yarn format:check         # Check formatting (used in CI/pre-push)
+yarn test                 # Run Vitest (watch mode)
 yarn test:ui              # Run Vitest with browser UI
-yarn test:coverage        # Run Vitest with v8 coverage
+yarn test:coverage        # Run Vitest with v8 coverage (used in pre-push)
+yarn analyze              # Bundle analysis via nuxi analyze
 yarn script:cleanup       # Remove demo content (one-time, self-deleting)
 ```
 
-Run `yarn lint` and `yarn test` to verify changes before committing — Husky enforces this on pre-push.
+Run `yarn type-check`, `yarn lint`, and `yarn test:coverage` before pushing — Husky enforces all three on pre-push.
 
 ## Critical Rules
 
-1. **ESLint v9 flat config only.** All lint config goes in `eslint.config.ts` as an array export. Never create `.eslintrc.*` files or use legacy config format.
+1. **Oxlint** All lint config goes in `.oxlintrc.jsonc`. All formatter config goes in `.oxfmtrc.jsonc`.
 2. **No `@apply` in SCSS.** Tailwind v4 + Sass have compatibility issues with `@apply`. Use SCSS only for things Tailwind can't do (complex animations, keyframes, third-party overrides). Use utility classes directly in templates for everything else.
 3. **`app/` directory structure.** Components, pages, composables, stores, and tests live under `app/`. Do not place them in the project root.
 4. **TypeScript strict.** All new code must be typed. No `any` unless explicitly justified with a comment.
@@ -73,6 +82,13 @@ Run `yarn lint` and `yarn test` to verify changes before committing — Husky en
 - Tailwind v4 config is CSS-based (not `tailwind.config.js`). Check existing CSS for theme customizations.
 - Never mix `@apply` with SCSS. If you need a reusable utility, create a Vue component instead.
 
+## Formatting Conventions
+
+- Oxfmt is the sole formatter — never use Prettier or Biome alongside it.
+- Config is in `.oxfmtrc.jsonc`: `printWidth: 100`, single quotes, semicolons, 2-space indent.
+- Run `yarn format` to format in place, `yarn format:check` to verify without writing (used in pre-push).
+- VS Code auto-formats on save via the `oxc.oxfmt` extension (`editor.defaultFormatter`).
+
 ## Testing Conventions
 
 - Vitest config is in `vitest.config.ts` — check there for aliases and setup.
@@ -82,6 +98,19 @@ Run `yarn lint` and `yarn test` to verify changes before committing — Husky en
 ## Gotchas
 
 - `clean-project.js` deletes `.git/` — it's meant for first-time setup only. Never run it on an active project.
-- The Husky pre-push hook runs lint + tests. If either fails, the push is rejected.
+- The Husky pre-push hook runs: type-check (`vue-tsc`) → lint (oxlint) → format check (oxfmt) → `test:coverage`. If any step fails, the push is rejected.
 - `tsconfig.tsbuildinfo` is committed — don't delete it, TypeScript incremental builds depend on it.
 - Nuxt auto-imports Vue APIs and composables. Don't manually import `ref`, `computed`, `useRoute`, etc. unless the auto-import fails.
+
+
+## Boundaries
+
+### Do not modify or index
+
+`.nuxt/`, `.output/`, `dist/`, `coverage/`, `.yarn/`, `node_modules/`, `localcerts/`
+
+### Do not propose
+
+- Alternative frameworks, build tools, or package managers.
+- Removing or bypassing Husky hooks.
+- New dependencies unless there is a clear, justified need that existing tools (`@vueuse/core`, Pinia, etc.) cannot cover.

README.md

@@ -6,7 +6,7 @@
 ![Screenshot](./app/assets/img/screenshot.png)
 
 ## 🥸 Why this template?  
-Get ready to supercharge your development with this fully configured Nuxt 4 Starter Kit! Built on Vue 3 and powered by TypeScript and many other technologies (for more information see down-below or checkout package.json for even more), this setup comes preloaded with tools and libraries designed to enhance your workflow, streamline development, and maintain high-quality code. 🙌 No more wrestling with configurations—jump straight into building amazing projects! 
+Get ready to supercharge your development with this fully configured Nuxt 4 Starter Kit! Built on Vue 3, AI ready (including configured CLAUDE.md), powered by TypeScript and many other technologies (for more information see down-below or checkout package.json for even more), this setup comes preloaded with tools and libraries designed to enhance your workflow, streamline development, and maintain high-quality code. 🙌 No more wrestling with configurations—jump straight into building amazing projects! 
 
 - **Clean up project in seconds:**  Using the `yarn script:cleanup` command in your terminal, will clean up the project, remove demo contents - the Starter Kit is designed so that developers can start working immediately without having to spend time setting up basic structures and configurations.
 - **Up to date:**  Using up to date dependencies and tools to ensure a smooth development experience. (at least I try ^^)
@@ -38,9 +38,13 @@ This starter kit is packed with carefully chosen dependencies to handle real-wor
 Why? Because it’s blazing fast. Vite ensures instant builds and on-demand compilation, making both development and production smoother and quicker.
 [learn more](https://vitejs.dev/).
 
-### 🏗️ ESLint
-ESLint V9 with a "Flat Config setup" tailored for TypeScript and Vue 3 or Nuxt 4 - it is configured to use best practices integrating some plugins (eslint:recommended, typescript-eslint, and eslint-plugin-vue) - wanna change them!? just add some custom rules to meet your team's needs to ensure clean, maintainable, and standard-compliant code quality.
-[learn more](https://eslint.org/blog/2024/04/eslint-v9.0.0-released/).
+### 🏗️ Oxlint
+Blazing-fast Rust-based linter for JavaScript and TypeScript (including Vue `<script>` blocks), with 695+ built-in rules. Ships pre-configured in `.oxlintrc.json` with the `typescript` and `vue` plugins enabled — just add your own rules on top.
+[learn more](https://oxc.rs/docs/guide/usage/linter).
+
+### 💎 Oxfmt
+High-performance code formatter from the OXC project, matching Prettier's output for JS, TS, Vue, CSS, JSON, YAML, and more. Configured in `.oxfmtrc.json`. Format-on-save is enabled out of the box via the VS Code extension (`oxc.oxfmt`).
+[learn more](https://oxc.rs/docs/guide/usage/formatter).
 
 ### 🧪 Vitest
 To test smarter and faster. Vitest is a lightweight, Jest-compatible testing framework that ensures code reliability and helps you catching bugs early. 
@@ -66,6 +70,10 @@ To manage app state easily. Pinia is modern, simple, and works perfectly with Vu
 TypeScript enhances the JavaScript language by adding optional static typing and other features, for safer, smarter code - helping avoiding errors and catching bugs early in development.
 [learn more](https://www.typescriptlang.org/).
 
+### 🤖 Claude Code
+This starter ships with a pre-configured `CLAUDE.md` file — the instruction file read by [Claude Code](https://claude.ai/code) (Anthropic's AI coding assistant). It documents the full project setup: tech stack, directory layout, commands, critical rules, and gotchas. Any Claude Code session in this repo will pick it up automatically, so the AI already knows the conventions, the correct tools (`oxlint`, `oxfmt`, Vitest, yarn), and what not to do — no manual briefing required.
+[learn more](https://docs.anthropic.com/en/docs/claude-code/memory).
+
 ## 🤝 Contributing
 Feel free to fork this project and submit pull requests — contributions are very welcome!
 

app/assets/style/animations.scss

@@ -1,4 +1,4 @@
-@use "sass:math";
+@use 'sass:math';
 
 // Mixin which can be used to generate keyframes for a background-gradient animation
 @mixin animate-gradient-frames($name, $animationSteps) {
@@ -16,7 +16,6 @@
   }
 }
 
-
 // In this example we're generating 1000 frames for the background-gradient animation to be smooth, this cant be done in a convenient way using TailwindCSS
 @include animate-gradient-frames(thousandGeneratedFramesAnimation, 1000);
 
@@ -35,4 +34,3 @@
     text-shadow: none;
   }
 }
-

app/assets/style/tailwind.css

@@ -1,12 +1,12 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 /*
 // Tailwind 4 should not be used with SASS, therefor SASS definitions should not use @apply: https://tailwindcss.com/docs/compatibility#sass-less-and-stylus
 // However SCSS can be use full in addition in some cases (or of course instead of tailwind if this is what you prefer)
 */
 
 @theme {
   /* You can overwrite exiting tailwind utility classes */
-  --color-gray-900: hsla(235, 90%, 7%, .5);
+  --color-gray-900: hsla(235, 90%, 7%, 0.5);
   /* Or add new ones */
   --color-nuxt-green: hsla(152, 100%, 43%, 1);
   --drop-shadow-2xl: 0 0 48px rgba(0, 0, 0, 1);
@@ -24,7 +24,7 @@
 
   .state-update-animation {
     animation-name: stateUpdateAnimation;
-    animation-duration: .4s;
+    animation-duration: 0.4s;
   }
 }
 

app/components/nuxt-starter/NuxtStarter.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col items-center drop-shadow-2xl w-3xl">
-    <span class="text-8xl mb-8">🙌</span>
-    <div class="flex justify-center items-end mb-6">
+  <div class="flex w-3xl flex-col items-center drop-shadow-2xl">
+    <span class="mb-8 text-8xl">🙌</span>
+    <div class="mb-6 flex items-end justify-center">
       <svg
         width="256"
         height="64"
@@ -30,13 +30,9 @@
           fill="white"
         />
       </svg>
-      <h1 class="text-white text-6xl font-bold leading-[0.75]">
-        -Starter
-      </h1>
+      <h1 class="text-6xl leading-[0.75] font-bold text-white">-Starter</h1>
     </div>
-    <p class="mb-6 max-w-xl text-center text-2xl text-white ">
-      Get ready to supercharge your development with this fully configured Nuxt 4 Starter Kit!
-    </p>
+    <p class="mb-6 max-w-xl text-center text-2xl text-white">Get ready to supercharge your development with this fully configured Nuxt 4 Starter Kit!</p>
     <p :class="`mb-6 max-w-md text-center text-2xl text-white ${Store.stateUpdatedAnimation}`">
       {{ Store.sampleData }}
     </p>
@@ -46,7 +42,6 @@
   </div>
 </template>
 
-
 <script setup>
 import { useSampleStore } from '@/store/sample';