DEV Community

Jovan Chan
Jovan Chan

Posted on • Originally published at aicoderscope.com

Best Cursor Settings for TypeScript and React in 2026

#cursor #typescript #react #setupguide

This article was originally published on aicoderscope.com

Most Cursor tutorials for TypeScript developers start and end at "ask the AI to write a component." They skip the configuration layer that determines whether those components land in the right style, with the right types, following the right patterns. Unconfigured, Cursor will generate code that compiles but violates your conventions on every other line: default exports when you use named, class components when your codebase is all hooks, any where you'd never allow it.

The gap between out-of-box Cursor and properly configured Cursor for TypeScript/React is about 45 minutes of setup and a permanent shift in suggestion quality. What actually moves the needle: TypeScript version selection, ESLint integration with Cursor's "Iterate on Lints" feature, Project Rules for consistent AI output, and the @docs setup that makes the AI aware of your exact stack. Pricing claims verified against Cursor's pricing page on May 9, 2026.

If you're still evaluating whether Cursor is worth $20/month Pro, read the Cursor IDE Review 2026 first. This guide assumes you've already committed to using it.

The TypeScript version problem (fix this first)

Cursor ships with a bundled version of TypeScript for its internal language server. If your project uses a different TypeScript version — which it almost certainly does — the type-checking Cursor shows you and the type-checking your build system runs will diverge. You'll see different errors in the editor than in CI.

Fix it in one step: open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P), run TypeScript: Select TypeScript Version, and choose Use Workspace Version. This tells Cursor's language server to use the TypeScript compiler from your node_modules/typescript instead of its own bundled copy.

If "Use Workspace Version" doesn't appear: your project doesn't have TypeScript installed as a local dependency. Run npm install -D typescript (or pnpm add -D typescript, bun add -d typescript), then try again.

This single change aligns editor errors with build errors. For teams, commit a .vscode/settings.json that enforces this:

{
  "typescript.tsdk": "node_modules/typescript/lib"
}
Enter fullscreen mode Exit fullscreen mode

The tsdk path tells Cursor explicitly where to find the workspace TypeScript. Check this file into version control — every developer on the project gets consistent type-checking without the manual step.

tsconfig.json: what strict actually means for Cursor

Cursor's AI reads your tsconfig.json to understand your project's type rules. When strict is disabled, the AI generates looser code — optional chaining where it isn't needed, implicit any in callbacks, undisciplined null handling. When strict is on, the suggestions tighten noticeably.

A tsconfig.json that gives Cursor the right context for a modern React project:

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}
Enter fullscreen mode Exit fullscreen mode

Two flags worth singling out:

noUncheckedIndexedAccess: true — makes array and object index access return T | undefined instead of T. This alone eliminates a large class of runtime crashes where code assumes an array element exists. It's the most common strict flag that teams skip and then regret.

jsx: "react-jsx" — uses the automatic JSX transform. With this, you don't need import React from 'react' at the top of every file. If the AI still generates that import, add a rule (covered below) to stop it.

The paths block with @/* is worth adding even if you don't use it immediately. Once configured here, Cursor's path alias resolution works correctly. Without it, @/components/Button generates import errors that the AI will then try to "fix" by converting back to relative paths.

Extensions: the three you actually need

Cursor's extension marketplace (Open VSX) has everything VS Code does for TypeScript/React. Three extensions make a real difference; the rest are optional or actively harmful.

1. ESLint (dbaeumer.vscode-eslint) — required if you want Cursor's "Iterate on Lints" feature to work. This is the most impactful configuration decision for React development (more on this in the next section). Without this extension, the AI can't see ESLint errors and won't self-correct violated hooks rules, import ordering, or accessibility issues.

2. Prettier (esbenp.prettier-vscode) — recommended for formatting. Biome is a faster alternative, but as of May 2026, Cursor's Iterate on Lints only catches tsc and ESLint errors — not Biome diagnostics. If you use Biome for linting, you lose the self-correction loop. Use Biome for formatting only, and keep ESLint for lint rules that Cursor can react to.

3. Tailwind CSS IntelliSense (bradlc.vscode-tailwindcss) — essential if your project uses Tailwind. It provides class name completion, hover documentation, and prevents Cursor from generating non-existent utility classes in JSX. Without it, the AI regularly invents plausible-looking Tailwind classes that don't exist.

Do not install both Prettier and a formatter bundled inside another extension for the same file types. Conflicting formatters cause "format on save" to produce different output on every save and confuse the AI about your actual style.

Workspace settings: the complete .vscode/settings.json

A .vscode/settings.json that works for TypeScript/React projects with ESLint and Prettier:

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit",
      "source.organizeImports": "never"
    }
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit",
      "source.organizeImports": "never"
    }
  },
  "eslint.validate": ["typescript", "typescriptreact"],
  "typescript.updateImportsOnFileMove.enabled": "always",
  "typescript.preferences.preferTypeOnlyAutoImports": true
}
Enter fullscreen mode Exit fullscreen mode

Key decisions here:

  • "source.organizeImports": "never" — disables VS Code's built-in import sorter, which conflicts with ESLint's import ordering rules and produces different results. Let ESLint or Prettier handle import organization consistently.
  • "typescript.updateImportsOnFileMove.enabled": "always" — automatically updates import paths when you rename or move files. This prevents the AI from seeing stale import paths that don't exist.
  • "typescript.preferences.preferTypeOnlyAutoImports": true — auto-imports types with import type, keeping runtime bundle size down and satisfying the @typescript-eslint/consistent-type-imports rule.

Commit this file. It's not personal preference — it's project tooling, the same as package.json.

Iterate on Lints: the React-specific killer feature

This is the Cursor setting that React developers get the most value from and the one least covered in general Cursor guides.

How to enable it: Open Cursor Settings (Ctrl+Shift+J / Cmd+Shift+J) → Chat → toggle on Iterate on Lints.

What it does: After Agent mode makes code changes, Cursor waits for ESLint and TypeScript errors to surface in the editor, reads them, and automatically attempts to fix them — wi

Top comments (0)