# ESLint

<figure><img src="https://2732173407-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT4YO4oylbhJSf6A9M9vf%2Fuploads%2FFueEx6NwZ3J1B7NYtqZw%2Fstart%20(4).svg?alt=media&#x26;token=a391ebc6-50ef-4998-9c59-26063d436c02" alt=""><figcaption></figcaption></figure>

**FIAS** shabloni [**ESLint**](https://eslint.org/)’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`)

```ts
{
  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`)

```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)

```json
"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`

```bash
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

```json
"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
