Meilleures pratiques pour .cursor/rules

.cursor/rules est une fonctionnalité puissante qui aide les équipes à maintenir des normes de codage cohérentes et à améliorer la collaboration. Ce guide couvre les meilleures pratiques pour configurer et gérer efficacement les règles.

Comprendre .cursor/rules

.cursor/rules est un système de configuration qui :

• Définit des normes de codage à l'échelle du projet
• Automatise l'organisation du code
• Applique des modèles cohérents
• Améliore la collaboration d'équipe

Configuration de base

Création du fichier de règles

Créez un fichier .cursor/rules dans la racine de votre projet :

mkdir .cursor
touch .cursor/rules

Structure de base

Une structure typique de fichier de règles :

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

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

Meilleures pratiques

1. Conventions de nommage cohérentes

Utilisez des noms clairs et descriptifs pour les règles :

rules:
  - name: "Composant React"
    description: "Structure standard de composant React"
    pattern: "src/components/**/*.tsx"

  - name: "Service API"
    description: "Modèle de service REST API"
    pattern: "src/services/**/*.ts"

2. Organisation modulaire

Regroupez les règles connexes :

rules:
  # Règles de composants
  - name: "Composant/Fonctionnel"
    pattern: "src/components/**/*.tsx"
    
  - name: "Composant/Classe"
    pattern: "src/components/**/*.class.tsx"
    
  # Règles de services
  - name: "Service/REST"
    pattern: "src/services/rest/**/*.ts"
    
  - name: "Service/GraphQL"
    pattern: "src/services/graphql/**/*.ts"

3. Variables de modèle

Utilisez des variables de modèle descriptives :

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

4. Documentation

Incluez une documentation claire dans les règles :

rules:
  - name: "Service API"
    description: |
      Modèle pour les classes de service API.
      Inclut les opérations CRUD standard et la gestion des erreurs.
    pattern: "src/services/**/*.ts"
    template: |
      /**
       * Service ${ServiceName}
       * Gère ${ServiceDescription}
       */
      export class ${ServiceName}Service {
        // implémentation
      }

5. Gestion des erreurs

Incluez des modèles de gestion des erreurs :

rules:
  - name: "Gestion des erreurs de service"
    pattern: "src/services/**/*.ts"
    template: |
      try {
        // logique de service
      } catch (error) {
        if (error instanceof ApiError) {
          // gérer les erreurs API
        } else {
          // gérer les autres erreurs
        }
        throw error
      }

Modèles avancés

1. Modèles conditionnels

Utilisez des conditions dans les modèles :

rules:
  - name: "Composant avec Props"
    pattern: "src/components/**/*.tsx"
    template: |
      ${HasProps ? `
      interface ${ComponentName}Props {
        // props
      }
      ` : ''}
      
      export const ${ComponentName}${HasProps ? ': React.FC<${ComponentName}Props>' : ''} = () => {
        // implémentation
      }

2. Modèles partagés

Définissez des modèles réutilisables :

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

rules:
  - name: "Composant"
    pattern: "src/components/**/*.tsx"
    template: |
      ${patterns.typescript-header}
      // implémentation du composant

Conseils d'optimisation

1. Organisation des fichiers

   • Regroupez les fichiers connexes
   • Utilisez des structures de répertoires cohérentes
   • Suivez les conventions de nommage

2. Efficacité des modèles

   • Gardez les modèles ciblés et spécifiques
   • Évitez le code redondant
   • Utilisez des modèles partagés pour les éléments communs

3. Considérations de performance

   • Limitez la complexité des modèles
   • Utilisez des modèles de fichiers spécifiques
   • Évitez les correspondances trop larges

Modèles courants

Composants React

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

Conclusion

L'utilisation efficace de .cursor/rules peut grandement améliorer la qualité du code et la productivité de l'équipe. En suivant ces meilleures pratiques, les équipes peuvent :

• Maintenir un code cohérent
• Augmenter la vitesse de développement
• Améliorer la qualité du code
• Renforcer la collaboration d'équipe