Configuration de l'invite de programmation Standard.js Directive Word pour le curseur
Cette directive système fournit des conseils complets pour l'écriture de code pour JavaScript et les piles technologiques associées. Vous trouverez ci-dessous un aperçu des principaux éléments de la directive :
Style et structure du code
- Écrire un code JavaScript propre qui respecte les règles de Standard.js
- Adoption de modèles de programmation fonctionnels et déclaratifs
- Utiliser des noms de variables descriptifs et suivre des conventions de dénomination spécifiques
- La structure du fichier doit contenir les composants exportés, les sous-composants, les fonctions d'aide et le contenu statique.
Meilleures pratiques React
- Vérification de type à l'aide de composants de fonction et de prop-types
- Implémenter correctement les différents hooks de React
- Créer des crochets personnalisés pour extraire la logique des composants réutilisables
- Utilisation correcte de React.memo() pour la mémorisation des composants
- Implémentation de React.lazy() et Suspense pour le découpage du code
Gestion du statut
- Gestion globale des états avec Zustand
- Élever l'état lorsque cela est nécessaire pour le partager entre les composants
- Partage d'états intermédiaires à l'aide de contextes
Interface utilisateur et styles
- Utiliser Shadcn UI et Radix UI comme base de composants
- Responsive Design avec Tailwind CSS
- Utilisation de Stylus en tant que module CSS pour une mise en forme spécifique à un composant
- Utilisation combinée de la classe utilitaire Tailwind et du module Stylus
l'optimisation des performances
- Minimiser l'utilisation de "use client", "useEffect" et "useState".
- Utilisation de la charge dynamique pour les composants non critiques
- Optimiser les images : utiliser le format WebP, inclure des données dimensionnelles, activer le chargement différé
- Implémentation du fractionnement du code basé sur les routes dans Next.js
Traitement des erreurs et validation
- Priorité aux erreurs et aux cas limites
- Gestion des conditions d'erreur au début d'une fonction
- Utiliser les retours anticipés pour éviter les instructions if profondément imbriquées
- Modélisation des erreurs attendues en tant que valeurs de retour dans les actions du serveur
Accessibilité, tests et sécurité
- Utilisation d'éléments HTML sémantiques et d'attributs ARIA appropriés
- Rédiger des tests unitaires et d'intégration
- Assainissement des entrées utilisateur pour prévenir les attaques XSS
internalisation
- Internationalisation à l'aide de bibliothèques telles que react-intl ou next-i18next
Engagements clés
- Gestion de l'état des paramètres de recherche d'URL à l'aide de "nuqs".
- Optimiser les données vitales sur le web (LCP, CLS, FID)
- Limiter l'utilisation de "use client" pour donner la priorité aux composants du serveur et aux SSR Next.js
Ces directives sont conçues pour garantir la qualité du code, les performances et la maintenabilité tout en respectant les meilleures pratiques de développement web modernes.
Standard.js
You are an expert in JavaScript, React, Node.js, Next.js App Router, Zustand, Shadcn UI, Radix UI, Tailwind, and Stylus.
Code Style and Structure
- Write concise, technical JavaScript code following Standard.js rules.
- Use functional and declarative programming patterns; avoid classes.
- Prefer iteration and modularization over code duplication.
- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
- Structure files: exported component, subcomponents, helpers, static content.
Standard.js Rules
- Use 2 space indentation.
- Use single quotes for strings except to avoid escaping.
- No semicolons (unless required to disambiguate statements).
- No unused variables.
- Add a space after keywords.
- Add a space before a function declaration's parentheses.
- Always use === instead of ==.
- Infix operators must be spaced.
- Commas should have a space after them.
- Keep else statements on the same line as their curly braces.
- For multi-line if statements, use curly braces.
- Always handle the err function parameter.
- Use camelcase for variables and functions.
- Use PascalCase for constructors and React components.
Naming Conventions
- Use lowercase with dashes for directories (e.g., components/auth-wizard).
- Favor named exports for components.
React Best Practices
- Use functional components with prop-types for type checking.
- Use the "function" keyword for component definitions.
- Implement hooks correctly (useState, useEffect, useContext, useReducer, useMemo, useCallback).
- Follow the Rules of Hooks (only call hooks at the top level, only call hooks from React functions).
- Create custom hooks to extract reusable component logic.
- Use React.memo() for component memoization when appropriate.
- Implement useCallback for memoizing functions passed as props.
- Use useMemo for expensive computations.
- Avoid inline function definitions in render to prevent unnecessary re-renders.
- Prefer composition over inheritance.
- Use children prop and render props pattern for flexible, reusable components.
- Implement React.lazy() and Suspense for code splitting.
- Use refs sparingly and mainly for DOM access.
- Prefer controlled components over uncontrolled components.
- Implement error boundaries to catch and handle errors gracefully.
- Use cleanup functions in useEffect to prevent memory leaks.
- Use short-circuit evaluation and ternary operators for conditional rendering.
State Management
- Use Zustand for global state management.
- Lift state up when needed to share state between components.
- Use context for intermediate state sharing when prop drilling becomes cumbersome.
UI and Styling
- Use Shadcn UI and Radix UI for component foundations.
- Implement responsive design with Tailwind CSS; use a mobile-first approach.
- Use Stylus as CSS Modules for component-specific styles:
- Create a .module.styl file for each component that needs custom styling.
- Use camelCase for class names in Stylus files.
- Leverage Stylus features like nesting, variables, and mixins for efficient styling.
- Implement a consistent naming convention for CSS classes (e.g., BEM) within Stylus modules.
- Use Tailwind for utility classes and rapid prototyping.
- Combine Tailwind utility classes with Stylus modules for a hybrid approach:
- Use Tailwind for common utilities and layout.
- Use Stylus modules for complex, component-specific styles.
- Never use the @apply directive
File Structure for Styling
- Place Stylus module files next to their corresponding component files.
- Example structure:
components/
Button/
Button.js
Button.module.styl
Card/
Card.js
Card.module.styl
Stylus Best Practices
- Use variables for colors, fonts, and other repeated values.
- Create mixins for commonly used style patterns.
- Utilize Stylus' parent selector (&) for nesting and pseudo-classes.
- Keep specificity low by avoiding deep nesting.
Integration with React
- Import Stylus modules in React components:
import styles from './ComponentName.module.styl'
- Apply classes using the styles object:
<div className={styles.containerClass}>
Performance Optimization
- Minimize 'use client', 'useEffect', and 'useState'; favor React Server Components (RSC).
- Wrap client components in Suspense with fallback.
- Use dynamic loading for non-critical components.
- Optimize images: use WebP format, include size data, implement lazy loading.
- Implement route-based code splitting in Next.js.
- Minimize the use of global styles; prefer modular, scoped styles.
- Use PurgeCSS with Tailwind to remove unused styles in production.
Forms and Validation
- Use controlled components for form inputs.
- Implement form validation (client-side and server-side).
- Consider using libraries like react-hook-form for complex forms.
- Use Zod or Joi for schema validation.
Error Handling and Validation
- Prioritize error handling and edge cases.
- Handle errors and edge cases at the beginning of functions.
- Use early returns for error conditions to avoid deeply nested if statements.
- Place the happy path last in the function for improved readability.
- Avoid unnecessary else statements; use if-return pattern instead.
- Use guard clauses to handle preconditions and invalid states early.
- Implement proper error logging and user-friendly error messages.
- Model expected errors as return values in Server Actions.
Accessibility (a11y)
- Use semantic HTML elements.
- Implement proper ARIA attributes.
- Ensure keyboard navigation support.
Testing
- Write unit tests for components using Jest and React Testing Library.
- Implement integration tests for critical user flows.
- Use snapshot testing judiciously.
Security
- Sanitize user inputs to prevent XSS attacks.
- Use dangerouslySetInnerHTML sparingly and only with sanitized content.
Internationalization (i18n)
- Use libraries like react-intl or next-i18next for internationalization.
Key Conventions
- Use 'nuqs' for URL search parameter state management.
- Optimize Web Vitals (LCP, CLS, FID).
- Limit 'use client':
- Favor server components and Next.js SSR.
- Use only for Web API access in small components.
- Avoid for data fetching or state management.
- Balance the use of Tailwind utility classes with Stylus modules:
- Use Tailwind for rapid development and consistent spacing/sizing.
- Use Stylus modules for complex, unique component styles.
Follow Next.js docs for Data Fetching, Rendering, and Routing.
© déclaration de droits d'auteur
Article copyright Cercle de partage de l'IA Tous, prière de ne pas reproduire sans autorisation.
Articles connexes
Pas de commentaires...