Oxlint: الفحص البرمجي الخاطف بـ Rust لمشاريع Next.js وTypeScript (دليل 2026)

إن كانت عملية npm run lint تستغرق 20 ثانية في مشروع Next.js متوسط الحجم، فأنت لست وحدك. فـ ESLint، رغم نظامه البيئي الثري، هو عملية JavaScript تُحلّل الملفات وتتحقق منها بصورة متسلسلة، مما يجعل وقت التنفيذ يتضاعف كلما كبر حجم قاعدة الكود.

Oxlint هو أداة فحص مكتوبة بلغة Rust من مشروع OXC، وتحت مظلة شركة VoidZero التي أسسها Evan You. حققت الإصدار الأول المستقر v1.0 في أغسطس 2025، ثم شحنت دعم إضافات JavaScript في مرحلة ألفا في مارس 2026، وتُستخدم الآن في الإنتاج لدى شركات كبرى مثل Shopify وAirbnb وMercedes-Benz وZalando. في قواعد الأكواد التي كانت تستغرق دقائق للفحص، يُكمل Oxlint عمله في أقل من ثانية واحدة.

في هذا الدليل ستتعلم:

• كيف يحقق Oxlint هذه السرعة الفائقة
• تثبيت وتهيئة Oxlint في مشروع Next.js 15 بـ TypeScript
• تفعيل قواعد TypeScript وReact وNext.js المدمجة
• الانتقال من ESLint باستخدام أداة الترحيل الرسمية
• إعداد تجاوزات مخصصة وتهيئة مجلدات مختلفة
• ربط كل شيء بخط CI/CD
• متى تبقي على ESLint جانباً لـ Oxlint

المتطلبات الأساسية

• Node.js 20 أو أعلى وpnpm مثبّتان
• مشروع Next.js 15 بـ TypeScript (أو أنشئ واحداً بـ pnpm create next-app@latest)
• معرفة أساسية بملفات تهيئة ESLint

لماذا Oxlint مختلف؟

تعمل ESLint في حلقة أحداث Node.js، وتُسلسل استدعاءات الإضافات عبر JavaScript، وتتجاول AST كل ملف بخيط تنفيذ واحد. هي مُهيَّأة للتوسعية، لا للأداء العالي.

Oxlint مبني على مكدس مُحوِّل OXC المكتوب بلغة Rust. مزاياه:

ادعاء السرعة 50-100x ليس مجرد تسويق: يأتي من تشغيل تحليل الملفات بالتوازي على جميع أنوية المعالج في كود أصلي، مع صفر تكاليف تسلسل بين المُحلّل ومُقيِّم القواعد.

الخطوة 1: تثبيت Oxlint

pnpm add -D oxlint

هذا كل شيء. يأتي Oxlint كملف ثنائي واحد مكتفٍ بذاته — لا اعتماديات تناظرية، ولا حزم إضافات للحل.

شغّله فوراً بدون أي تهيئة لمعرفة حالة مشروعك الحالية:

pnpm oxlint .

ستحصل على مخرجات مثل:

✖ 3 errors and 12 warnings found.
  src/app/page.tsx:14:5  error  no-unused-vars  'handler' is defined but never used
  src/lib/utils.ts:7:1   warn   no-console      Unexpected console statement
  ...

الخطوة 2: إنشاء ملف التهيئة

يقبل Oxlint صيغتين للتهيئة. الأبسط هي .oxlintrc.json في جذر مشروعك.

أنشئه:

{
  "$schema": "https://raw.githubusercontent.com/oxc-project/oxc/main/crates/oxc_linter/src/config/schema.json",
  "plugins": ["typescript", "react", "nextjs", "jsx-a11y", "import"],
  "env": {
    "browser": true,
    "node": true,
    "es2022": true
  },
  "rules": {
    "no-console": "warn",
    "no-unused-vars": "error",
    "typescript/no-explicit-any": "warn",
    "react/jsx-key": "error",
    "nextjs/no-img-element": "error"
  }
}

الإضافات المدمجة المتاحة

جميع الإضافات التالية مُطبَّقة أصلاً في Rust — لا حاجة لأي حزم npm:

• typescript — يُعيد تطبيق قواعد @typescript-eslint/eslint-plugin
• react — قواعد من eslint-plugin-react وeslint-plugin-react-hooks
• nextjs — قواعد خاصة بـ Next.js (الصور والنصوص والخطوط والروابط)
• jsx-a11y — قواعد إمكانية الوصول من eslint-plugin-jsx-a11y
• import — قواعد ترتيب ودقة الاستيرادات
• unicorn — قواعد جودة الكود من eslint-plugin-unicorn
• jest / vitest — قواعد ملفات الاختبار
• oxc — قواعد إضافية خاصة بـ OXC

الخطوة 3: استخدام تهيئة TypeScript (oxlint.config.ts)

للمشاريع الكبيرة، تمنحك صيغة TypeScript تعريفات قواعد آمنة النوع وتجاوزات لكل مجلد:

// oxlint.config.ts
import { defineConfig } from "oxlint";
 
export default defineConfig({
  plugins: ["typescript", "react", "nextjs", "jsx-a11y", "import"],
  env: {
    browser: true,
    node: true,
    es2022: true,
  },
  rules: {
    "no-console": "warn",
    "no-debugger": "error",
    "no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
    "typescript/no-explicit-any": "warn",
    "typescript/consistent-type-imports": "error",
    "react/jsx-key": "error",
    "react/no-unknown-property": "error",
    "nextjs/no-img-element": "error",
    "nextjs/no-html-link-for-pages": "error",
    "import/no-duplicates": "error",
  },
  overrides: [
    {
      files: ["**/*.test.ts", "**/*.spec.ts", "**/*.test.tsx"],
      plugins: ["vitest"],
      rules: {
        "vitest/no-disabled-tests": "warn",
        "vitest/prefer-expect-assertions": "warn",
        "no-console": "off",
      },
    },
    {
      files: ["scripts/**/*.ts"],
      rules: {
        "no-console": "off",
        "typescript/no-explicit-any": "off",
      },
    },
  ],
});

يتيح لك مصفوفة overrides تطبيق مجموعات قواعد مختلفة على ملفات الاختبار أو النصوص البرمجية أو أي نمط glob — نفس النمط المألوف لمستخدمي ESLint.

الخطوة 4: إضافة نصوص npm

عدّل package.json:

{
  "scripts": {
    "lint": "oxlint --fix-suggestions src",
    "lint:fix": "oxlint --fix src",
    "lint:ci": "oxlint --format github src"
  }
}

الخيارات الرئيسية:

الخطوة 5: الانتقال من ESLint

إذا كان لديك تهيئة ESLint موجودة، استخدم أداة الترحيل الرسمية لتوليد .oxlintrc.json مكافئة:

pnpm dlx @oxlint/migrate

تقرأ الأداة ملف .eslintrc.* أو eslint.config.js، وتُطابق القواعد بمكافئاتها في Oxlint، وتكتب .oxlintrc.json. القواعد التي ليس لها مكافئ أصلي في Oxlint تُدرج في ملخص لتعرف ما يتبقى خاصاً بـ ESLint.

مثال على المخرجات:

✔ Migrated 34 rules to .oxlintrc.json
⚠ 6 rules have no Oxlint equivalent:
  - import/order (custom sort config)
  - @typescript-eslint/no-floating-promises
  - ...
ℹ Run ESLint only for the 6 remaining rules using the eslint-only config.

تشغيل Oxlint وESLint معاً (الأسلوب الموصى به للانتقال)

للقواعد غير المُرحَّلة، شغّل الأداتين في نص lint. ولأن Oxlint ينتهي في أقل من ثانية، يظل الوقت الإجمالي أقل بكثير من ESLint وحده:

{
  "scripts": {
    "lint": "oxlint src && eslint src --config eslint-remaining.config.js"
  }
}

الخطوة 6: قواعد خاصة بـ Next.js

يشحن Oxlint قواعد مدمجة لمضادات النمط في Next.js. فعّل إضافة nextjs في تهيئتك وستحصل على:

مثال عملي — سيُعلّم Oxlint هذا الكود:

// ❌ يُشغّل nextjs/no-img-element
export default function Hero() {
  return <img src="/hero.jpg" alt="Hero" />;
}

الحل الصحيح:

// ✅ صحيح
import Image from "next/image";
 
export default function Hero() {
  return <Image src="/hero.jpg" alt="Hero" width={1200} height={600} />;
}

الخطوة 7: قواعد TypeScript

تُعيد إضافة typescript تطبيق أكثر قواعد @typescript-eslint استخداماً. إليك بعض الأبرز:

{
  "rules": {
    "typescript/no-explicit-any": "warn",
    "typescript/no-unused-vars": "error",
    "typescript/consistent-type-imports": "error",
    "typescript/no-non-null-assertion": "warn",
    "typescript/prefer-as-const": "error",
    "typescript/no-empty-interface": "warn",
    "typescript/no-inferrable-types": "warn"
  }
}

قاعدة consistent-type-imports قوية جداً في قواعد أكواد TypeScript — تُطبّق صيغة import type { Foo }، التي يمكن للمُصرِّف حذفها بكفاءة أكبر وتمنع مشاكل دوائر الاستيراد:

// ❌ يُعلَّم بواسطة typescript/consistent-type-imports
import { User } from "./types";
 
// ✅ صحيح
import type { User } from "./types";

الخطوة 8: قواعد React Hooks

تتضمن إضافة react قواعد الـ hooks. هذه حيوية في مشاريع Next.js App Router حيث تتبدل المكوّنات بين Server وClient:

{
  "rules": {
    "react/rules-of-hooks": "error",
    "react/exhaustive-deps": "warn",
    "react/jsx-key": "error",
    "react/no-unknown-property": "error"
  }
}

تكتشف rules-of-hooks الـ hooks المستدعاة بشكل مشروط أو داخل حلقات — من أكثر أخطاء وقت التشغيل شيوعاً في تطبيقات React.

الخطوة 9: التكامل مع CI/CD

GitHub Actions

# .github/workflows/lint.yml
name: Lint
 
on: [push, pull_request]
 
jobs:
  oxlint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        with:
          version: 9
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: pnpm
      - run: pnpm install --frozen-lockfile
      - name: Run Oxlint
        run: pnpm oxlint --format github --deny-warnings src

يُصدر خيار --format github تعليقات مباشرة في عرض diff الـ PR — تظهر المخالفات كتعليقات مُدرجة على السطر المعني.

GitLab CI

oxlint:
  stage: validate
  image: node:20-alpine
  script:
    - corepack enable
    - pnpm install --frozen-lockfile
    - pnpm oxlint --deny-warnings src
  cache:
    key: pnpm-$CI_COMMIT_REF_SLUG
    paths:
      - node_modules/.pnpm-store

ولأن Oxlint ينتهي عادةً في أقل من ثانية، فهو يُضيف وقتاً ضئيلاً جداً لمرحلة خط التسليم.

الخطوة 10: تكامل VS Code

ثبّت إضافة Oxlint لـ VS Code لرؤية أخطاء الفحص مباشرةً أثناء الكتابة.

أضف إلى .vscode/settings.json:

{
  "oxc.enable": true,
  "oxc.configPath": ".oxlintrc.json",
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

يتكامل Oxlint مع Biome (للتنسيق) وخادم لغة TypeScript — كل منهم يتولى مسؤوليته دون تعارض.

الخطوة 11: إضافات JavaScript في مرحلة الألفا (مارس 2026)

تتيح إضافات JS ألفا الصادرة في مارس 2026 كتابة إضافات Oxlint بـ JavaScript/TypeScript — بنفس API الإضافات المعروف لمستخدمي ESLint. هذا جسر للفرق التي لا تزال إضافات ESLint لديها بدون مكافئ Rust.

تفعيل إضافة JS:

{
  "plugins": ["typescript", "react"],
  "jsPlugins": ["./my-custom-rules.mjs"]
}

مثال على إضافة JS بسيطة:

// my-custom-rules.mjs
export default {
  rules: {
    "no-direct-fetch": {
      meta: {
        type: "suggestion",
        docs: { description: "استخدم مساعد api() بدلاً من fetch() المباشر" },
      },
      create(context) {
        return {
          CallExpression(node) {
            if (
              node.callee.type === "Identifier" &&
              node.callee.name === "fetch"
            ) {
              context.report({
                node,
                message: "استخدم مساعد api() بدلاً من fetch() المباشر.",
              });
            }
          },
        };
      },
    },
  },
};

أرقام قياسية واقعية

في تطبيق Next.js يضم 1200 ملف TypeScript:

متى تبقي على ESLint

لا يغطي Oxlint بعد كل قاعدة أو إضافة ESLint. أبقِ على ESLint (مقتصراً على الثغرات) عند الحاجة لـ:

• @typescript-eslint/no-floating-promises — التقاط أخطاء async
• ترتيب import/order المخصص مع مجموعات فرز مخصصة
• إضافات ESLint داخلية خاصة بمؤسستك لم تُنقل بعد
• eslint-plugin-testing-library لـ React Testing Library

الاستراتيجية الموصى بها في 2026: Oxlint أولاً، ESLint للبقية — شغّلهما بالتسلسل. الوقت الإجمالي لا يزال أسرع بـ 5-10x من ESLint وحده.

استكشاف الأخطاء وإصلاحها

"القاعدة X غير موجودة"

أسماء قواعد Oxlint تتضمن بادئة الإضافة. استخدم typescript/no-explicit-any وليس @typescript-eslint/no-explicit-any.

"الملف مُتجاهل بواسطة .gitignore"

يحترم Oxlint افتراضياً .gitignore. مرّر --no-ignore للتجاوز، أو أضف أنماط ignore صريحة في .oxlintrc.json:

{
  "ignore": ["dist/**", ".next/**", "node_modules/**"]
}

تعارض القواعد مع ESLint

عند تشغيل كليهما، أوقف القواعد المكافئة لـ Oxlint في تهيئة ESLint لتجنب التقارير المكررة:

// eslint.config.js
export default [
  {
    rules: {
      // يعالجها Oxlint — أوقفها هنا
      "no-unused-vars": "off",
      "no-console": "off",
      "react/jsx-key": "off",
    },
  },
];

الخطوات التالية

• اقرأ مرجع القواعد الكامل لاكتشاف جميع القواعد الـ 819+
• استكشف Biome كمُنسِّق Rust مكمّل (Oxlint يفحص؛ Biome يُنسّق)
• جرّب ملعب Oxlint لاختبار القواعد على مقتطفات دون مشروع

الخلاصة

يجلب Oxlint فحصاً برمجياً بأقل من ثانية لمشاريع JavaScript وTypeScript التي كانت تعاني من عشرات ثواني التأخير مع ESLint في كل حفظ وكل تشغيل CI. مع أكثر من 819 قاعدة مدمجة تغطي TypeScript وReact وNext.js وإمكانية الوصول والاستيرادات — كلها مُطبَّقة أصلاً في Rust — يمكن لمعظم مشاريع Next.js اليوم الاستعاضة عن الجزء الأكبر من تهيئة ESLint دون أي تراجع في الأداء.

مسار الانتقال واضح: ثبّت Oxlint، شغّل @oxlint/migrate، تعامل مع المجموعة الصغيرة من القواعد غير المُرحَّلة بتهيئة ESLint خفيفة، واستمتع بأوقات فحص تُقاس بالميلي ثانية بدلاً من الثواني.

مطوروك سيلاحظون الفرق. وخط CI/CD الخاص بك سيشكرك.