Lesson 36 of 40
Web Development
Intermediate
40 min
TypeScript & JavaScript in VS 2026
Write modern TypeScript and JavaScript with VS 2026's enhanced JS/TS tooling, ESLint integration, Node.js debugging, and npm task runners.
Part 1: TypeScript 5.x Features
// Const type parameters
function createRoute<const T extends string>(path: T) {
return { path, navigate: () => router.push(path) };
}
// Variadic tuple improvements
type Awaited<T> = T extends PromiseLike<infer U> ? U : T;
function createRoute<const T extends string>(path: T) {
return { path, navigate: () => router.push(path) };
}
// Variadic tuple improvements
type Awaited<T> = T extends PromiseLike<infer U> ? U : T;
Part 2: ESLint & Prettier Integration
VS 2026 runs ESLint in real-time in the editor. Configure in
.eslintrc.json:{
"extends": ["eslint:recommended", "plugin:@typescript-eslint/strict"],
"rules": {
"@typescript-eslint/no-explicit-any": "error",
"@typescript-eslint/await-thenable": "error"
}
}
"extends": ["eslint:recommended", "plugin:@typescript-eslint/strict"],
"rules": {
"@typescript-eslint/no-explicit-any": "error",
"@typescript-eslint/await-thenable": "error"
}
}
Part 3: Node.js Debugging
Debug Node.js apps directly in VS 2026:
- Set breakpoints in
.tsfiles — source maps handled automatically - F5 launches with Node debugger attached
- Support for
--inspect, Jest, and Vitest test runners - Environment variables from
.envfiles loaded automatically
Part 4: Task Runner Explorer
VS 2026's Task Runner Explorer shows npm scripts:
- Run
npm run build,npm testfrom IDE - Bind scripts to VS events (Before Build, After Clean)
- Output appears in Task Runner output window
- Supports Yarn and pnpm workspaces
