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

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

2K 00

1. 关键要点

pile technologique

核心技术: TypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, Headless UI, Element Plus, Tailwind
meilleures pratiques: 深入理解上述技术的最佳实践和性能优化技巧。

Style et structure du code

简洁与可维护性: 编写简洁并具可维护性的 TypeScript 代码。
programmation fonctionnelle: 倾向使用函数式和声明式编程模式，避免类的使用。
modularisation: 采用迭代和模块化的方式，遵循 DRY 原则，避免代码重复。

convention d'appellation

目录命名: 使用小写字母和短横线（例如：components/auth-wizard）。
命名导出: 优先使用命名导出函数。

2. 使用技巧

TypeScript 应用

优先使用接口: 在代码中使用 TypeScript，优先选择接口而非类型，以便于扩展和合并。
避免使用枚举: 使用映射对象替代枚举，以提高类型安全性和灵活性。

语法与格式

纯函数: 使用 "function" 关键字定义纯函数，以受益于提升和清晰度。
Vue 组合 API: 始终使用 Vue 组合 API 的脚本设置风格。

UI 与样式

组件与样式: 使用 Headless UI、Element Plus 和 Tailwind 进行组件开发和样式设计。
conception réactive: 采用移动优先的方式实现响应式设计。

l'optimisation des performances

利用 VueUse: 在适用的地方利用 VueUse 函数增强反应性和性能。
异步组件: 使用 Suspense 包裹异步组件，提供后备 UI。
动态加载: 对非关键组件实施动态加载策略。
Optimisation des images: 使用 WebP 格式，提供尺寸数据并实施懒加载。
构建优化: 在 Vite 构建过程中，实现优化的代码分割策略，以生成更小的包。

3. 总结

通过遵循以上指导原则和技巧，您将能够撰写高质量的代码，优化应用性能，并提升用户体验。不断实践和应用这些技巧是提高开发效率和代码可维护性的关键。

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.