🎨 Code Formatter

← Back to skills

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

Category: Development Tools
Repo: vuralserhat86-antigravity-agentic-skills
Path: skills/code_formatter/SKILL.md
Updated: 1/3/2026, 12:20:04 PM

AI Summary

> Otomatik kod formatlama ve stil tutarlılığı rehberi. It is useful for IDE workflows, linting and formatting, debugging, code review, and developer productivity. Source: vuralserhat86-antigravity-agentic-skills (skills/code_formatter/SKILL.md).

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

AşamaDoğrulama
1npm run format çalışınca dosyalar değişiyor mu?
2Hatalı bir kod commit edilmeye çalışıldığında Husky engelliyor mu?
3CI pipeline format hatası olduğunda fail ediyor mu?

Related skills