ESLint ve Prettier: Kod Kalitesi Yapılandırması

ESLint ve Prettier: Kod Kalitesi Yapılandırması

Tutarlı ve kaliteli kod yazmak, bireysel ve takım projelerinin başarısı için kritik öneme sahiptir. ESLint kodunuzdaki potansiyel hataları ve kötü pratikleri tespit ederken, Prettier kod formatlama standardını otomatik olarak uygular. Bu iki aracı birlikte yapılandırdığınızda, kod kalitesi ve okunabilirlik konusunda güçlü bir güvence elde edersiniz. Bu rehberde ESLint ve Prettier'ı sıfırdan kurup, modern bir JavaScript/TypeScript projesinde nasıl yapılandıracağınızı adım adım gösteriyoruz.

ESLint ve Prettier Farkı

Bu iki aracı karıştırmak yaygın bir hatadır. Her birinin ayrı sorumluluk alanı vardır:

Adım 1: ESLint Kurulumu

Modern bir Next.js/React projesinde ESLint'i flat config formatıyla kuralım:

# ESLint ve gerekli paketleri yükleyin
npm install -D eslint @eslint/js typescript-eslint eslint-plugin-react eslint-plugin-react-hooks

# Next.js projelerinde (yerleşik ESLint desteği)
npm install -D @next/eslint-plugin-next

// eslint.config.mjs (Flat Config - ESLint v9+)
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import reactPlugin from 'eslint-plugin-react';
import reactHooksPlugin from 'eslint-plugin-react-hooks';

export default tseslint.config(
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    files: ['**/*.{ts,tsx}'],
    plugins: {
      react: reactPlugin,
      'react-hooks': reactHooksPlugin,
    },
    rules: {
      // TypeScript kuralları
      '@typescript-eslint/no-unused-vars': ['error', {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_',
      }],
      '@typescript-eslint/no-explicit-any': 'warn',
      '@typescript-eslint/consistent-type-imports': 'error',

      // React kuralları
      'react/react-in-jsx-scope': 'off',
      'react/prop-types': 'off',
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'warn',

      // Genel kurallar
      'no-console': ['warn', { allow: ['warn', 'error'] }],
      'prefer-const': 'error',
      'no-var': 'error',
    },
    settings: {
      react: {
        version: 'detect',
      },
    },
  },
  {
    ignores: [
      'node_modules/',
      '.next/',
      'dist/',
      'build/',
      'coverage/',
    ],
  }
);

Adım 2: Prettier Kurulumu

# Prettier ve ESLint entegrasyonu
npm install -D prettier eslint-config-prettier eslint-plugin-prettier

// .prettierrc.json
{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf",
  "jsxSingleQuote": false,
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindFunctions": ["clsx", "cn", "cva"]
}

// .prettierignore
node_modules
.next
dist
build
coverage
pnpm-lock.yaml
package-lock.json

Adım 3: ESLint ve Prettier Entegrasyonu

ESLint ve Prettier'ın çakışmadan birlikte çalışmasını sağlayın:

// eslint.config.mjs - Prettier entegrasyonu eklenmiş hali
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import prettierConfig from 'eslint-config-prettier';
import prettierPlugin from 'eslint-plugin-prettier';

export default tseslint.config(
  js.configs.recommended,
  ...tseslint.configs.recommended,
  prettierConfig, // Prettier ile çakışan ESLint kurallarını devre dışı bırakır
  {
    plugins: {
      prettier: prettierPlugin,
    },
    rules: {
      'prettier/prettier': 'error', // Prettier ihlallerini ESLint hatası olarak gösterir
      // ... diğer kurallar
    },
  }
);

Adım 4: Script'ler ve package.json Yapılandırması

// package.json
{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "type-check": "tsc --noEmit",
    "validate": "npm run type-check && npm run lint && npm run format:check"
  }
}

Adım 5: Git Hooks ile Otomatik Kontrol

Commit öncesi otomatik lint ve format kontrolü için husky ve lint-staged kullanın:

# Husky ve lint-staged kurulumu
npm install -D husky lint-staged

# Husky'yi başlat
npx husky init

# Pre-commit hook'u düzenle
echo "npx lint-staged" > .husky/pre-commit

// package.json - lint-staged yapılandırması
{
  "lint-staged": {
    "*.{ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,md,yml,yaml}": [
      "prettier --write"
    ],
    "*.css": [
      "prettier --write"
    ]
  }
}

VS Code Entegrasyonu

VS Code'da kaydetme sırasında otomatik düzeltme için workspace ayarları:

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

// .vscode/extensions.json - Önerilen extension'lar
{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "bradlc.vscode-tailwindcss"
  ]
}

Yaygın Sorunlar ve Çözümleri

• ESLint ve Prettier çakışması: eslint-config-prettier yüklü olduğundan ve config'in en sona eklendiğinden emin olun
• "Parsing error" hataları: TypeScript parser'ının doğru yapılandırıldığını kontrol edin
• Performans sorunları: .eslintignore ve .prettierignore ile gereksiz dosyaları hariç tutun
• EndOfLine hataları: Git'te core.autocrlf = input ayarı yapın ve Prettier'da "endOfLine": "lf" kullanın

Sonuç

ESLint ve Prettier birlikte kullanıldığında, kod kalitesi ve tutarlılık konusunda güçlü bir güvence sağlar. ESLint mantıksal hataları yakalarken, Prettier formatlama tutarlılığını garanti eder. Git hooks ile commit öncesi otomatik kontrol, VS Code entegrasyonu ile anlık geri bildirim ve CI pipeline'ında son doğrulama katmanıyla eksiksiz bir kod kalitesi sistemi oluşturabilirsiniz.

Kaynaklar

• ESLint Resmi Dokümantasyonu
• Prettier Resmi Dokümantasyonu
• typescript-eslint Dokümantasyonu
• Husky Dokümantasyonu