Cursor에서의 JavaScript와 TypeScript 개발에 오신 걸 환영해! 이 에디터는 확장 생태계를 통해 JS/TS 개발을 탁월하게 지원해. Cursor를 최대한 활용하려면 아래 내용을 확인해.

​
필수 확장 프로그램

Cursor는 네가 선호하는 어떤 확장 프로그램과도 잘 작동하지만, 처음 시작한다면 아래 확장 프로그램을 추천해:
  • ESLint - Cursor의 AI 기반 린트 자동 수정 기능에 필수
  • JavaScript and TypeScript Language Features - 강화된 언어 지원과 IntelliSense
  • Path Intellisense - 파일 경로 자동 완성

​
Cursor 기능

Cursor는 기존 JavaScript/TypeScript 워크플로를 다음으로 강화해줘:
  • 탭 자동완성: 프로젝트 구조를 이해하는 컨텍스트 기반 코드 제안
  • 자동 임포트: 사용하자마자 라이브러리를 자동으로 import해줘
  • 인라인 편집: 어떤 줄에서든 CMD+K로 문법에 맞게 깔끔하게 편집
  • Composer 가이드: Composer로 여러 파일에 걸쳐 코드를 계획하고 편집해봐

​
@Docs로 프레임워크 인텔리전스

Cursor의 @Docs 기능은 AI가 참고할 수 있는 커스텀 문서 소스를 추가해서 JavaScript 개발을 한층 강화해줘. MDN, Node.js, 또는 네가 좋아하는 프레임워크 문서를 추가해서 더 정확하고 문맥에 맞는 코드 제안을 받아봐.

@Docs에 대해 더 알아보기

Cursor에서 커스텀 문서 소스를 추가하고 관리하는 방법을 알아봐.

​
자동 린트 해결

Cursor의 돋보이는 기능 중 하나는 linter 확장과의 매끄러운 통합이야. ESLint 같은 linter를 설정하고, ‘Iterate on Lints’ 설정을 활성화해줘. 그리고 Composer에서 Agent 모드를 사용할 때, AI가 네 질문에 답하려고 시도하고 코드 변경을 수행하면, linter 출력을 자동으로 읽고 미처 알지 못했을 수도 있는 lint 오류를 고치려고 시도할 거야.

​
프레임워크 지원

Cursor는 다음과 같은 주요 JavaScript 프레임워크와 라이브러리와 매끄럽게 동작해:

​
React & Next.js

  • 지능형 컴포넌트 제안을 갖춘 완전한 JSX/TSX 지원
  • Next.js의 서버 컴포넌트와 API 라우트에 대한 인텔리전스
  • 추천: React Developer Tools 확장

​
Vue.js

  • Volar 통합을 통한 템플릿 문법 지원
  • 컴포넌트 자동 완성과 타입 검사
  • 추천: Vue Language Features

​
Angular

  • 템플릿 검증 및 TypeScript 데코레이터 지원
  • 컴포넌트와 서비스 생성
  • 추천: Angular Language Service

​
Svelte

  • 컴포넌트 문법 하이라이팅과 지능형 자동 완성
  • 반응형 구문과 스토어 제안
  • 추천: Svelte for VS Code

​
백엔드 프레임워크 (Express/NestJS)

  • 라우트와 미들웨어 인텔리전스
  • NestJS용 TypeScript 데코레이터 지원
  • API 테스트 도구 통합
기억해, Cursor의 AI 기능은 위 모든 프레임워크에서 잘 작동하고, 각 프레임워크의 패턴과 모범 사례를 이해해 관련성 높은 제안을 제공해. AI는 컴포넌트 생성부터 복잡한 리팩터링까지 네 작업을 돕는 동시에, 프로젝트에 이미 있는 패턴을 존중해.