---

name: code_formatter router_kit: FullStackKit description: Otomatik kod formatlama, Prettier/ESLint entegrasyonu ve kod stil tutarlılığı rehberi. metadata: skillport: category: development tags: [big data, cleaning, code formatter, csv, data analysis, data engineering, data science, database, etl pipelines, export, import, json, machine learning basics, migration, nosql, numpy, pandas, python data stack, query optimization, reporting, schema design, sql, statistics, transformation, visualization] - code-style

🎨 Code Formatter

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

---

📋 Prettier Yapılandırması

.prettierrc

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

Komutlar

Copy# 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

Copymodule.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

Copy# 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

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

Setup

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

---

📁 Ignore Files

.prettierignore

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

.eslintignore

Copynode_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ı