Code Formatter

🎨 Code Formatter

Otomatik kod formatlama ve stil tutarlılığı rehberi.

📋 Prettier Yapılandırması

.prettierrc

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

Komutlar

# Format single file
npx prettier --write src/file.ts

# Format all files
npx prettier --write "src/**/*.{ts,tsx,js,jsx,json,css,md}"

# Check without writing
npx prettier --check "src/**/*"

🔧 ESLint Entegrasyonu

.eslintrc.js

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'prettier', // Prettier çakışmalarını devre dışı bırakır
  ],
  plugins: ['@typescript-eslint', 'react'],
  rules: {
    'no-console': 'warn',
    'no-unused-vars': 'error',
  },
};

Komutlar

# Lint
npx eslint src/

# Lint and fix
npx eslint src/ --fix

# Specific files
npx eslint "src/**/*.{ts,tsx}"

🔄 Git Hooks (Husky + lint-staged)

package.json

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

Setup

npx husky-init && npm install
npx husky add .husky/pre-commit "npx lint-staged"

📁 Ignore Files

.prettierignore

node_modules/
dist/
build/
.next/
coverage/
*.min.js

.eslintignore

node_modules/
dist/
build/
*.config.js

Code Formatter v1.1 - Enhanced

🔄 Workflow

Kaynak: Prettier Docs

Aşama 1: Installation

• Packages: prettier, eslint ve ilgili pluginleri kur.
• Config: .prettierrc ve .eslintrc dosyalarını kök dizine ekle.
• Ignore: .prettierignore dosyasına build/, dist/ ekle.

Aşama 2: Automation

• Scripts: package.json içine format ve lint scriptlerini ekle.
• VS Code: .vscode/settings.json ile "Format on Save" aç.
• Hooks: Husky ve lint-staged ile commit öncesi kontrol ekle.

Aşama 3: CI Integration

• Pipeline: CI sürecine npm run lint ve prettier --check adımlarını ekle.

Kontrol Noktaları