Inkonsistenter Code kostet Teams täglich Stunden: Endless Code-Review-Kommentare über fehlende Semikolons, unterschiedliche Einrückung und vergessene console.log-Statements. Claude Code löst das Problem von Grund auf — es richtet das gesamte Linting- und Formatting-Stack automatisch ein und passt es an dein Projekt an.

In diesem Guide zeigen wir, wie Claude Code ESLint, Prettier, Husky und CI/CD-Integration in einem TypeScript-Projekt in Minuten konfiguriert — mit sauberen, produktionsreifen Konfigurationen.

1. ESLint Setup mit TypeScript-Support

ESLint TypeScript-ESLint: Der Standard 2026

Mit dem neuen Flat Config Format (eslint.config.js) und @typescript-eslint v8 ist die Konfiguration deutlich übersichtlicher geworden. Claude Code kennt beide Formate und migriert bei Bedarf automatisch.

Claude Code installiert alle nötigen Pakete mit einem einzigen Befehl:

# Claude Code Prompt → automatisch ausgeführt npm install --save-dev eslint @eslint/js typescript-eslint

Die generierte Flat-Config-Datei sieht so aus:

eslint.config.js import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.strictTypeChecked,
  {
    languageOptions: {
      parserOptions: {
        projectService: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
    rules: {
      'no-console': 'warn',
      '@typescript-eslint/no-unused-vars': 'error',
      '@typescript-eslint/explicit-function-return-type': 'warn',
    },
  },
);
Claude Code Tipp Sage einfach: "Richte ESLint mit strict TypeScript-Regeln für mein Next.js-Projekt ein" — Claude Code erkennt das Framework, installiert die passenden Plugins (eslint-plugin-react, eslint-config-next) und konfiguriert alles konfliktfrei.

2. Prettier Konfiguration und Integration

Prettier Opinionated Formatting — Zero Debate

Prettier beendet alle Diskussionen über Code-Style. Claude Code integriert Prettier so, dass ESLint und Prettier sich nicht in die Quere kommen — ein häufiges Problem bei manueller Konfiguration.

# Installation: Prettier + ESLint-Kompatibilitäts-Pakete npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
.prettierrc.json {
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100,
  "tabWidth": 2,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

Claude Code fügt eslint-config-prettier automatisch als letzten Eintrag in die ESLint-Config ein — so werden alle ESLint-Regeln, die Prettier-Formatierung betreffen, deaktiviert:

eslint.config.js (Prettier-Integration) import prettier from 'eslint-config-prettier';

export default tseslint.config(
  // ... andere Configs
  prettier, // MUSS als letztes stehen!
);

Package.json-Scripts werden ebenfalls automatisch ergänzt:

package.json (Scripts) "scripts": {
  "lint": "eslint src --ext .ts,.tsx",
  "lint:fix": "eslint src --ext .ts,.tsx --fix",
  "format": "prettier --write src/**/*.{ts,tsx,json,css}",
  "format:check": "prettier --check src/**/*.{ts,tsx,json,css}"
}

3. Husky + lint-staged: Pre-Commit Hooks

Husky Kein Commit ohne sauberen Code

Pre-Commit Hooks stellen sicher, dass nie unformatierter oder fehlerhafter Code in das Repository gelangt. Claude Code richtet Husky v10 und lint-staged in Kombination ein.

# Setup-Befehle — automatisch von Claude Code ausgeführt npm install --save-dev husky lint-staged
npx husky init
.husky/pre-commit #!/usr/bin/env sh
npx lint-staged
package.json (lint-staged Konfiguration) "lint-staged": {
  "*.{ts,tsx}": [
    "eslint --fix",
    "prettier --write"
  ],
  "*.{json,css,md}": [
    "prettier --write"
  ]
}
Warum lint-staged? Ohne lint-staged würde Husky das gesamte Projekt bei jedem Commit linten — bei großen Projekten dauert das Minuten. lint-staged prüft nur die tatsächlich veränderten Dateien (staged files) und hält den Commit-Prozess schnell.

Commit-Message Validierung mit commitlint

Claude Code kann optional auch commitlint einrichten, das Conventional Commits erzwingt:

.husky/commit-msg #!/usr/bin/env sh
npx --no commitlint --edit $1
commitlint.config.js export default {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [2, 'always', [
      'feat', 'fix', 'docs', 'style', 'refactor',
      'test', 'chore', 'perf'
    ]],
  },
};

4. VS Code Integration: Format on Save

Claude Code erstellt automatisch die VS Code Workspace-Einstellungen für alle Entwickler im Team:

.vscode/settings.json {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": ["javascript", "typescript", "typescriptreact"],
  "typescript.tsdk": "node_modules/typescript/lib",
  "files.eol": "\n"
}
.vscode/extensions.json {
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "bradlc.vscode-tailwindcss"
  ]
}

Wenn ein neues Teammitglied das Repository öffnet, schlägt VS Code automatisch die Installation der empfohlenen Extensions vor. Format on Save und ESLint-Auto-Fix sind sofort aktiv — ohne manuelle Konfiguration.

5. Custom ESLint Rules erstellen

Claude Code kann projektspezifische ESLint-Regeln generieren. Beispiel: Eine Regel die verhindert, dass sensible Daten in Logs ausgegeben werden.

eslint-rules/no-sensitive-log.js export default {
  meta: {
    type: 'problem',
    docs: { description: 'Verhindert das Loggen sensibler Felder' },
    schema: [{ type: 'object', properties: { fields: { type: 'array' } } }],
  },
  create(context) {
    const sensitiveFields = context.options[0]?.fields ?? [
      'password', 'token', 'secret', 'apiKey',
    ];
    return {
      CallExpression(node) {
        if (node.callee.object?.name === 'console') {
          node.arguments.forEach(arg => {
            if (arg.type === 'MemberExpression' &&
              sensitiveFields.includes(arg.property.name)) {
              context.report({ node, message: 'Sensibles Feld darf nicht geloggt werden!' });
            }
          });
        }
      },
    };
  },
};
Claude Code Prompt für Custom Rules "Erstelle eine ESLint-Regel die sicherstellt, dass alle async-Funktionen in API-Routes einen try-catch Block haben." — Claude Code generiert die vollständige Regel inklusive Unit-Tests mit RuleTester.

6. CI/CD Integration: ESLint in GitHub Actions

CI/CD Linting als Quality Gate

Claude Code generiert GitHub Actions Workflows die ESLint und Prettier als Pflicht-Checks vor dem Merge einrichten. Kein PR kann gemergt werden wenn Linting fehlschlägt.

.github/workflows/code-quality.yml name: Code Quality

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  lint:
    name: ESLint + Prettier Check
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '22', cache: 'npm' }
      - run: npm ci
      - name: ESLint
        run: npm run lint
      - name: Prettier Format Check
        run: npm run format:check
      - name: TypeScript Type Check
        run: npx tsc --noEmit

ESLint Ergebnisse als PR-Annotations

Mit dem reviewdog-Action werden ESLint-Fehler direkt als Kommentare in den Pull Request geschrieben:

.github/workflows/code-quality.yml (reviewdog)       - name: ESLint mit reviewdog
        uses: reviewdog/action-eslint@v1
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          reporter: github-pr-review
          eslint_flags: 'src --ext .ts,.tsx'

Caching für schnelle CI-Läufe

.github/workflows/code-quality.yml (Cache)       - name: ESLint Cache
        uses: actions/cache@v4
        with:
          path: .eslintcache
          key: ${{ runner.os }}-eslint-${{ hashFiles('eslint.config.js') }}

Fazit: Claude Code als Code-Quality-Autopilot

Was früher Stunden kostete — Recherche, Installation, Konfiguration, Debugging von Konflikten zwischen ESLint und Prettier — erledigt Claude Code in unter 5 Minuten. Und das Ergebnis ist nicht irgendeine generische Konfiguration, sondern eine auf dein Projekt, dein Framework und dein Team zugeschnittene Lösung.

Das Ergebnis: Kein Commit ohne sauberen Code. Kein Merge ohne grünes CI. Keine endlosen Code-Review-Diskussionen über Style-Fragen.

Claude Code 7-Tage Trial — kostenlos starten

Konfiguriere dein gesamtes Code-Quality-Stack in Minuten. ESLint, Prettier, Husky, CI/CD — Claude Code macht es fertig, während du weiterarbeitest.

Jetzt Trial starten →