Linting va formatlash

Kod sifati

Izchil kod sifati va uslubi Node.js loyihalari uchun muhim, ayniqsa jamoaviy muhitda.

Bu yordam beradi:

Kodning o‘qilishi va barqarorligi
Xatolarni erta aniqlash va oldini olish
Jamoa bo‘ylab izchil kodlash uslubi
Avtomatik kodlarni ko‘rib chiqish
Yaxshiroq dasturchi tajribasi

Eslatma: Ushbu qo‘llanma JavaScript va TypeScript vositalarini o‘z ichiga oladi, chunki ular o‘xshash linting va formatlash ekotizimlariga ega.

ESLint: JavaScript/TypeScript kodini tekshirish (linting)

ESLint - bu sizning kodingizda topilgan naqshlarni aniqlash va hisobot berishga yordam beradigan eng mashhur JavaScript/TypeScript linting vositasi. U yuqori darajada sozlanishi va qo‘llab-quvvatlaydi:

Maxsus qoidalar va konfiguratsiyalar
@typescript-eslint/parser orqali TypeScript-ni qo‘llab-quvvatlash
Ramkaga xos qoidalar uchun plagin ekotizimlari
Umumiy muammolarni avtomatik hal qilish

Set

npm install --save-dev eslint

Keng qamrovli ESLint konfiguratsiyasi

TypeScript qo‘llab-quvvatlanadigan Node.js loyihasi uchun to‘liqroq .eslintrc.json konfiguratsiyasi:

{
  "env": {
    "node": true,
    "es2021": true,
    "browser": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"],
    "indent": ["error", 2],
    "no-console": "warn",
    "no-unused-vars": "warn"
  }
}

Kengaytirilgan ESLint foydalanish

Asosiy lintingdan tashqari, ESLint kod sifatini saqlab qolish uchun kuchli xususiyatlarni taklif etadi:

Umumiy buyruqlar

# Lint all JavaScript/TypeScript files
npx eslint .

# Fix auto-fixable issues
npx eslint --fix .

# Lint specific file
npx eslint src/index.js

Chiroyli: kod formatlovchi

Prettier - bu sizning kodingizni tahlil qilish va uni o‘z qoidalari bilan qayta chop etish orqali izchil uslubni tatbiq etadigan fikrli kod formatlovchisidir. Qo‘llab-quvvatlaydi:

JavaScript, TypeScript, JSX, CSS, SCSS, JSON va boshqalar
Minimal konfiguratsiyaga ega bo‘lgan standart sozlamalar
ESLint va boshqa vositalar bilan integratsiya
Muharrir integratsiyasini qo‘llab-quvvatlash

Maslahat: Formatlash uchun Prettier-dan, potentsial xatolarni aniqlash va kod namunalarini kiritish uchun ESLint-dan foydalaning.

Set

npm install --save-dev --save-exact prettier

Keng qamrovli yanada chiroyli konfiguratsiya

Mana umumiy variantlarga ega yaxshi hujjatlashtirilgan .prettierrc konfiguratsiyasi:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

Kengaytirilgan Chiroyli foydalanish

Prettier turli yo‘llar bilan moslashtirilishi va ish oqimingizga birlashtirilishi mumkin:

Umumiy buyruqlar

# Format all files
npx prettier --write .

# Check formatting without making changes
npx prettier --check .

# Format specific file
npx prettier --write src/index.js

Uzluksiz ESLint + Chiroyli integratsiya

ESLint va Prettier o‘rtasidagi ziddiyatlarni oldini olish uchun to‘g‘ri integratsiyani o‘rnating:

Muhim: Qoidalarning ziddiyatini oldini olish uchun har doim ushbu paketlarni o‘rnating va sozlang:

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

Keyin ESLint konfiguratsiyasini yangilang:

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ]
}

Kengaytirilgan muharrir integratsiyasi

Professional maslahat: Maksimal samaradorlik uchun muharriringizni saqlash vaqtida kodni avtomatik tuzatish va formatlash uchun sozlang.

VS kodi: yakuniy sozlash

VS Code-da eng yaxshi ishlab chiqish tajribasi uchun quyidagi amallarni bajaring:

Install the following extensions:
- ESLint
- Chiroyli - kod formatlovchi
- VS kodi uchun EditorConfig
- Error Lens (xatolarni qatorning o‘zida ajratib ko‘rsatish uchun)
VS Code settings.json-ni sozlang:

ESLint va Prettier kengaytmalarini o‘rnating
Ushbu sozlamalarni VS Code settings.json ga qo‘shing:

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "prettier.requireConfig": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Boshqa tahrirlovchi sozlamalari

Boshqa mashhur muharrirlarni sozlash bo‘yicha ko‘rsatmalar:

WebStorm/IntelliJ: ESLint va Prettier uchun o‘rnatilgan yordam
Atom: linter-eslint va chiroyli atom paketlarini o‘rnating
Sublime Text: SublimeLinter va SublimeLinter-eslint-ni o‘rnating

Husky va lint-stage bilan Git Hooks

Kodingizni avtomatik formatlaydigan va lint qiladigan pre-commit hooklarini sozlab, noto‘g‘ri kod commit qilinishining oldini oling:

Nima uchun oldindan topshirilgan hook’lardan foydalanish kerak? Ular kod kiritilishidan oldin uslublar bilan bog‘liq muammolarni avtomatik ravishda tuzatib, jamoangiz bo‘ylab izchil kod sifatini ta’minlaydi.

Oldindan topshirilgan hook’lar bilan ishlashdan oldin kod sifatiga ishonch hosil qiling:

Set

npm install --save-dev husky lint-staged

Konfiguratsiya (package.json)

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,md,yml}": [
      "prettier --write"
    ]
  }
}

Ilg‘or eng yaxshi amaliyotlar

1. Monorepo sozlash

Monorepo tuzilmasidan foydalanadigan loyihalar uchun:

// In your root package.json
{
  "workspaces": ["packages/*"],
  "scripts": {
    "lint": "yarn workspaces run lint",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\""
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",
    "eslint": "^8.0.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "husky": "^7.0.4",
    "lint-staged": "^12.0.0",
    "prettier": "^2.5.0",
    "typescript": "^4.5.0"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,md,yml,yaml}": [
      "prettier --write"
    ]
  }
}

2. Unumdorlikni optimallashtirish

Katta loyihalar uchun ESLint unumdorlikni optimallashtirish:

// .eslintrc.js
module.exports = {
  cache: true, // Enable caching
  cacheLocation: '.eslintcache', // Cache file location
  ignorePatterns: ['**/node_modules/**', '**/dist/**'], // Ignore patterns
  parserOptions: {
    project: './tsconfig.json', // Only for TypeScript
    projectFolderIgnoreList: ['**/node_modules/**']
  }
};

3. O‘zaro muharrirlar izchilligi uchun EditorConfig

Turli muharrirlar va IDElarda izchil kodlash uslublarini saqlash uchun .editorconfig faylini qo‘shing:

# EditorConfig is awesome: https://EditorConfig.org
root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

[*.{json,yml}]
indent_style = space
indent_size = 2

[*.{cmd,sh}]
indent_style = tab

4. CI/CD integratsiyasi

CI/CD pipeline-iga linting va formatlash tekshiruvlarini qo‘shing:

# .github/workflows/ci.yml
name: CI

on: [push, pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '16'
      - run: npm ci
      - run: npm run lint
      - run: npm run format:check

Linting eng yaxshi amaliyotlari

Asosiy konfiguratsiyadan (masalan, eslint:recommended) boshlang va kerak bo‘lganda kengaytiring
Qoidalarning jiddiylik darajalarida (error, warn, off) izchil bo‘ling
Qoida istisnolarini kerak bo‘lganda izohlar bilan hujjatlashtiring
ESLint va plagin versiyalaringizni muntazam yangilang
TypeScript bilan ishlashda TypeScript-ga xos qoidalardan foydalaning

Formatlashning eng yaxshi amaliyotlari

Keep line lengths reasonable (80-120 characters)
Bir xil qo‘shtirnoq uslubidan foydalaning (birlik yoki qo‘sh qo‘shtirnoqlar)
Nuqtali verguldan foydalanishga mos keling
Tozaroq farqlar uchun obyektlar va massivlarda keyingi vergullardan foydalaning
Saqlashda formatlash uchun muharriringizni sozlang

Jamoa ish jarayoni

ESLint va Prettier konfiguratsiyalarini jamoa bo‘ylab baham ko‘ring
CI/CD payplar (pipes)iga linting va formatlashni qo‘shing
Muammolarni erta hal qilish uchun oldindan topshirilgan hook’lardan foydalaning
Kod uslubidagi qarorlaringizni hujjatlashtiring
Kod uslubi bo‘yicha qo‘llanmani muntazam ravishda ko‘rib chiqing va yangilang

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish