Сервис для доната
AI-подписки

Cursor для JavaScript / TypeScript 2026 — настройка под React, Vue, Next.js

Как настроить Cursor под JS/TS-проекты в 2026: TypeScript LSP, ESLint, Prettier, Composer для React/Vue/Next, .cursorrules для frontend.

12 минут чтения · Обновлено 28 мая 2026 · Автор: команда Blups

Если ты фронт или фуллстек на JS/TS — Cursor в 2026 это уже база. Но из коробки он работает «как VS Code с чатом», а вся магия включается только когда правильно настроишь TypeScript LSP, ESLint, Prettier и .cursorrules под свой стек. Ниже — как выжать максимум ☆

JavaScript/TypeScript — самый частый стек, под который пользователи берут Cursor. Tab-completion на JSX, Composer, который сам правит три файла сразу при добавлении эндпоинта, чат с контекстом всего monorepo. Но половина людей сидит на дефолтных настройках и не понимает, почему «у блогеров вау, а у меня обычный автокомплит».

Сейчас разрулим — пройдёмся по реальной настройке Cursor под JS/TS-проект в 2026 году.

💡 Если ты новичок в теме — сначала глянь главный гайд Как оплатить ChatGPT Plus из России в 2026 — рабочие способы, там разобраны все базовые способы и подводные камни.

TL;DR — что включить сразу ⚡

  • TypeScript LSP через typescript.tsdk в .vscode/settings.json — Cursor должен использовать версию TS из node_modules проекта, не свою.
  • ESLint + Prettier включаются как extensions из VS Code Marketplace, работают без танцев.
  • .cursorrules в корне проекта — главный файл для тонкой настройки Composer под твой стек (React/Vue/Next).
  • Composer Agent Mode — для рефакторингов и фич, спанящих несколько файлов.
  • Если оплата Cursor Pro застряла на «card declined» — оформи через Blups, мы не маркетплейс, делаем выдачу сами.

Сразу важное: мы не маркетплейс. В отличие от площадок, где десятки мелких продавцов под одной витриной — мы сами оформляем Cursor Pro на твой аккаунт и отвечаем за заказ лично ♡

Почему дефолтный Cursor для JS-проекта работает «нормально», но не отлично

Cursor — форк VS Code, и в стандартной поставке у него такой же TypeScript-сервер, как в свежем VS Code: 5.x, из встроенного node_modules редактора.

Проблема: у тебя в проекте может быть другая версия TS (например, 5.3 vs 5.6 в Cursor), и тогда:

  • Cursor видит ошибки, которых нет в проде.
  • Cursor НЕ видит ошибок, которые есть в проде (CI падает, локально зелено).
  • Composer пишет код под фичи новой версии TS, которых нет в твоём tsconfig.

Решение в две строки в .vscode/settings.json:

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

После этого Cursor спросит «использовать workspace-версию TS?» — соглашаешься, и дальше он работает с той же версией, что и твой CI.

ESLint и Prettier в Cursor

Тут хорошие новости: Cursor наследует marketplace VS Code, поэтому ESLint (от Microsoft) и Prettier ставятся как обычные extensions через Cmd+Shift+X → поиск → Install.

Базовый .vscode/settings.json для JS/TS-проекта:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}

Что это даёт:

  • На сохранении файла Prettier форматирует код.
  • ESLint автофиксит то, что можно автофиксить (unused imports, неправильные кавычки, missing semicolons).
  • Cursor видит ESLint-ошибки в реальном времени и учитывает их в Composer — это важно. Если в твоём проекте ESLint запрещает console.log, Composer не будет их вставлять.

.cursorrules — главный файл настройки под стек

Это самый недооценённый файл во всём Cursor. Если ты его не использовал — ты не использовал Cursor.

.cursorrules лежит в корне проекта (рядом с package.json), Cursor читает его автоматически при каждом запросе к AI. Туда пишешь инструкции, которые Composer/Chat должен всегда учитывать.

Пример .cursorrules для Next.js + TypeScript проекта

You are an expert in TypeScript, React 19, Next.js 15 (App Router), Tailwind CSS, and shadcn/ui.

Code style:
- Use TypeScript strict mode. No `any`. If type is unclear — use `unknown` and narrow.
- Functional components only. No class components.
- Server Components by default. Add 'use client' only when needed (state, effects, event handlers).
- Tailwind for styling. No CSS modules, no styled-components.
- Use shadcn/ui components from `@/components/ui` before writing custom ones.

File structure:
- Routes in `app/`, components in `components/`, utils in `lib/`.
- Co-locate types in the same file as the component, unless shared.

Conventions:
- Prefer Server Actions over API routes for mutations.
- Use Zod for input validation.
- Use `next/image` for images, never raw `<img>`.

Avoid:
- useEffect for data fetching (use Server Components or react-query).
- Inline styles.
- console.log in committed code.

После добавления такого файла Composer в этом проекте перестанет писать class Component extends React.Component, не будет добавлять useEffect(() => fetch(...)) для загрузки данных и не будет вставлять console.log. Это буквально меняет качество AI-генерации в 2-3 раза.

Пример .cursorrules для Vue 3 + Nuxt

You are an expert in Vue 3 (Composition API), Nuxt 3, TypeScript, and Pinia.

Code style:
- <script setup lang="ts"> only. No Options API.
- Use Pinia for state, not Vuex.
- TypeScript strict. Type all props with `defineProps<{}>()`.
- Use auto-imports from Nuxt — don't write `import { ref } from 'vue'`.

Conventions:
- Server routes in `server/api/`, with H3 event handlers.
- Use `useFetch`/`useAsyncData` for data, not raw `fetch`.
- Composables in `composables/`, named `use*.ts`.

Пример .cursorrules для React + Vite (SPA)

You are an expert in React 18, TypeScript, Vite, and TanStack Query.

Code style:
- Functional components with hooks.
- TypeScript strict. Type all props.
- TanStack Query for server state, Zustand for client state.
- Tailwind for styling.

Avoid:
- Redux (we migrated away).
- Class components.
- Default exports for components — use named exports.

Composer для multi-file задач в JS/TS

Composer (Cmd+I) — главная киллер-фича Cursor по сравнению с Copilot. Он умеет править несколько файлов одним запросом.

Типичные задачи, под которые Composer идеален в JS-стеке:

1. Добавить новую страницу/роут. «Сделай страницу /dashboard/settings с формой профиля: имя, email, аватар. Используй react-hook-form + zod, отправка через Server Action.» Composer создаст файл роута, форму, action, схему zod — всё за один проход.

2. Рефакторинг компонента. «Раздели UserCard.tsx на presentational <UserCardView> и контейнер <UserCardContainer> с логикой fetch.» Composer вытащит логику, создаст два файла, обновит импорты везде, где UserCard использовался.

3. Миграция API. «Перенеси все вызовы /api/users/* со старого fetch на TanStack Query с типами из types/api.ts.» Composer найдёт все вызовы, переделает на useQuery/useMutation, добавит invalidation.

Лайфхак: прежде чем запускать Composer, открой 2-3 файла-референса, которые ты хочешь, чтобы он использовал как шаблон. Cursor включит их в контекст автоматически, и AI будет копировать твой стиль, а не общий «как делают в интернете».

TypeScript-специфичные настройки

Несколько вещей, которые сильно бустят работу именно на TS:

Inlay hints включить. В .vscode/settings.json:

{
  "typescript.inlayHints.parameterNames.enabled": "all",
  "typescript.inlayHints.variableTypes.enabled": true,
  "typescript.inlayHints.functionLikeReturnTypes.enabled": true
}

Cursor показывает выведенные типы прямо в коде — Composer лучше понимает контекст, плюс ты сам видишь, что AI не натворил any тихо.

Strict mode в tsconfig. Если у тебя "strict": true — Cursor Composer пишет более аккуратный код, потому что иначе компилятор сразу же даёт по рукам. Если strict: false — AI начинает халтурить.

noUncheckedIndexedAccess: true — заставляет AI правильно работать с массивами и Record (всегда проверять undefined). Жёстко, но качество кода резко вырастает.

Частые ошибки настройки Cursor под JS/TS

1. Игнорируют .cursorrules

Самая частая. Люди ставят Cursor, юзают дефолтный чат и удивляются, что AI пишет «как Copilot». А все, кто реально выжимает максимум — держат .cursorrules под каждый проект и обновляют его, когда меняются конвенции команды.

2. Используют глобальный TypeScript вместо workspace

Cursor показывает ошибки, которых нет в CI, или наоборот. Решение — typescript.tsdk в settings (см. выше).

3. Запускают Composer на огромный проект без указания контекста

Composer не читает весь monorepo за раз — у моделей есть лимит контекста. Если ты в monorepo на 200 пакетов кидаешь «отрефактори всё под React 19», AI просто галлюцинирует. Указывай конкретные файлы через @filename в Composer или открывай нужные файлы в редакторе.

4. Игнорируют ESLint warnings

Composer видит ESLint-предупреждения через Language Server. Если у тебя весь код в красных подчёркиваниях — AI учится на этом и пишет такой же грязный код. Сначала почисти линт, потом начинай гонять Composer.

Сравнение Cursor vs GitHub Copilot для JS/TS-разраба в 2026

Параметр Cursor Pro GitHub Copilot
Цена $20/мес $19/мес
Multi-file edits ✅ Composer ⚠️ Workspace agent (слабее)
Качество автодополнения JSX Отличное Хорошее
Кастомные правила .cursorrules .github/copilot-instructions.md
Лучшие модели Claude Sonnet 4.5, GPT-5 GPT-5, Claude Sonnet 4.5
Скорость Чуть быстрее на Tab На уровне
IDE Отдельный (форк VS Code) Плагин для VS Code/JetBrains

Для JS/TS-разраба в 2026 Cursor выигрывает в основном за счёт Composer и .cursorrules. Если ты пишешь чисто компонент за компонентом — Copilot тоже норм. Если ты регулярно делаешь рефакторинги или фичи, спанящие 3-5 файлов — Cursor реально экономит часы.

FAQ

Можно ли использовать Cursor для монорепо (Turborepo, Nx)?

Да, прекрасно работает. Просто открой корень монорепы как workspace. `.cursorrules` лучше делать **общий** в корне и опционально дополнительные в подпакетах (Cursor читает оба). TypeScript paths из `tsconfig.json` Cursor подхватывает корректно.

Composer перезаписывает мои файлы — как откатить?

В Composer внизу справа есть кнопка «Reject all» — откатит изменения. Плюс всегда коммить в git перед запуском Composer на больших задачах — это базовая гигиена, AI может сделать что-то странное.

Какие модели выбирать для TypeScript-кода в 2026?

Для большинства задач Claude Sonnet 4.5 — лучший выбор на TS. Он аккуратно работает с типами, не галлюцинирует API. GPT-5 чуть лучше для сложного рефакторинга и больших Composer-сессий. Для быстрого Tab-completion подходит любая дефолтная модель Cursor.

Cursor умеет работать с Tailwind CSS и shadcn/ui?

Да, и очень хорошо. Если в `.cursorrules` указать «use Tailwind, prefer shadcn/ui» — Composer будет писать классы Tailwind, использовать уже установленные shadcn-компоненты вместо создания новых. Плюс есть отдельные Tailwind IntelliSense расширения, которые работают как в VS Code.

Как Cursor работает с Vue/Nuxt — нормально или плохо?

Нормально, но чуть хуже чем с React. У React больше тренировочных данных у моделей. Под Vue особенно важно прописывать в `.cursorrules` «Composition API only, `