ESLint I: flat config anatomiyasi (ESLint 10)

Qisqacha: eslint.config.js — config obyektlari massivi. Har obyekt "qaysi fayllar uchun" (files) va "nima" (rules, languageOptions, extends) deydi. ESLint har fayl uchun mos obyektlarni yuqoridan pastga birlashtiradi: pastdagisi yuqoridagini ustidan yozadi. Faqat ignores bor obyekt (yoki globalIgnores()) — butun loyiha uchun e'tiborsiz fayllar. ESLint 10 da eski .eslintrc.* umuman o'qilmaydi. Natijani tekshirish — --print-config.

Bu darsda

• Flat config'ning tuzilishini — massiv va undagi obyektlarni — o'qiy olasiz.
• files, ignores, globalIgnores, extends, languageOptions, rules vazifasini bilasiz.
• Bir fayl uchun qaysi qoidalar ishlashini --print-config bilan aniqlaysiz.
• Qoida darajalari, --fix, --max-warnings va chiqish kodlarini ishlatasiz.
• vazifalar dagi eslint.config.js ni boshidan oxirigacha tushuntira olasiz.

Oldin bilishingiz kerak: ESLint va Prettier, Prettier konfiguratsiyasi, Exit code va buyruqlarni zanjirlash.

1. Nega bu kerak?

ESLint va Prettier darsida vazifalar ga ESLint'ni qo'shgan edik, 15-qismda unga TypeScript qoidalari va XSS himoyasi qo'shildi. Endi eslint.config.js — 90 qator, sakkiz blok. Sardor bitta qoidani o'zgartirmoqchi: src/ dagi eski fayl uchun == ga vaqtincha ruxsat. Qayerga yozadi? Yangi blokni boshigami, oxirigami? files naqshi qanday bo'ladi?

Ikkinchi holat: Sardor internetdan topgan maslahatni qo'lladi — .eslintrc.json yaratdi. ESLint uni ko'rmaydi ham.

Bu dars — eslint.config.js ning anatomiyasi. Uni tushunsangiz, har qanday loyihaning ESLint sozlamasini o'qiy olasiz: React, Vue, Node — tuzilma bir xil.

O'xshatish: oshxona devoridagi qoidalar ro'yxati. "Hamma xodimlar: qo'l yuvish" (umumiy). "Oshpazlar: qalpoq" (faqat ma'lum guruh). "Qandolatchi Malika: qalpoq shart emas, to'r" (aniqroq, pastroqda yozilgan va avvalgini ustidan yozadi). Har xodim o'ziga tegishli qatorlarni yuqoridan pastga o'qiydi.

2. ESLint 10: faqat flat config

2.1 Tarix bir paragrafda

ESLint'ning eski sozlamasi — eslintrc: .eslintrc.json, .eslintrc.js, extends: "eslint:recommended" satrlari, papkalar bo'yicha "kaskad". Murakkab va sirli edi: qaysi fayl qaysi sozlamani olishini tushunish qiyin. ESLint 9 (2024-yil 5-aprel) yangi flat config ("tekis sozlama") ni sukut qildi, ESLint 10 (2026-yil 6-fevral) esa eskisini butunlay olib tashladi. Hozirgi versiya — 10.12.0 (2026-10-02, npm view).

2.2 .eslintrc.json — ko'rinmaydi

Sardorning tajribasi: loyihada faqat .eslintrc.json. npx eslint . uzun xabar chiqaradi — undagi bitta qatorga qarang: couldn't find an eslint.config.* file.

Oops! Something went wrong! :(

ESLint: 10.12.0

ESLint couldn't find an eslint.config.* file.

From ESLint v9.0.0, the default configuration file is now eslint.config.*.
If you are using a .eslintrc.* file, please follow the migration guide
to update your configuration file to the new format:

https://eslint.org/docs/latest/use/configure/migration-guide

Tarjimasi: "ESLint eslint.config.* faylini topa olmadi. ESLint v9.0.0 dan sukut config fayl — eslint.config.*. .eslintrc.* ishlatayotgan bo'lsangiz, migratsiya qo'llanmasiga qarang". Chiqish kodi — 2 (ESLint ishlay olmadi). ESLint 9 da ESLINT_USE_FLAT_CONFIG=false muhit o'zgaruvchisi eski formatni yoqardi; ESLint 10 da u ham ishlamaydi — sinab ko'rdik, xabar o'sha-o'sha.

Saboq: 2023-yildan oldingi maqola va javoblardagi .eslintrc misollari endi ishlamaydi. Eski loyihani yangilashda npx @eslint/migrate-config .eslintrc.json — rasmiy ko'chirish vositasi (biz ishga tushirmadik — rasmiy hujjatdan).

3. Anatomiya

3.1 Birinchi config

Sardorning bahor-menyu sinov loyihasi: src/menyu.js (brauzer), skriptlar/salom.js (Node), dist/ (build natijasi). O'rnatish (2026-10 holatiga versiyalar):

npm i -D -E eslint@10.12.0 @eslint/js@10.0.1 globals@17.13.0

eslint.config.js:

// eslint.config.js — config obyektlari massivi
import { defineConfig, globalIgnores } from "eslint/config";
import js from "@eslint/js";
import globals from "globals";

export default defineConfig([
  globalIgnores(["dist/"]),
  js.configs.recommended,
  {
    files: ["src/**/*.js"],
    languageOptions: { globals: globals.browser },
    rules: {
      eqeqeq: "error",
      "prefer-const": "error",
      "no-unreachable": "warn",
    },
  },
  {
    files: ["skriptlar/**/*.js"],
    languageOptions: { globals: globals.node },
  },
]);

Massivda to'rt element. Ularni qanday o'qish kerakligini diagramma ko'rsatadi: har fayl massivdan "o'z" obyektlarini yig'adi.

flowchart TB
  F["src/menyu.js"] --> A["1. globalIgnores:<br/>dist/ emas — o'tadi"]
  A --> B["2. js.configs.recommended<br/>files yo'q — hamma uchun"]
  B --> C["3. files: src/** —<br/>mos: browser, eqeqeq…"]
  C --> D["4. files: skriptlar/** —<br/>mos emas, o'tkaziladi"]
  D --> R["yakuniy sozlama<br/>(birlashgan)"]

3.2 Har kalit

Endi har birini ochamiz.

3.3 defineConfig va extends

defineConfig — eslint/config dan keladigan yordamchi (Vite'dagi kabi). Ikki ishi bor: muharrirga turlar (avtoto'ldirish) va extends kalitini qo'llab-quvvatlash. extends — "shu config'larni olib, faqat mening files im uchun qo'lla". vazifalar da:

{
  files: ["**/*.ts"],
  extends: [tseslint.configs.recommended],
},

TypeScript qoidalari faqat .ts fayllarga. extends siz buni qilish qiyin edi: tayyor config'larni massivga "yoyib" (...tseslint.configs.recommended), har biriga files ni qo'lda qo'shish kerak bo'lardi. Eski loyihalarda shunday yozuvni (...) ko'rasiz.

3.4 files va ignores

files — glob naqshlar (.gitignore dagi kabi *, **):

• "src/**/*.js" — src/ va ichki papkalardagi hamma .js.
• "**/*.ts" — loyihaning hamma joyidagi .ts.
• "src/**/*.{js,ts}" — ikkala kengaytma.

files yo'q obyekt (masalan, js.configs.recommended) — hamma fayl uchun. Qaysi fayllar umuman tekshiriladi? ESLint 10 sukut bo'yicha .js, .mjs, .cjs ni oladi; boshqa kengaytma (.ts) — biror obyektning files ida bo'lsagina.

ignores ikki xil ishlaydi — bu flat config'ning eng chalkash joyi:

globalIgnores(["dist/"]) — birinchi holatning aniq yozuvi (adashmaslik uchun ESLint 9.22 da defineConfig bilan birga qo'shilgan yordamchi). Sinadik: globalIgnores ni izohga olsak, npx eslint dist:

…\dist\eski.js
  1:5  error  'x' is assigned a value but never used  no-unused-vars

Build natijasi tekshirildi — keraksiz. globalIgnores bilan esa faylni aniq nomlasak ham:

…\dist\eski.js
  0:0  warning  File ignored because of a matching ignore pattern. Use "--no-ignore" to disable file ignore settings or use "--no-warn-ignored" to suppress this warning

Tarjimasi: "Fayl e'tiborsiz naqshga mos kelgani uchun o'tkazildi". node_modules/ va .git/ — doim e'tiborsiz. Prettier'dan farqli (Prettier konfiguratsiyasi), ESLint .gitignore ni o'zi o'qimaydi — kerak bo'lsa @eslint/compat paketidagi includeIgnoreFile yordamchisi bor.

3.5 languageOptions.globals

no-undef qoidasi e'lon qilinmagan nomni xato deydi. Lekin document (brauzer) va process (Node) — e'lon qilinmagan, ular muhitdan keladi. globals paketi ularning ro'yxatini beradi (globals.browser, globals.node, globals.serviceworker). Node bloki olib tashlansa:

…\skriptlar\salom.js
  1:1   error  'console' is not defined  no-undef
  1:13  error  'process' is not defined  no-undef

console ham — u JavaScript standartida emas, muhitda. Har muhit uchun alohida obyekt — vazifalar da uchta: brauzer (src/), Service Worker (public/sw.js), Node (testlar va skriptlar).

Tekshirib ko'ring: Obyekt { ignores: ["src/eski/**"], rules: { eqeqeq: "off" } } yozildi. src/eski/ fayllari tekshiriladimi?

4. Birlashish: kim yutadi

4.1 Pastdagi yuqoridagini ustidan yozadi

Sardorning muammosi — src/eski/ da == ga ruxsat. Massiv oxiriga yangi obyekt:

{
  // eski kod: hozircha == ga ruxsat (keyinroq tuzatamiz)
  files: ["src/eski/**/*.js"],
  rules: { eqeqeq: "off" },
},

src/eski/kassa.js ham src/**/*.js ga, ham src/eski/**/*.js ga mos — ikkala obyekt qo'llanadi. Qaysi eqeqeq yutadi? Tekshiramiz:

npx eslint --print-config src/eski/kassa.js

--print-config — shu fayl uchun yakuniy (birlashgan) sozlamani JSON qilib chiqaradi. Undan kerakli qatorlar:

eqeqeq: [0,"always"]
prefer-const: [2,{"destructuring":"any","ignoreReadBeforeAssign":false}]

src/menyu.js uchun esa — eqeqeq: [2,"always"]. Raqamlar — darajalar: 0 — "off", 1 — "warn", 2 — "error". prefer-const saqlandi: pastdagi obyekt faqat eqeqeq ni o'zgartirdi, qolganini emas. Qoidalar birlashadi, obyekt butunlay almashmaydi.

Agar yangi obyektni massiv boshiga (globalIgnores dan keyin) yozsak — src/**/*.js obyekti undan keyin keladi va eqeqeq: "error" qaytadan yutadi. Tartib — mantiqning bir qismi. Qoida: umumiy — tepada, aniq istisnolar — pastda.

--print-config src/menyu.js bo'yicha bu faylga 65 ta qoida yoqilgan, globals da 1 207 ta nom (brauzerning hamma global obyektlari), sourceType: "module", ecmaVersion: 2026.

4.2 Config inspector

Katta config'da --print-config JSON'i uzun. ESLint'ning vizual vositasi — config inspector (@eslint/config-inspector, 3.5.0): npx eslint --inspect-config lokal veb-sahifa ochadi, unda har obyekt, uning files i va qaysi fayllarga tushishi ko'rinadi. Biz uni ishga tushirmadik (brauzer ochadi) — rasmiy hujjatdan. Obyektlarga name bersangiz, inspector'da o'qish osonlashadi.

5. Qoidalar, darajalar va buyruqlar

5.1 Daraja va sozlama

rules: {
  eqeqeq: "error",                       // daraja
  "no-unreachable": "warn",
  "prefer-const": ["error", { destructuring: "all" }], // + sozlama
  "no-console": "off",
}

Massiv ko'rinishi — [daraja, sozlama]. Sozlamani faqat darajani o'zgartirib yozsangiz ("prefer-const": "warn"), oldingi obyektdagi sozlama saqlanadi.

5.2 Birinchi ishga tushirish

src/menyu.js da uchta ataylab qo'yilgan xato bor: return dan keyingi qator, let natija (qayta o'zlashtirilmaydi) va ==:

npx eslint .

…\src\menyu.js
  13:3   warning  Unreachable code                                   no-unreachable
  17:7   error    'natija' is never reassigned. Use 'const' instead  prefer-const
  17:42  error    Expected '===' and instead saw '=='                eqeqeq

✖ 3 problems (2 errors, 1 warning)
  1 error and 0 warnings potentially fixable with the `--fix` option.

(Yo'l qisqartirildi.) Har qator: qator:ustun, daraja, xabar, qoida nomi. Oxirgi qator — --fix bilan avtomatik tuzatsa bo'ladiganlar soni. Chiqish kodi — 1.

5.3 --fix

npx eslint src --fix

…\src\menyu.js
  13:3   warning  Unreachable code                     no-unreachable
  17:44  error    Expected '===' and instead saw '=='  eqeqeq

✖ 2 problems (1 error, 1 warning)

let natija → const natija (faylda o'zgardi). == esa tuzatilmadi: == ni === ga almashtirish kod ma'nosini o'zgartirishi mumkin (null == undefined — true, === bilan — false), shuning uchun eqeqeq uni o'zi tuzatmaydi. --fix faqat xavfsiz o'zgarishlarni qiladi — qolganini siz.

5.4 Chiqish kodlari va --max-warnings

Ogohlantirish CI'ni to'xtatmaydi — ko'p loyihada ular yillar davomida yig'iladi. Buni oldini olish — --max-warnings 0. eqeqeq ni o'chirib (--rule "eqeqeq: off"), faqat ogohlantirish qoldirdik:

ESLint found too many warnings (maximum: 0).

Kod — 1. "Ogohlantirish — keyin tuzataman" degan qarzga yo'l qo'yilmaydi.

Tekshirib ko'ring: "no-unreachable": "warn" ni "error" qilish va --max-warnings 0 qo'shish — natijasi bir xilmi?

6. vazifalar dagi config'ni o'qiymiz

Sizning vazifalar ingizdagi eslint.config.js (Vite IV dan keyingi holat, src/ yo'llari bilan). Bu darsda kodni o'zgartirmaymiz — faqat o'qiymiz; keyingi darsda unga tur bilan ishlaydigan qoidalar qo'shamiz. Sakkiz obyekt, izohlar qisqartirilgan:

Bir necha nozik joy:

• 4-obyektdagi ignores — mahalliy: .d.ts fayllarga async qoidalar qo'llanmaydi (ularda kod yo'q), lekin 3-obyekt (recommended) ularga qo'llanadi. Aynan «files va ignores» bo'limidagi ikkinchi holat.
• tsconfigRootDir: import.meta.dirname — tsconfig.json qayerdaligi: config faylning o'z papkasi (ESM import.meta).
• 6-obyektdagi no-restricted-syntax — AST selektori bilan innerHTML = o'zlashtirishni taqiqlaydi. Selektor — CSS selektoriga o'xshash, lekin kod daraxti uchun. Bu — ESLint'ning eng kuchli imkoniyatlaridan biri: maxsus plaginsiz o'z qoidangizni yozish.
• "*.config.js" — eslint.config.js ning o'zi ham lint qilinadi (Node muhitida).

npm run lint (eslint .) — hammasini bir yo'la. 4-obyekt TypeScript tur ma'lumotini yuklaydi, shuning uchun lint oddiy JavaScript loyihasidan sekinroq — bu narxni keyingi darsda o'lchaymiz.

7. Ko'p uchraydigan xatolar

7.1 .eslintrc maqolalari

2023-yilgacha yozilgan qo'llanmalar .eslintrc.json va "extends": "eslint:recommended" satrini ko'rsatadi. ESLint 10 da — ESLint couldn't find an eslint.config.* file. Har doim rasmiy hujjatning versiyasiga qarang.

7.2 Yolg'iz ignores va mahalliy ignores

Yuqoridagi savol: ignores + boshqa kalit — mahalliy. Global uchun — globalIgnores().

7.3 Istisno obyekti tepada

Aniqroq obyekt umumiysidan keyin yozilsin. --print-config bilan tekshiring.

7.4 "type": "module" yo'q

eslint.config.js da import — package.json da "type": "module" bo'lmasa, Node uni CommonJS deb o'qiydi va SyntaxError: Cannot use import statement outside a module (ESLint va Prettier darsidagi xato). Yechim — "type": "module" yoki fayl nomini eslint.config.mjs qilish.

8. Mashqlar

Mashqlar kurs/mashqlar/16/37-eslint/ da: npm init -y, npm pkg set type=module, npm i -D -E eslint@10.12.0 @eslint/js@10.0.1 globals@17.13.0, darsdagi src/menyu.js, skriptlar/salom.js, dist/eski.js.

1-mashq (oson): Darajalar

1. "warn" ning raqami —
2. Faqat ogohlantirish bo'lsa, eslint chiqish kodi —
3. eslint.config.* topilmasa, chiqish kodi —
4. Shu fayl uchun yakuniy sozlamani ko'rsatadigan bayroq — --

2-mashq (o'rta): Config yozing

Darsdagi to'rt obyektli eslint.config.js ni o'zingiz yozing (ko'chirmasdan, jadvalga qarab). npx eslint . darsdagidek 3 muammo (2 error, 1 warning) bersin, dist/ tekshirilmasin. Keyin --fix qiling: nima o'zgardi va nima qoldi?

  13:3   warning  Unreachable code                                   no-unreachable
  17:7   error    'natija' is never reassigned. Use 'const' instead  prefer-const
  17:42  error    Expected '===' and instead saw '=='                eqeqeq

✖ 3 problems (2 errors, 1 warning)

3-mashq (qiyin): Istisno va tekshiruv

src/eski/kassa.js da: export const teng = (a, b) => a == b;. Config'ga shunday obyekt qo'shingki, faqat src/eski/ da eqeqeq o'chiq bo'lsin, boshqa qoidalar esa ishlayversin. --print-config bilan ikkala fayl uchun eqeqeq ni tekshiring. Keyin obyektni massiv boshiga ko'chirib, farqni ko'ring.

{
  // eski kod: hozircha == ga ruxsat (keyinroq tuzatamiz)
  files: ["src/eski/**/*.js"],
  rules: { eqeqeq: "off" },
},

9. Real ishda

• Har JavaScript jamoasida eslint.config.js bor; yangi loyihada uni package.json va vite.config.ts bilan birga birinchi o'qiysiz.
• Eski loyihalarni ko'chirish — .eslintrc → flat config, ESLint 8 → 10 — real ish vazifasi; @eslint/migrate-config boshlang'ich nuqta beradi, natijani qo'lda tozalash kerak.
• Monorepo'da bitta ildiz config, files bilan har paketga o'z qoidalari.
• Intervyu savollari: "Flat config va eslintrc farqi?", "Bitta papkada qoidani qanday o'chirasiz?", "Lint CI'da qanday ishlaydi?" (eslint ., --max-warnings 0).

Xulosa

• ESLint 10 — faqat eslint.config.*: config obyektlari massivi; .eslintrc umuman o'qilmaydi (kod 2).
• Obyekt: files (qaysi fayllar), rules, languageOptions (globals), extends (shu files bilan boshqa config'lar), plugins, name.
• ignores yolg'iz (yoki globalIgnores()) — global; boshqa kalit bilan — mahalliy istisno.
• Mos obyektlar yuqoridan pastga birlashadi, pastdagisi yutadi; tekshirish — --print-config.
• Darajalar off/warn/error (0/1/2); --fix faqat xavfsizini tuzatadi; kodlar 0/1/2; --max-warnings 0 — ogohlantirishlar ham CI'ni to'xtatadi.

Keyingi dars: ESLint II: React va TypeScript loyiha uchun plaginlar — typescript-eslint ning tur bilan ishlaydigan qoidalari (recommendedTypeChecked), vazifalar da topilgan haqiqiy xato va React plaginlari.

Manbalar

• ESLint hujjatlari: "Configuration Files", "Configure Rules", "Ignore Files", "Command Line Interface" — eslint.org/docs/latest/
• ESLint v10 migratsiya qo'llanmasi va @eslint/migrate-config — eslint.org/docs/latest/use/migrate-to-10.0.0
• ESLint 10.12.0, @eslint/js 10.0.1, globals 17.13.0 — darsdagi chiqishlar 2026-10 da olingan