Biome: استبدال ESLint و Prettier بأداة واحدة فائقة السرعة

# إنشاء مشروع Next.js للاختبار
npx create-next-app@latest biome-demo --typescript --tailwind --app --src-dir
cd biome-demo

npm install --save-dev --save-exact @biomejs/biome

npx @biomejs/biome init

{
  "$schema": "https://biomejs.dev/schemas/1.9.0/schema.json",
  "vcs": {
    "enabled": false,
    "clientKind": "git",
    "useIgnoreFile": false
  },
  "files": {
    "ignoreUnknown": false,
    "ignore": []
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "tab"
  },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

{
  "$schema": "https://biomejs.dev/schemas/1.9.0/schema.json",
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100,
    "lineEnding": "lf"
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "double",
      "semicolons": "always",
      "trailingCommas": "all",
      "arrowParentheses": "always",
      "bracketSpacing": true,
      "jsxQuoteStyle": "double"
    }
  }
}

# التنسيق مع كتابة التغييرات
npx @biomejs/biome format --write .
 
# الفحص دون تعديل
npx @biomejs/biome format .

{
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

{
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "complexity": {
        "noExcessiveCognitiveComplexity": {
          "level": "warn",
          "options": {
            "maxAllowedComplexity": 20
          }
        }
      },
      "style": {
        "noNonNullAssertion": "warn",
        "useConst": "error",
        "useImportType": "error",
        "noParameterAssign": "error"
      },
      "suspicious": {
        "noExplicitAny": "warn",
        "noConsoleLog": "warn"
      },
      "correctness": {
        "noUnusedVariables": "error",
        "noUnusedImports": "error",
        "useExhaustiveDependencies": "warn"
      },
      "nursery": {
        "useSortedClasses": {
          "level": "warn",
          "options": {
            "attributes": ["className"],
            "functions": ["clsx", "cn", "cva"]
          }
        }
      }
    }
  }
}

# الفحص فقط
npx @biomejs/biome lint .
 
# الفحص مع الإصلاح التلقائي
npx @biomejs/biome lint --write .
 
# فحص + تنسيق + استيرادات في أمر واحد
npx @biomejs/biome check --write .

# ترحيل إعداد ESLint إلى Biome
npx @biomejs/biome migrate eslint --write
 
# ترحيل إعداد Prettier إلى Biome
npx @biomejs/biome migrate prettier --write

// .eslintrc.json (قبل)
{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
    "prettier"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "warn",
    "react-hooks/exhaustive-deps": "warn",
    "no-console": "warn"
  }
}

// biome.json (بعد الترحيل)
{
  "linter": {
    "rules": {
      "recommended": true,
      "correctness": {
        "noUnusedVariables": "error",
        "useExhaustiveDependencies": "warn"
      },
      "suspicious": {
        "noExplicitAny": "warn",
        "noConsoleLog": "warn"
      }
    }
  }
}

# حذف ملفات ESLint
rm -f .eslintrc .eslintrc.js .eslintrc.json .eslintrc.yml .eslintignore
 
# حذف ملفات Prettier
rm -f .prettierrc .prettierrc.js .prettierrc.json .prettierrc.yml .prettierignore
 
# إلغاء تثبيت الاعتمادات
npm uninstall eslint prettier eslint-config-prettier \
  eslint-plugin-react eslint-plugin-react-hooks \
  @typescript-eslint/eslint-plugin @typescript-eslint/parser \
  eslint-config-next

{
  "scripts": {
    "lint": "biome check .",
    "lint:fix": "biome check --write .",
    "format": "biome format --write ."
  }
}

{
  "organizeImports": {
    "enabled": true
  }
}

// قبل — استيرادات غير مرتبة
import { useState, useEffect } from "react";
import axios from "axios";
import styles from "./page.module.css";
import { Button } from "@/components/ui/button";
import type { User } from "@/types";
import { z } from "zod";
import Link from "next/link";

// بعد — مرتبة تلقائياً
import { useEffect, useState } from "react";
 
import Link from "next/link";
import axios from "axios";
import { z } from "zod";
 
import type { User } from "@/types";
import { Button } from "@/components/ui/button";
import styles from "./page.module.css";

code --install-extension biomejs.biome

{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports.biome": "explicit",
    "quickfix.biome": "explicit"
  },
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

name: Lint & Format
 
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
 
jobs:
  biome:
    name: Biome Check
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - name: Setup Biome
        uses: biomejs/setup-biome@v2
        with:
          version: latest
 
      - name: Run Biome
        run: biome ci .

biome:
  stage: validate
  image: node:20-slim
  before_script:
    - npm ci
  script:
    - npx @biomejs/biome ci .
  rules:
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
    - if: $CI_COMMIT_BRANCH == "main"

# تثبيت Husky
npm install --save-dev husky
npx husky init
 
# إضافة خطاف pre-commit
echo "npx @biomejs/biome check --staged --no-errors-on-unmatched" > .husky/pre-commit

{
  "overrides": [
    {
      "include": ["**/*.test.ts", "**/*.test.tsx", "**/*.spec.ts"],
      "linter": {
        "rules": {
          "suspicious": {
            "noExplicitAny": "off"
          }
        }
      }
    },
    {
      "include": ["scripts/**"],
      "linter": {
        "rules": {
          "suspicious": {
            "noConsoleLog": "off"
          }
        }
      }
    },
    {
      "include": ["**/*.config.ts", "**/*.config.js"],
      "formatter": {
        "lineWidth": 120
      }
    }
  ]
}

{
  "files": {
    "ignore": [
      "node_modules",
      ".next",
      "dist",
      "build",
      "coverage",
      "*.min.js",
      "generated/**"
    ]
  },
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  }
}

// packages/web/biome.json
{
  "$schema": "https://biomejs.dev/schemas/1.9.0/schema.json",
  "extends": ["../../biome.json"],
  "linter": {
    "rules": {
      "a11y": {
        "recommended": true
      }
    }
  }
}

{
  "$schema": "https://biomejs.dev/schemas/1.9.0/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "files": {
    "ignoreUnknown": true,
    "ignore": [
      ".next/**",
      "node_modules/**",
      "public/**",
      ".contentlayer/**"
    ]
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100,
    "lineEnding": "lf"
  },
  "organizeImports": {
    "enabled": true
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "double",
      "semicolons": "always",
      "trailingCommas": "all",
      "arrowParentheses": "always",
      "bracketSpacing": true
    }
  },
  "json": {
    "formatter": {
      "trailingCommas": "none"
    }
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "correctness": {
        "noUnusedVariables": "error",
        "noUnusedImports": "error",
        "useExhaustiveDependencies": "warn"
      },
      "style": {
        "useConst": "error",
        "useImportType": "error",
        "noNonNullAssertion": "warn"
      },
      "suspicious": {
        "noExplicitAny": "warn",
        "noConsoleLog": "warn"
      },
      "nursery": {
        "useSortedClasses": {
          "level": "warn",
          "options": {
            "attributes": ["className"],
            "functions": ["clsx", "cn", "cva"]
          }
        }
      }
    }
  },
  "overrides": [
    {
      "include": ["**/*.test.ts", "**/*.test.tsx"],
      "linter": {
        "rules": {
          "suspicious": {
            "noExplicitAny": "off",
            "noConsoleLog": "off"
          }
        }
      }
    }
  ]
}

#!/bin/bash
# benchmark.sh
 
echo "=== قياس الأداء: 500 ملف TypeScript ==="
echo ""
 
# إنشاء ملفات اختبار
mkdir -p bench-files
for i in $(seq 1 500); do
  cat > "bench-files/file-$i.tsx" << 'CONTENT'
import { useState, useEffect, useCallback } from "react";
import Link from "next/link";
import { z } from "zod";
 
const schema = z.object({
  name: z.string().min(1),
  email: z.string().email(),
  age: z.number().min(0).max(150),
});
 
type FormData = z.infer<typeof schema>;
 
export function UserForm({ onSubmit }: { onSubmit: (data: FormData) => void }) {
  const [data, setData] = useState<FormData>({ name: "", email: "", age: 0 });
  const [errors, setErrors] = useState<string[]>([]);
 
  const validate = useCallback(() => {
    const result = schema.safeParse(data);
    if (!result.success) {
      setErrors(result.error.errors.map((e) => e.message));
      return false;
    }
    setErrors([]);
    return true;
  }, [data]);
 
  useEffect(() => {
    validate();
  }, [validate]);
 
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        if (validate()) onSubmit(data);
      }}
    >
      <input
        type="text"
        value={data.name}
        onChange={(e) => setData({ ...data, name: e.target.value })}
      />
      <input
        type="email"
        value={data.email}
        onChange={(e) => setData({ ...data, email: e.target.value })}
      />
      <Link href="/users">رجوع</Link>
      {errors.map((err) => (
        <p key={err}>{err}</p>
      ))}
    </form>
  );
}
CONTENT
done
 
echo "--- ESLint + Prettier ---"
time npx eslint bench-files/ 2>/dev/null
time npx prettier --check bench-files/ 2>/dev/null
 
echo ""
echo "--- Biome ---"
time npx @biomejs/biome check bench-files/
 
# تنظيف
rm -rf bench-files

{
  "formatter": {
    "attributePosition": "multiline"
  }
}

{
  "prettier.disableLanguages": [
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact",
    "json"
  ]
}

{
  "files": {
    "maxSize": 2097152
  }
}