ESLint

FIAS shabloni ESLint’dan foydalanadi — bu sizning kodingizni tahlil qilib, muammoli joylarni topadi va jamoa ichida bir xil kod yozish standartlarini saqlaydi. U Prettier, Husky, va lint-staged bilan integratsiyalashgan.

---

❓ Nega ESLint?

• 🐞 Xatolarni erta aniqlaydi (masalan, foydalanilmagan o‘zgaruvchilar, noto‘g‘ri == ishlatish).

• 🧠 Eng yaxshi amaliyotlarni majburiy qiladi (=== o‘rnida == ishlatilmasligi).

• 👨‍👩‍👧‍👦 Kodni o‘qilishi oson va yagona uslubda bo‘lishini ta’minlaydi.

• ⚙️ TypeScript, React va Next.js bilan to‘liq ishlaydi.

---

🔧 ESLint Konfiguratsiyasi

🧪 Next.js Template (eslint.config.mjs)

{
  files: ['**/*.{js,ts,jsx,tsx}'],
  plugins: {
    prettier: prettierPlugin,
  },
  rules: {
    'prettier/prettier': 'warn', // Prettier qoidalari buzilsa ogohlantiradi
    'max-len': ['error', { code: 200, ignoreUrls: true, ignoreComments: true, ignoreStrings: true }],
    'no-console': ['warn', { allow: ['error'] }], // Faqat console.error'ga ruxsat
    eqeqeq: 'warn', // Faqat === va !== ishlatiladi
    'no-duplicate-imports': 'error', // Takroriy importlarga yo‘l qo‘yilmaydi
  },
},
{
  files: ['src/shared/ui/**/*.{js,ts,jsx,tsx}'],
  rules: {
    'max-len': 'off', // UI komponentlarida satr uzunligiga cheklov yo‘q
  },
}

⚛️ React Template (eslint.config.js)

{
  ignores: ['dist'], // dist/ fayllariga lint qo‘llanmaydi
},
{
  extends: [js.configs.recommended, ...tseslint.configs.recommended],
  files: ['**/*.{ts,tsx}'],
  languageOptions: {
    ecmaVersion: 2020,
    globals: globals.browser,
  },
  plugins: {
    'react-hooks': reactHooks,
    'react-refresh': reactRefresh,
  },
  rules: {
    ...reactHooks.configs.recommended.rules,
    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
    'max-len': ['error', { code: 200, ignoreUrls: true, ignoreComments: true, ignoreStrings: true }],
    'no-console': ['warn', { allow: ['error'] }],
    eqeqeq: 'warn',
    'no-duplicate-imports': 'error',
  },
}

---

📦 Har Bir Qoida Nimani Anglatadi?

Qoida	Ma’nosi
prettier/prettier	Prettier formatlash qoidalari buzilsa ogohlantiradi
max-len	Qator uzunligi cheklangan (200 ta belgigacha)
no-console	Faqat console.error ishlatishga ruxsat
eqeqeq	== o‘rniga har doim === ishlatilishi kerak
no-duplicate-imports	Bir fayldan bir nechta marta import qilish taqiqlanadi

---

🔁 Husky + lint-staged Bilan Integratsiya

lint-staged (package.json ichida)

"lint-staged": {
  "*.{js,ts,jsx,tsx}": [
    "prettier --write",
    "eslint src --fix"
  ]
}

🔹 Bu faqat staged fayllarni tekshiradi — vaqtni tejaydi va commit tarixini toza saqlaydi.

.husky/pre-commit

npx lint-staged

Bu hook har bir commit oldidan avtomatik ishlaydi va noto‘g‘ri formatlangan kod commit qilinishiga yo‘l qo‘ymaydi.

---

🛠️ Ishlab Chiquvchilar Uchun Skriptlar

"scripts": {
  "lint": "eslint src --fix",
  "prepare": "husky"
}

• npm run lint – src/ ichidagi fayllarni tekshiradi va avtomatik tuzatadi

• npm run prepare – Husky hooklarini o‘rnatadi (odatda npm install dan keyin ishga tushadi)

---

📁 Strukturaviy Yondashuv

• 📂 shared/ui/** papkasidagi komponentlar uchun max-len qoidasini o‘chirib qo‘yish mumkin

• TypeScript va JavaScript fayllarni to‘liq qo‘llab-quvvatlaydi

• Loyihangizga moslashtirish oson