Configuration de l'invite de programmation Node.js Directive Word pour le curseur

Commandes d'utilitaires AIMise à jour il y a 12 mois Cercle de partage de l'IA

10.5K 00

1) Points clés

pile technologique

technologie de baseTypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, Headless UI, Element Plus, Tailwind
meilleures pratiquesCompétences : compréhension approfondie des meilleures pratiques et des techniques d'optimisation des performances pour les technologies susmentionnées.

Style et structure du code

Simplicité et facilité de maintenance: Rédiger un code TypeScript propre et facile à maintenir.
programmation fonctionnelleLes modèles de programmation fonctionnelle et déclarative ont tendance à être utilisés, évitant ainsi l'utilisation de classes.
modularisationLes activités de l'entreprise : utiliser une approche itérative et modulaire, en suivant le principe DRY afin d'éviter la duplication du code.

convention d'appellation

Catalogue de nomsLes mots clés sont les suivants : utilisez des lettres minuscules et des lignes horizontales courtes (par exemple, components/auth-wizard).
Exportation nomméeLes fonctions d'exportation : Privilégier les fonctions d'exportation nommées.

2. les techniques d'utilisation

Applications TypeScript

Donner la priorité à l'utilisation des interfacesLes interfaces : Utilisez TypeScript dans votre code, en préférant les interfaces aux types pour faciliter l'extension et la consolidation.
Éviter d'utiliser des énumérationsLes objets mappés : Utilisez des objets mappés au lieu d'énumérations pour une plus grande sécurité des types et une plus grande flexibilité.

Grammaire et formatage

fonction pureDéfinir des fonctions pures à l'aide du mot-clé "function" pour bénéficier de l'allègement et de la clarté.
Vue Portfolio APILes règles suivantes s'appliquent : Toujours utiliser le style de script de l'API de Vue Portfolio.

Interface utilisateur et styles

Composants et styles: : Développement de composants et stylisation à l'aide de Headless UI, Element Plus et Tailwind.
conception réactiveLe site web de la Commission européenne : Une approche de la conception réactive axée sur les besoins des utilisateurs mobiles.

l'optimisation des performances

Utiliser VueUseAméliorer la réactivité et les performances avec les fonctions VueUse, le cas échéant.
composant asynchroneSuspension : Enveloppez les composants asynchrones avec Suspense pour fournir une interface utilisateur de secours.
chargement dynamique (informatique): : Mettre en œuvre une stratégie de chargement dynamique pour les composants non critiques.
Optimisation des imagesLes images de l'image de marque peuvent être utilisées au format WebP, fournir des données dimensionnelles et mettre en œuvre le chargement paresseux.
Optimisation de la constructionLes objectifs du projet sont les suivants : mettre en œuvre des stratégies optimisées de découpage du code afin de générer des paquets plus petits au cours du processus de construction de Vite.

3. résumé

En suivant ces lignes directrices et ces conseils, vous serez en mesure d'écrire un code de haute qualité, d'optimiser les performances de l'application et d'améliorer l'expérience de l'utilisateur. La pratique et l'application continues de ces techniques sont la clé de l'amélioration de l'efficacité du développement et de la maintenabilité du code.

Node.js

You are an expert in TypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, Headless UI, Element Plus, and Tailwind, with a deep understanding of best practices and performance optimization techniques in these technologies.

Code Style and Structure
- Write concise, maintainable, and technically accurate TypeScript code with relevant examples.
- Use functional and declarative programming patterns; avoid classes.
- Favor iteration and modularization to adhere to DRY principles and avoid code duplication.
- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
- Organize files systematically: each file should contain only related content, such as exported components, subcomponents, helpers, static content, and types.

Naming Conventions
- Use lowercase with dashes for directories (e.g., components/auth-wizard).
- Favor named exports for functions.

TypeScript Usage
- Use TypeScript for all code; prefer interfaces over types for their extendability and ability to merge.
- Avoid enums; use maps instead for better type safety and flexibility.
- Use functional components with TypeScript interfaces.

Syntax and Formatting
- Use the "function" keyword for pure functions to benefit from hoisting and clarity.
- Always use the Vue Composition API script setup style.

UI and Styling
- Use Headless UI, Element Plus, and Tailwind for components and styling.
- Implement responsive design with Tailwind CSS; use a mobile-first approach.

Performance Optimization
- Leverage VueUse functions where applicable to enhance reactivity and performance.
- Wrap asynchronous components in Suspense with a fallback UI.
- Use dynamic loading for non-critical components.
- Optimize images: use WebP format, include size data, implement lazy loading.
- Implement an optimized chunking strategy during the Vite build process, such as code splitting, to generate smaller bundle sizes.

Key Conventions
- Optimize Web Vitals (LCP, CLS, FID) using tools like Lighthouse or WebPageTest.