LLM Best Practices

How to configure VS Code for TypeScript projects

Last updated 4 min read

View markdown source

AI agents: read this first: llmbestpractices.com/start-here

This is LLM Best Practices (llmbestpractices.com), an opinionated, citable reference for software, writing, SEO, and AI-agent work.

  1. Route, do not crawl. Fetch llmbestpractices.com/llms.txt and open only the pages whose one-line summary matches your task.
  2. Read raw. Append .md to any page URL for markdown. Check status and last_updated in the frontmatter, then read the rules.
  3. Apply as defaults. First-party docs and the project's own conventions win on conflict. Warn before relying on a fast-moving page older than 12 months.
  4. Cite. Link the page by title and URL, e.g. Python, with last_updated for time-sensitive rules. License CC BY 4.0.

Overview

VS Code type-checks TypeScript out of the box, but a committed .vscode/ folder makes the editor match CI: same compiler, same formatter, same fixes on save. This guide pins the workspace TypeScript version, wires format-on-save, recommends extensions, and sets up project references for a monorepo. Compiler options themselves are in typescript-tsconfig.

Prerequisites

  • typescript as a dev dependency: npm add -D typescript (or pnpm add -D typescript).
  • A tsconfig.json at the project root.

Steps

1. Commit .vscode/settings.json

{
  "js/ts.tsdk.path": "node_modules/typescript/lib",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "biomejs.biome",
  "editor.codeActionsOnSave": {
    "source.fixAll.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },
  "files.exclude": { "node_modules": true, "dist": true, ".next": true },
  "search.exclude": { "node_modules": true, "dist": true, "pnpm-lock.yaml": true }
}

For Prettier, set editor.defaultFormatter to esbenp.prettier-vscode and drop the Biome code actions. Older VS Code versions read typescript.tsdk instead of js/ts.tsdk.path.

2. Select the workspace TypeScript

Setting the path is not enough. Run the command TypeScript: Select TypeScript Version and choose the workspace version, so the editor uses the compiler CI uses. The status bar version should match the typescript entry in package.json.

3. Recommend extensions

// .vscode/extensions.json
{ "recommendations": ["biomejs.biome", "bradlc.vscode-tailwindcss"] }

Add dbaeumer.vscode-eslint only if the project still runs ESLint (eslint-vs-biome). The built-in TypeScript support needs no extension.

4. Keep the editor and CI on one tsconfig

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "paths": { "@/*": ["./src/*"] }
  },
  "exclude": ["node_modules", "dist", ".next"]
}

moduleResolution: "bundler" matches Vite and Next.js resolution. TypeScript 6 deprecated baseUrl, so write the prefix into each paths target as above. Since TypeScript 6.0 types defaults to an empty list, so add "types": ["node"] (and any test globals) or the editor reports process and describe as undefined.

5. Use project references in a monorepo

Give each package its own tsconfig.json with "composite": true, and list them from a root config:

{ "files": [], "references": [{ "path": "./packages/ui" }, { "path": "./packages/api" }, { "path": "./apps/web" }] }

Build with tsc --build. References let the editor resolve imports across packages from source. Add "declarationMap": true to the packages so go-to-definition lands in .ts files, not .d.ts.

Verify it worked

  1. Hover a variable and see the inferred type.
  2. Save a file with bad formatting and unsorted imports; both get fixed.
  3. The status bar shows the workspace TypeScript version.
node -p "require('typescript/package.json').version"    # matches the status bar

Common errors

  • The editor uses a different TypeScript than CI. The workspace version was never selected; use the command in step 2.
  • Format on save does nothing. The editor.defaultFormatter ID does not match an installed extension, or a language-specific setting overrides it.
  • Imports are not sorted. For Biome 2 the action is source.organizeImports.biome; the generic source.organizeImports is TypeScript’s own.
  • Editor errors differ from tsc. The file belongs to a different tsconfig than the one tsc runs; check which project the file is in.

FAQ

Why does VS Code show different TypeScript errors than CI?

The editor is not using the workspace compiler, or the file belongs to a different tsconfig than the one tsc runs. Run TypeScript: Select TypeScript Version and choose the workspace version.

Is setting the TypeScript SDK path in settings.json enough?

No. You must also run TypeScript: Select TypeScript Version and pick the workspace version; the status bar should then match the typescript entry in package.json.

Why does VS Code say process or describe is undefined after upgrading TypeScript?

Since TypeScript 6.0, types defaults to an empty list, so add "types": ["node"] and any test globals to tsconfig.json.

Do I need an extension for TypeScript support in VS Code?

No. The built-in TypeScript support needs no extension; recommend Biome for formatting, and add the ESLint extension only if the project still runs ESLint.

How do I get go-to-definition to open .ts files in a monorepo?

Use project references with "composite": true in each package and add "declarationMap": true, so the editor lands in .ts files instead of .d.ts.

Backlinks