Configuración de la directiva Word de Node.js Programming Prompt para Cursor

Comandos de utilidad de AIActualizado hace 12 meses Círculo de intercambio de inteligencia artificial

10.4K 00

1. Puntos clave

pila tecnológica

tecnología centralTypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, Headless UI, Element Plus, Tailwind
buenas prácticas:: Conocimiento profundo de las mejores prácticas y técnicas de optimización del rendimiento para las tecnologías mencionadas.

Estilo y estructura del código

Simplicidad y facilidad de mantenimientoEscribir código TypeScript limpio y mantenible.
programación funcionalTienden a utilizar patrones de programación funcionales y declarativos, evitando el uso de clases.
modularizaciónUtiliza un enfoque iterativo y modular, siguiendo el principio DRY para evitar la duplicación de código.

convención de nomenclatura

Nombre del catálogo: Utilice letras minúsculas y líneas horizontales cortas (por ejemplo, components/auth-wizard).
Exportación con nombre: Da preferencia a las funciones de exportación con nombre.

2. Técnicas de utilización

Aplicaciones TypeScript

Priorizar el uso de interfacesUtiliza TypeScript en tu código, prefiriendo las interfaces a los tipos para facilitar la extensión y la consolidación.
Evitar el uso de enumeraciones: Utilice objetos mapeados en lugar de enumeraciones para una mayor seguridad de tipos y flexibilidad.

Gramática y formato

función pura: Defina funciones puras utilizando la palabra clave "function" para beneficiarse de la elevación y la claridad.
API de Vue Portfolio: Utiliza siempre el estilo de scripting de la API Vue Portfolio.

Interfaz de usuario y estilos

Componentes y estilos:: Desarrollo de componentes y estilización utilizando Headless UI, Element Plus y Tailwind.
diseño adaptableUn enfoque mobile-first del diseño responsivo.

optimización del rendimiento

Uso de VueUseMejora la reactividad y el rendimiento con funciones VueUse cuando proceda.
componente asíncronoEnvuelve componentes asíncronos con Suspense para proporcionar una interfaz de usuario alternativa.
carga dinámica (informática):: Implementar una estrategia de carga dinámica para componentes no críticos.
Optimización de imágenes: Utiliza el formato WebP, proporciona datos dimensionales e implementa lazy loading.
Optimización de edificiosImplementar estrategias optimizadas de división de código para generar paquetes más pequeños durante el proceso de compilación de Vite.

3. Resumen

Siguiendo estas pautas y consejos, podrá escribir código de alta calidad, optimizar el rendimiento de la aplicación y mejorar la experiencia del usuario. La práctica y aplicación continuas de estas técnicas son la clave para mejorar la eficiencia del desarrollo y la mantenibilidad del código.

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.