Prettier konfiguratsiyasi: .prettierrc, plaginlar va --check

Qisqacha: Prettier sozlamasi — loyiha ildizidagi bitta fayl (.prettierrc yoki prettier.config.js). Sozlamalar ataylab kam: printWidth, semi, singleQuote, trailingComma, arrowParens, endOfLine va yana bir nechta. .prettierignore va .gitignore dagi fayllarga tegilmaydi. prettier --check CI uchun (o'zgartirmaydi, chiqish kodi 1), --write — formatlaydi. Plaginlar yangi til yoki qo'shimcha qoida qo'shadi: importlarni saralash, Tailwind klasslari tartibi.

Bu darsda

• Prettier'ning asosiy sozlamalarini va ularning sukut qiymatlarini bilasiz.
• Config fayl turlarini (.prettierrc, prettier.config.js) va qaysi biri tanlanishini tushuntira olasiz.
• overrides bilan fayl turiga qarab boshqa sozlama berasiz.
• --check, --write, --list-different va chiqish kodlarini CI'da ishlatasiz.
• Importlarni saralash plaginini ulaysiz.

Oldin bilishingiz kerak: ESLint va Prettier, Stylelint va Prettier: CSS kod sifati, scripts chuqur.

1. Nega bu kerak?

ESLint va Prettier darsida vazifalar ga Prettier'ni qo'shgan edik: .prettierrc da bitta qator — "printWidth": 72. Shu yetarli edi. Lekin Sardor yangi jamoaga qo'shildi va uning loyihasida boshqa manzara:

• .prettierrc da 9 ta kalit, singleQuote: true, semi: false.
• Yonida yana prettier.config.js — ichida boshqa qiymatlar. Qaysi biri ishlayapti?
• CI'da npm run format:check qizil, Sardorning kompyuterida esa yashil.
• Bir hamkasb importlarni har PR'da qo'lda saralaydi.

Bu dars — Prettier sozlamasini o'qish va boshqarish haqida. Prettier'ning falsafasi: "sozlamalar qancha kam bo'lsa, bahs shuncha kam". Lekin qolgan sozlamalarni bilish kerak — ular har jamoada uchraydi.

O'xshatish: Prettier — oshxonadagi idish yuvish mashinasi. Siz "qanday yuvish"ni har kuni muhokama qilmaysiz: bir marta dastur tanlaysiz (sozlama), keyin hamma idish bir xil chiqadi.

2. Sozlamalar

2.1 Bitta faylni turli sozlamalar bilan

Sardorning tartibsiz fayli src/menyu.js:

import { formatPrice } from './narx.js'
import fs from "node:fs"
const taomlar = [{nom:'Osh',narx:35000},{nom:"Lag'mon",narx:28000},
  {nom:'Manti', narx:30000}]
export function menyuniChiqar(royxat){ return royxat.map(t=>
  `${t.nom} — ${formatPrice(t.narx)}`).join('\n') }
const sozlama = {"rang": "yashil", 'shrift-olcham': 16}

Sozlamasiz npx prettier src/menyu.js (Prettier 3.9.9, natija ekranga, fayl o'zgarmaydi):

import { formatPrice } from "./narx.js";
import fs from "node:fs";
const taomlar = [
  { nom: "Osh", narx: 35000 },
  { nom: "Lag'mon", narx: 28000 },
  { nom: "Manti", narx: 30000 },
];
export function menyuniChiqar(royxat) {
  return royxat.map((t) => `${t.nom} — ${formatPrice(t.narx)}`).join("\n");
}
const sozlama = { rang: "yashil", "shrift-olcham": 16 };

Endi .prettierrc ga boshqa jamoaning sozlamasini yozamiz:

{
  "printWidth": 60,
  "singleQuote": true,
  "semi": false,
  "trailingComma": "es5",
  "arrowParens": "avoid",
  "quoteProps": "consistent"
}

import { formatPrice } from './narx.js'
import fs from 'node:fs'
const taomlar = [
  { nom: 'Osh', narx: 35000 },
  { nom: "Lag'mon", narx: 28000 },
  { nom: 'Manti', narx: 30000 },
]
export function menyuniChiqar(royxat) {
  return royxat
    .map(t => `${t.nom} — ${formatPrice(t.narx)}`)
    .join('\n')
}
const sozlama = { 'rang': 'yashil', 'shrift-olcham': 16 }

Ikki natijani solishtiring — har farq bitta sozlamadan.

2.2 Sozlamalar jadvali

Bir nechta nozik joy:

• "Lag'mon" qo'shtirnoqda qoldi — singleQuote: true bo'lsa ham. Prettier satr ichidagi belgilarga qaraydi: 'Lag\'mon' ga qaraganda "Lag'mon" o'qishga oson (qochish belgisi yo'q). O'zbekcha matnli kodda bu ko'p uchraydi.
• printWidth — maqsad. Prettier undan oshmaslikka harakat qiladi, lekin bo'linmaydigan narsani (uzun satr, URL) bo'lmaydi. 60 da .map(...).join(...) zanjiri uch qatorga bo'lindi.
• trailingComma: "es5" — massiv va obyektda oxirgi vergul bor, funksiya argumentlarida yo'q. "all" (sukut) — hamma joyda. Oxirgi vergulning foydasi — git diff'da bitta qator o'zgaradi (ESLint va Prettier darsidagi sabab).
• quoteProps: "consistent" — bitta kalitga qo'shtirnoq kerak bo'lsa ('shrift-olcham'), hammasiga qo'yadi.
• endOfLine: "lf" — Windows'dagi CRLF faylni Prettier "formatlanmagan" deb hisoblaydi. Bu vazifalar da haqiqatan bo'ldi — Loyiha ildizidagi fayllar darsida .gitattributes bilan yechamiz.

vazifalar dagi sozlama — faqat "printWidth": 72 (kursdagi 70 belgi qoidasiga yaqin). Qolgani sukut. Bu Prettier jamoasining ham tavsiyasi: faqat zarurini o'zgartiring.

Tekshirib ko'ring: Jamoada bir kishi "semi: false chiroyliroq" deydi, boshqasi — yo'q. Prettier nuqtai nazaridan bu bahsni qanday yopish kerak?

3. Config fayllar

3.1 Qaysi formatlar bor

Prettier sozlamani bir nechta joydan qidiradi (rasmiy hujjat ro'yxati): package.json dagi "prettier" kaliti, .prettierrc (JSON yoki YAML), .prettierrc.json, .prettierrc.yaml, .prettierrc.toml, .prettierrc.js/.mjs/.cjs, prettier.config.js/.mjs/.cjs va .ts variantlari.

.prettierrc — JSON yoki YAML. Shuning uchun { "printWidth": 72, } (oxirgi vergul) xato bermadi — YAML uni qabul qiladi. JSON fayl bo'lsa ham, Prettier sizni bu yerda ushlamaydi.

prettier.config.js — JavaScript fayl: izoh va tur bilan yozish mumkin, plaginlar ro'yxati uchun qulay:

// prettier.config.js — JS ko'rinishi: izoh va turlar bilan
/** @type {import("prettier").Config} */
export default {
  printWidth: 72,
};

/** @type {...} */ — JSDoc tur izohi: VS Code kalitlarni taklif qiladi va xatoni ko'rsatadi.

3.2 Ikki config — biri jim e'tiborsiz

Sardorning muammosi: ildizda ham .prettierrc, ham prettier.config.js. Prettier'dan so'raymiz:

npx prettier --find-config-path src/importlar.js

.prettierrc

Faqat bittasi ishlatiladi — .prettierrc birinchi topildi, prettier.config.js dagi plaginlar va sozlamalar jim e'tiborsiz qoldi. .prettierrc ni olib tashlasak — prettier.config.js. Qoida (Vite config'idagi kabi — Vite II): loyihada bitta Prettier config bo'lsin. --find-config-path — "qaysi fayl ishlayapti?" savoliga tez javob.

Config fayl papka bo'yicha qidiriladi: Prettier formatlanayotgan fayldan boshlab yuqoriga ko'tariladi va birinchi topilganini oladi. Monorepo'da ichki papkaning o'z .prettierrc i bo'lishi mumkin. Bitta fayl uchun Prettier'ning butun yo'li:

flowchart LR
  F["src/menyu.js"] --> I{".prettierignore<br/>yoki .gitignore<br/>da bormi?"}
  I -- ha --> S["o'tkazib<br/>yuboriladi"]
  I -- yo'q --> C["yuqoriga qarab<br/>birinchi config"]
  C --> P["AST → qayta<br/>yozish"]
  P --> R{"--check<br/>yoki --write?"}
  R -- check --> K["chiqish kodi<br/>0 yoki 1"]
  R -- write --> W["fayl<br/>formatlandi"]

Diagrammadagi har qadamni pastda alohida ko'ramiz: ignore fayllari, config qidiruvi va chiqish kodlari.

3.3 Noma'lum kalit — faqat ogohlantirish

.prettierrc da xato: "semis": false (ko'plikda):

Checking formatting...
[warn] Ignored unknown option { semis: false }. Did you mean semi?
[warn] src/menyu.js
[warn] Code style issues found in the above file. Run Prettier with --write to fix.

Tarjimasi: "Noma'lum semis sozlamasi e'tiborsiz qoldirildi. semi demoqchimisiz?". Vite'dan farqli (Vite II dagi jim prot), Prettier ogohlantiradi — lekin to'xtamaydi. CI loglarida [warn] qatorlarini o'qing.

3.4 overrides — fayl turiga qarab

export default {
  printWidth: 72,
  overrides: [
    {
      files: "*.md",
      options: { printWidth: 80, proseWrap: "always" },
    },
  ],
};

overrides — files naqshiga mos fayllar uchun qo'shimcha sozlama. Masalan, Markdown'da boshqa kenglik, .json larda tabWidth: 4. proseWrap: "always" — Markdown matnini ham printWidth bo'yicha bo'ladi (sukut — "preserve", tegmaydi).

4. Qaysi fayllar formatlanadi

4.1 .prettierignore va .gitignore

prettier --check . — joriy papkadagi Prettier tushunadigan hamma fayl. Ba'zilari formatlanmasligi kerak: build natijasi, lock-fayl, begona kod. Ikki manba:

• .prettierignore — .gitignore sintaksisida (.gitignore).
• .gitignore — Prettier 3 uni ham sukut bo'yicha hisobga oladi.

Sinadik: dist/x.js da const x=1 (formatlanmagan), .gitignore da dist/:

Checking formatting...
All matched files use Prettier code style!

dist/ tekshirilmadi — .prettierignore ga yozmasak ham. node_modules/ ham doim e'tiborsiz.

vazifalar ning .prettierignore i:

# Prettier faqat JavaScript'ni formatlaydi.
# HTML va CSS — kurs uslubida (masalan, <meta> "/>" siz): Prettier
# ularni o'z uslubiga o'tkazadi, buni sozlab bo'lmaydi.
*.html
*.css
# Markdown jadvallari hizalanib, qatorlar juda uzayadi
*.md
package-lock.json

# Build natijasi (npm run build) va tahlil (npm run analiz)
dist/
analiz/

Har qatorda — sabab. Bu yaxshi odat: kelajakdagi o'quvchi "nega HTML formatlanmaydi?" deb so'ramaydi. dist/ va analiz/ .gitignore da ham bor — bu yerda ular aniqlik uchun takrorlangan (Vite V da analiz/ ni qo'shgan edik).

Bitta fayl haqida so'rash — --file-info:

npx prettier --file-info src/menyu.js

{ "ignored": false, "inferredParser": "babel" }

ignored — e'tiborsizmi, inferredParser — qaysi tahlilchi bilan o'qiladi (babel — JavaScript uchun).

4.2 Qaysi tillar

Prettier 3 o'zi tushunadi: JavaScript, TypeScript, JSX, JSON, CSS/SCSS/Less, HTML, Vue, Angular shablonlari, Markdown, YAML, GraphQL. Boshqalari (PHP, XML, SQL) — plaginlar bilan.

5. Buyruqlar va chiqish kodlari

Chiqish kodlari (Exit code) — CI aynan shularga qaraydi:

Sintaksis xatoli fayl bilan (const x = ;):

Checking formatting...
[error] src/buzuq.js: SyntaxError: Unexpected token (1:11)
[error] > 1 | const x = ;
[error]     |           ^
[error]   2 |
Error occurred when checking code style in the above file.

Chiqish kodi — 2. Prettier sintaksisni tuzatmaydi: u faqat to'g'ri kodning ko'rinishini o'zgartiradi. Xatoni avval o'zingiz tuzating (yoki ESLint ko'rsatadi).

--cache — oldingi tekshiruvdan beri o'zgarmagan fayllarni o'tkazib yuboradi (katta loyihada tez). Kichik loyihada (bizda) farq sezilmadi.

Tekshirib ko'ring: CI'da prettier --write . ishlatsak-chi? Fayllar formatlanadi, xato ham chiqmaydi.

6. Plaginlar

6.1 Importlarni saralash

Prettier importlar tartibini o'zgartirmaydi — bu kod ma'nosiga ta'sir qilishi mumkin (yon ta'sirli importlar). Lekin ko'p jamoa tartibni xohlaydi: avval Node modullari, keyin paketlar, keyin o'z fayllarimiz. Buni plagin qiladi. Mashhurlari (haftalik yuklanish, api.npmjs.org, 2026-09-29…10-05):

@ianvs/prettier-plugin-sort-imports ni sinaymiz:

npm i -D -E @ianvs/prettier-plugin-sort-imports@4.7.1

// prettier.config.js — 3-mashq: importlarni saralash
/** @type {import("prettier").Config} */
export default {
  printWidth: 72,
  plugins: ["@ianvs/prettier-plugin-sort-imports"],
  importOrder: [
    "<BUILTIN_MODULES>",
    "<THIRD_PARTY_MODULES>",
    "",
    "^[.]",
  ],
};

importOrder — guruhlar tartibi: <BUILTIN_MODULES> (node:fs), <THIRD_PARTY_MODULES> (zod), "" — bo'sh qator, "^[.]" — . bilan boshlanadigan (o'z fayllarimiz). Kirish:

import { formatPrice } from "./narx.js";
import { z } from "zod";
import fs from "node:fs";

Natija:

import fs from "node:fs";
import { z } from "zod";

import { formatPrice } from "./narx.js";

Endi hech kim importlarni qo'lda saralamaydi va PR'larda "importlar tartibi" haqida izoh yo'q.

6.2 Tailwind klasslari

prettier-plugin-tailwindcss — class="p-4 flex text-sm" dagi klasslarni Tailwind'ning tavsiya etilgan tartibiga keltiradi (Tailwind CSS darslari). Plagin Tailwind o'rnatilgan loyihada ishlaydi — biz bu darsda o'rnatmadik; ulash xuddi yuqoridagidek: plugins: ["prettier-plugin-tailwindcss"]. Rasmiy hujjatga ko'ra, u plugins ro'yxatida oxirgi bo'lishi kerak.

6.3 Plagin — bog'liqlik

Har plagin — yangi paket: node_modules ga, ta'minot zanjiri ga va Prettier yangilanganda moslik muammolariga qo'shiladi. vazifalar da plagin yo'q — 19 ta faylli loyihada importlar tartibi muammo emas. Plaginni haqiqiy og'riq bo'lganda qo'shing.

7. Prettier qanday ishlaydi — nega "bahssiz"

Prettier kodni satr sifatida o'zgartirmaydi. U avval kodni AST ga aylantiradi (JS dvigateli ichida darsidan tanish daraxt), keyin asl formatlashni butunlay unutadi va daraxtni o'z qoidalari bo'yicha qaytadan yozadi. Shuning uchun:

• Kirish qanchalik tartibsiz bo'lmasin, chiqish bir xil. Biz menyu.js ni bir qatorda ham, ko'p qatorda ham yozib ko'rdik — natija bayt-bayt bir xil chiqdi.
• Prettier'da "bu qatorni shunday qoldir" deb bo'lmaydi (bitta istisno — // prettier-ignore izohi, keyingi ifodani tegmasdan qoldiradi; jadvalga o'xshash massivlar uchun ishlatiladi).
• Bir nechta joyda Prettier asl kodga qaraydi: obyekt literalida birinchi kalitdan oldin qator ko'chishi bo'lsa, obyekt ko'p qatorda qoladi (objectWrap: "preserve", sukut). Bo'sh qatorlar ham (bittagacha qisqartirilib) saqlanadi.

Bu yondashuvning narxi — erkinlik yo'qligi. Foydasi — jamoadagi hamma kod bir qo'l bilan yozilgandek. Kod tekshiruvida (code review) vaqt uslubga emas, mantiqqa ketadi. Ko'pchilik jamoalar bu savdoni foydali deb hisoblaydi — shuning uchun Prettier deyarli har JavaScript loyihasida bor.

Tekshirib ko'ring: Massivda narxlar jadval ko'rinishida hizalangan (bo'sh joylar bilan ustun qilingan). Prettier ularni bitta qatorga yig'ib yubordi. Hizalanishni qanday saqlaysiz?

8. ESLint, EditorConfig va muharrir bilan birga

• ESLint — kod sifati, Prettier — ko'rinish. ESLint 10 da uslub qoidalari yo'q, shuning uchun to'qnashuv ham yo'q: eslint-config-prettier kerak emas (vazifalar kanonidagi qaror — ESLint II da ko'ramiz).
• EditorConfig (VS Code sozlamalari) — .editorconfig dagi indent_size, end_of_line ni Prettier ham o'qiydi (agar .prettierrc da shu kalitlar bo'lmasa).
• VS Code — Prettier kengaytmasi loyihadagi node_modules/prettier ni va config faylni ishlatadi; "Format on save" bilan saqlashda formatlanadi.

9. Ko'p uchraydigan xatolar

9.1 Ikki config fayl

.prettierrc va prettier.config.js — biri jim e'tiborsiz. --find-config-path bilan tekshiring, bittasini o'chiring.

9.2 "Menda yashil, CI'da qizil"

Sabablar: (1) Prettier versiyasi farq qiladi — package.json da aniq versiya (3.9.9, ^ siz) va npx prettier loyihadagini ishlatsin; (2) qator oxirlari — Windows'da CRLF, CI'da LF (Loyiha ildizidagi fayllar); (3) muharrir global Prettier'ni ishlatgan.

9.3 prettier --write ni HTML'ga

vazifalar da HTML ataylab .prettierignore da: Prettier HTML'ni o'z uslubiga o'tkazadi (masalan, <meta …> ga /> qo'shadi), bu kurs uslubiga mos emas. Begona loyihada esa jamoa qarorini hurmat qiling — .prettierignore ni o'qing.

10. Mashqlar

Mashqlar kurs/mashqlar/16/36-prettier/ da: npm init -y, npm pkg set type=module, npm i -D -E prettier@3.9.9, darsdagi tartibsiz menyu.js va importlar.js.

1-mashq (oson): Natijani oldindan ayting

.prettierrc da { "singleQuote": true, "semi": false }. Prettier quyidagilarni qanday yozadi?

1. const nom = "Osh"; —
2. const taom = "Lag'mon"; —

2-mashq (o'rta): Noma'lum kalit va chiqish kodi

.prettierrc ga { "printWidth": 72, "semis": false } yozing va npx prettier --check menyu.js ni bajaring. Chiqish kodini echo $? bilan ko'ring. Keyin kalitni tuzating va --write qiling. --check yana nima deydi?

Checking formatting...
[warn] Ignored unknown option { semis: false }. Did you mean semi?
[warn] xom/menyu.js
[warn] Code style issues found in the above file. Run Prettier with --write to fix.

3-mashq (qiyin): Importlarni saralash

@ianvs/prettier-plugin-sort-imports ni o'rnating va prettier.config.js yozing: Node modullari, keyin paketlar, bo'sh qator, keyin o'z fayllaringiz. .prettierrc bo'lsa — o'chiring (nega?). npx prettier importlar.js natijasi darsdagidek bo'lsin.

import fs from "node:fs";
import { z } from "zod";

import { formatPrice } from "./narx.js";

console.log(fs, z, formatPrice);

11. Real ishda

• Har jamoada Prettier config'i bor va u kamdan-kam o'zgaradi. Yangi loyihaga kelganda --find-config-path va .prettierignore — birinchi o'qiladiganlar.
• Formatlashni o'zgartirish (masalan, printWidth 80 → 100) — butun repo bir commit'da qayta formatlanadi. Bunday commit'ni git blame dan yashirish uchun .git-blame-ignore-revs faylidan foydalaniladi.
• Intervyu savollari: "Prettier va ESLint farqi?", "CI'da Prettier qanday ishlatiladi?" (--check), "Nega Prettier'da sozlamalar kam?".

Xulosa

• Asosiy sozlamalar: printWidth (80), semi, singleQuote, trailingComma ("all"), arrowParens, quoteProps, endOfLine ("lf"); faqat zarurini o'zgartiring.
• Config — bitta fayl: .prettierrc (JSON/YAML) yoki prettier.config.js; ikkitasi bo'lsa — biri jim e'tiborsiz (--find-config-path). Noma'lum kalit — [warn].
• .prettierignore va .gitignore dagi fayllar tekshirilmaydi; overrides — fayl turiga qarab sozlama.
• --check CI uchun (kodlar: 0 — toza, 1 — formatlanmagan, 2 — xato), --write — lokal.
• Plaginlar: importlarni saralash, Tailwind tartibi — haqiqiy ehtiyoj bo'lganda.

Keyingi dars: ESLint I: flat config anatomiyasi (ESLint 10) — eslint.config.js qanday tuzilgan: config obyektlari massivi, files, ignores, rules va ularning birlashishi.

Manbalar

• Prettier hujjatlari: "Options", "Configuration File", "Ignoring Code", "CLI" — prettier.io/docs
• Prettier 3.9.9 — darsdagi hamma chiqishlar 2026-10 da olingan
• @ianvs/prettier-plugin-sort-imports — github.com/IanVS/prettier-plugin-sort-imports; prettier-plugin-tailwindcss — github.com/tailwindlabs/prettier-plugin-tailwindcss