📚 Angularda qo'llash

Angular loyihasiga Prettier, ESLint va Husky integratsiyasi — bu kod sifati va jamoaviy ishlashni avtomatlashtirish uchun eng yaxshi yondashuvlardan biridir. Quyida bosqichma-bosqich to‘liq master darajadagi integratsiya yo‘riqnomasi keltirilgan:

✅ 1-QADAM: Yangi Angular loyiha yarating (agar mavjud bo‘lmasa)

ng new my-angular-app
cd my-angular-app

✅ 2-QADAM: ESLint ni o‘rnatish va TSLint’ni almashtirish

ng add @angular-eslint/schematics

Bu quyidagilarni avtomatik qiladi:

• .eslintrc.json faylini yaratadi
• tslint.json ni olib tashlaydi
• Angular builder’ga eslint ni qo‘shadi

🧪 Test:

ng lint

✅ 3-QADAM: Prettier o‘rnatish va sozlash

npm install --save-dev prettier eslint-config-prettier

🔧 .prettierrc faylini yarating:

{
  "singleQuote": true,
  "semi": true,
  "printWidth": 100,
  "tabWidth": 2
}

🔧 .prettierignore fayl:

dist
node_modules
coverage

✅ 4-QADAM: VSCode uchun settings.json sozlash

.vscode/settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

✅ 5-QADAM: Husky + lint-staged ni o‘rnatish

npm install --save-dev husky lint-staged
npx husky init

🔧 Husky hook yaratish:

.husky/pre-commit

npx lint-staged

✅ 6-QADAM: package.jsonga lint-staged qo‘shish

"lint-staged": {
  "*.{ts,html}": [
    "ng lint --fix"
  ],
  "*.{js,json,scss,css}": [
    "prettier --write"
  ]
},

• ng lint --fix - bir muammo bo'lishi ehtimoli bor xatolik berayotgan faylni logda ko'rsata olmasligi mumkin shu sababli eslint orqali eslint --fix commandni ishga tushurishimiz ham mumkin.

"lint-staged": {
  "*.{ts,html}": [
    "eslint --fix"
  ],
  "*.{js,json,scss,css}": [
    "prettier --write"
  ]
}

Har bir git commit oldidan avtomatik tekshiruv va formatlash ishlaydi.

✅ 7-QADAM: Amaliy test

1. Kodni buzib yozing (app.component.ts ichida noto‘g‘ri formatlang)
2. git add .
3. git commit -m "Test" ➤ Husky pre-commit hook ishga tushadi
4. Kod ESLint + Prettier orqali avtomatik tozalanadi

✅ BONUS: format va lint script qo‘shish

"scripts": {
  "format": "prettier --write .",
  "lint": "ng lint",
  "prepare": "husky"
}

📊 Xulosa jadvali:

📁 Arxitektura holati:

my-angular-app/
├── .eslintrc.json
├── .prettierrc
├── .prettierignore
├── .husky/
│   └── pre-commit
├── .vscode/
│   └── settings.json
└── package.json