Beste Praktiken für .cursor/rules

.cursor/rules ist eine leistungsstarke Funktion, die Teams dabei hilft, einheitliche Codierungsstandards zu pflegen und die Zusammenarbeit zu verbessern. Dieser Leitfaden behandelt die besten Praktiken für die effektive Einrichtung und Verwaltung von Regeln.

.cursor/rules verstehen

.cursor/rules ist ein Konfigurationssystem, das:

• Projektweite Codierungsstandards definiert
• Codeorganisation automatisiert
• Einheitliche Muster durchsetzt
• Die Teamzusammenarbeit verbessert

Grundeinrichtung

Regeldatei erstellen

Erstellen Sie eine .cursor/rules Datei im Projektstamm:

mkdir .cursor
touch .cursor/rules

Grundstruktur

Eine typische Regeldateistruktur:

version: 1.0
rules:
  - name: "Komponentenstruktur"
    pattern: "src/components/**/*.{ts,tsx}"
    template: |
      import React from 'react'
      
      interface ${ComponentName}Props {
        // Props
      }
      
      export const ${ComponentName}: React.FC<${ComponentName}Props> = () => {
        return (
          <div>
            {/* Komponenteninhalt */}
          </div>
        )
      }

  - name: "Service-Schicht"
    pattern: "src/services/**/*.ts"
    template: |
      import { ApiClient } from '../utils/apiClient'
      
      export class ${ServiceName}Service {
        private client: ApiClient
        
        constructor() {
          this.client = new ApiClient()
        }
        
        // Service-Methoden
      }

Beste Praktiken

1. Einheitliche Namenskonventionen

Verwenden Sie klare, beschreibende Namen für Regeln:

rules:
  - name: "React-Komponente"
    description: "Standard React-Komponentenstruktur"
    pattern: "src/components/**/*.tsx"

  - name: "API-Service"
    description: "REST-API-Service-Vorlage"
    pattern: "src/services/**/*.ts"

2. Modulare Organisation

Gruppieren Sie verwandte Regeln:

rules:
  # Komponenten-Regeln
  - name: "Komponente/Funktional"
    pattern: "src/components/**/*.tsx"
    
  - name: "Komponente/Klasse"
    pattern: "src/components/**/*.class.tsx"
    
  # Service-Regeln
  - name: "Service/REST"
    pattern: "src/services/rest/**/*.ts"
    
  - name: "Service/GraphQL"
    pattern: "src/services/graphql/**/*.ts"

3. Vorlagenvariablen

Verwenden Sie beschreibende Vorlagenvariablen:

rules:
  - name: "Komponenten-Vorlage"
    pattern: "src/components/**/*.tsx"
    template: |
      interface ${ComponentName}Props {
        ${PropName}: ${PropType}
      }
      
      export const ${ComponentName} = ({
        ${PropName}
      }: ${ComponentName}Props) => {
        return (
          <div>
            {${PropName}}
          </div>
        )
      }

4. Dokumentation

Fügen Sie klare Dokumentation in Regeln ein:

rules:
  - name: "API-Service"
    description: |
      Vorlage für API-Service-Klassen.
      Enthält Standard-CRUD-Operationen und Fehlerbehandlung.
    pattern: "src/services/**/*.ts"
    template: |
      /**
       * ${ServiceName} Service
       * Verarbeitet ${ServiceDescription}
       */
      export class ${ServiceName}Service {
        // Implementierung
      }

5. Fehlerbehandlung

Fügen Sie Fehlerbehandlungsmuster ein:

rules:
  - name: "Service-Fehlerbehandlung"
    pattern: "src/services/**/*.ts"
    template: |
      try {
        // Service-Logik
      } catch (error) {
        if (error instanceof ApiError) {
          // API-Fehler behandeln
        } else {
          // Andere Fehler behandeln
        }
        throw error
      }

Fortgeschrittene Muster

1. Bedingte Vorlagen

Verwenden Sie Bedingungen in Vorlagen:

rules:
  - name: "Komponente mit Props"
    pattern: "src/components/**/*.tsx"
    template: |
      ${HasProps ? `
      interface ${ComponentName}Props {
        // Props
      }
      ` : ''}
      
      export const ${ComponentName}${HasProps ? ': React.FC<${ComponentName}Props>' : ''} = () => {
        // Implementierung
      }

2. Gemeinsame Muster

Definieren Sie wiederverwendbare Muster:

patterns:
  typescript-header: |
    /**
     * @file ${FileName}
     * @description ${FileDescription}
     * @created ${Date}
     */

rules:
  - name: "Komponente"
    pattern: "src/components/**/*.tsx"
    template: |
      ${patterns.typescript-header}
      // Komponenten-Implementierung

Optimierungstipps

1. Dateiorganisation

   • Verwandte Dateien gruppieren
   • Einheitliche Verzeichnisstrukturen verwenden
   • Namenskonventionen folgen

2. Vorlageneffizienz

   • Vorlagen fokussiert und spezifisch halten
   • Redundanten Code vermeiden
   • Gemeinsame Muster für häufige Elemente verwenden

3. Leistungsüberlegungen

   • Musterkomplexität begrenzen
   • Spezifische Dateimuster verwenden
   • Zu breite Übereinstimmungen vermeiden

Häufige Muster

React-Komponenten

rules:
  - name: "React-Funktionskomponente"
    pattern: "src/components/**/*.tsx"
    template: |
      import React from 'react'
      import styles from './${ComponentName}.module.css'
      
      export interface ${ComponentName}Props {
        // Props
      }

Zusammenfassung

Die effektive Nutzung von .cursor/rules kann die Codequalität und Teamproduktivität erheblich verbessern. Durch die Befolgung dieser besten Praktiken können Teams:

• Konsistenten Code pflegen
• Die Entwicklungsgeschwindigkeit erhöhen
• Die Codequalität verbessern
• Die Teamzusammenarbeit stärken