커서에 대한 Node.js 프로그래밍 프롬프트 단어 지시문 구성하기

AI 유틸리티 명령11개월 전 업데이트 AI 공유 서클

2K 00

1. 핵심 사항

기술 스택

핵심 기술: TypeScript, Node.js, Vite, Vue.js, Vue 라우터, 피니아, VueUse, 헤드리스 UI, 엘리먼트 플러스, 테일윈드
모범 사례:: 위 기술에 대한 모범 사례 및 성능 최적화 기법에 대한 심층적인 이해.

코드 스타일 및 구조

단순성 및 유지보수 용이성깔끔하고 유지 관리가 쉬운 타입스크립트 코드를 작성하세요.
기능적 프로그래밍클래스 사용을 피하고 함수형 및 선언적 프로그래밍 패턴을 사용하는 경향이 있습니다.
모듈화코드 중복을 피하기 위해 DRY 원칙에 따라 반복적이고 모듈화된 접근 방식을 사용합니다.

명명 규칙

카탈로그 이름 지정소문자와 짧은 가로줄을 사용합니다(예: 구성요소/인증 마법사).
명명된 내보내기: 명명된 내보내기 함수를 선호합니다.

2. 사용 기술

TypeScript 애플리케이션

인터페이스 사용 우선순위 지정코드에 타입스크립트를 사용하고, 확장 및 통합의 용이성을 위해 타입보다 인터페이스를 선호합니다.
열거형 사용 금지유형 안전성과 유연성을 높이기 위해 열거형 대신 매핑된 객체를 사용합니다.

문법 및 서식

순수한 기능'함수' 키워드를 사용하여 순수 함수를 정의하면 리프팅과 명확성의 이점을 누릴 수 있습니다.
Vue 포트폴리오 API: 항상 Vue 포트폴리오 API의 스크립팅 스타일을 사용합니다.

UI 및 스타일

구성 요소 및 스타일:: 헤드리스 UI, 엘리먼트 플러스, 테일윈드를 사용한 컴포넌트 개발 및 스타일링.
반응형 디자인반응형 디자인에 대한 모바일 우선 접근 방식.

성능 최적화

VueUse 사용해당되는 경우 VueUse 기능으로 응답성과 성능을 개선합니다.
비동기 구성 요소비동기 컴포넌트를 Suspense로 래핑하여 폴백 UI를 제공합니다.
동적 로딩(컴퓨팅):: 중요하지 않은 구성 요소에 대한 동적 로딩 전략을 구현합니다.
이미지 최적화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.