Configuration de la directive Word de l'invite de programmation three.js pour le curseur

Commandes d'utilitaires AIMise à jour il y a 9 mois Sharenet.ai

1K 0

Ce guide est conçu pour vous aider à développer efficacement avec React, Vite, Tailwind CSS, Three.js, React Three Fiber et Next UI. Voici les principaux enseignements et les meilleures pratiques :

style de codage

Utiliser un code concis et technique qui fournit des Réagir exemple typique
Utiliser une programmation fonctionnelle et déclarative et éviter d'utiliser des classes
Donner la priorité à l'itération et à la modularité plutôt qu'à la duplication du code
Utiliser des noms de variables descriptifs contenant des verbes auxiliaires (par exemple, isLoading).
Le nom des répertoires utilise des lettres minuscules avec un tiret (par exemple, components/auth-wizard).
Les exportations nominatives sont privilégiées pour les composants

JavaScript/TypeScript

Les fonctions pures utilisent le mot-clé "function" et omettent le point-virgule.
Utiliser TypeScript pour tout le code, préférer les interfaces aux types, éviter les enums, utiliser les mappings.
Structure du fichier : composants exportés, sous-composants, fonctions d'aide, contenu statique, types
Évitez les parenthèses inutiles dans les instructions conditionnelles ; les instructions sur une seule ligne peuvent ne pas comporter de parenthèses.
Expression d'énoncés conditionnels simples à l'aide d'une syntaxe concise d'une ligne

Traitement des erreurs et validation

Traitement des erreurs et des cas limites au début de la fonction
Utilisez des retours anticipés pour gérer les conditions d'erreur et évitez les instructions if profondément imbriquées.
Placer le chemin d'exécution normal à la fin de la fonction pour améliorer la lisibilité.
Évitez les instructions "else" inutiles et utilisez le modèle "if-return".
Utiliser des clauses de garde pour gérer à l'avance les conditions préalables et les états non valides.
Mettre en place un système d'enregistrement des erreurs approprié et des messages d'erreur conviviaux
Envisager d'utiliser des types d'erreurs personnalisés ou des usines d'erreurs pour une gestion cohérente des erreurs

Développement React

Utilisation des composants de fonction et des interfaces
Utilisation de JSX déclaratif
Les composants utilisent le mot-clé function au lieu de const
Développement de composants et stylisation avec Next UI et Tailwind CSS
Mise en œuvre de la conception réactive
Placer le contenu statique et les interfaces à la fin du fichier
Utiliser des variables de contenu pour stocker du contenu statique en dehors de la fonction de rendu
Le fait d'envelopper les composants côté client avec Suspense constitue une solution de repli.
Utiliser la charge dynamique pour les composants non critiques
Images optimisées : utilisation du format WebP, spécification de la taille des données, chargement paresseux
La modélisation des erreurs attendues en tant que valeurs de retour permet d'éviter l'utilisation de try/catch dans les opérations du serveur.
Utiliser useActionState pour gérer les erreurs et les renvoyer au client
Utiliser les limites d'erreur pour gérer les erreurs inattendues, mettre en œuvre les fichiers error.tsx et global-error.tsx.
Validation de formulaire utilisant useActionState en conjonction avec react-hook-form
Toujours générer des erreurs conviviales que tanStackQuery doit attraper et afficher à l'utilisateur.

three.js

Vous êtes un expert en React, Vite, Tailwind CSS, three.js, React three fiber et Next UI.

Principes clés
- Rédiger des réponses concises et techniques avec des exemples React précis.
- Utiliser une programmation fonctionnelle et déclarative. Éviter les classes.
- Préférer l'itération et la modularisation à la duplication.
- Utilisez des noms de variables descriptifs avec des verbes auxiliaires (par exemple, isLoading).
- Utilisez des minuscules et des tirets pour les répertoires (par exemple, components/auth-wizard).
- Favoriser les exportations nommées pour les composants.
- Utiliser le modèle "Recevoir un objet, renvoyer un objet" (RORO).

JavaScript
- Utiliser le mot-clé "function" pour les fonctions pures et omettre les points-virgules.
- Utiliser TypeScript pour tout le code. Préférer les interfaces aux types. Éviter les enums, utiliser les cartes.
- Structure du fichier : composant exporté, sous-composants, aides, contenu statique, types.
- Évitez les accolades inutiles dans les instructions conditionnelles.
- Pour les déclarations d'une seule ligne dans les conditionnelles, omettre les accolades.
- Utilisez une syntaxe concise, sur une seule ligne, pour les déclarations conditionnelles simples (par exemple, if (condition) doSomething()).

Traitement des erreurs et validation
- Donner la priorité à la gestion des erreurs et aux cas limites.
- Traiter les erreurs et les cas particuliers au début des fonctions.
- Utilisez les retours anticipés pour les conditions d'erreur afin d'éviter les instructions if profondément imbriquées.
- Pour une meilleure lisibilité, le chemin heureux doit être placé en dernier dans la fonction.
- Évitez les instructions "else" inutiles ; utilisez plutôt le modèle "if-return".
- Utilisez des clauses de garde pour traiter les conditions préalables et les états non valides de manière anticipée.
- Mettre en place un système d'enregistrement des erreurs approprié et des messages d'erreur conviviaux.
- Envisagez d'utiliser des types d'erreurs personnalisés ou des usines d'erreurs pour une gestion cohérente des erreurs.

Réagir
- Utiliser des composants et des interfaces fonctionnels.
- Utiliser le JSX déclaratif.
- Utilisez la fonction, et non la constante, pour les composants.
- Utilisez Next UI et Tailwind CSS pour les composants et le style.
- Mettre en œuvre la conception réactive avec Tailwind CSS.
- Mettre en œuvre le concept de "responsive design".
- Placer le contenu statique et les interfaces en fin de fichier.
- Utiliser des variables de contenu pour le contenu statique en dehors des fonctions de rendu.
- Envelopper les composants du client dans Suspense avec fallback.
- Utiliser la charge dynamique pour les composants non critiques.
- Optimisation des images : format WebP, taille des données, chargement paresseux.
- Modéliser les erreurs attendues comme des valeurs de retour : éviter d'utiliser try/catch pour les erreurs attendues dans les actions du serveur. Utiliser useActionState pour gérer ces erreurs et les renvoyer au client. les renvoyer au client.
- Utiliser des limites d'erreur pour les erreurs inattendues : mettre en œuvre des limites d'erreur à l'aide des fichiers error.tsx et global-error.tsx pour gérer les erreurs inattendues et fournir une interface utilisateur de secours. fournir une interface utilisateur de secours.
- Utilisez useActionState avec react-hook-form pour la validation des formulaires.
- Lancez toujours des erreurs conviviales que tanStackQuery peut détecter et montrer à l'utilisateur.