JavaScript and TypeScript

Purpose and Scope

Visual Studio Code treats JavaScript and TypeScript as first-class editing languages rather than as optional samples layered on top of the editor. The user-facing experience includes syntax highlighting, IntelliSense, type checking, navigation, refactorings, and formatting-oriented assistance, with JavaScript powered by the TypeScript language service. This page explains how those capabilities map to the bundled repository components that provide grammar support, language-service hosting, version selection, and type-definition navigation. It is intended for readers who want to understand what ships in Code - OSS before they configure a project or modify the built-in language extensions.

Sources: extensions/typescript-basics/syntaxes/TypeScript.tmLanguage.json, extensions/typescript-basics/syntaxes/TypeScriptReact.tmLanguage.json, extensions/typescript-language-features/src/typeScriptServiceClientHost.ts

The public documentation frames the experience in practical terms: JavaScript features should mostly work out of the box, while jsconfig.json, JSDoc, typings, and project structure can make IntelliSense more precise. TypeScript support is built into VS Code, but the TypeScript compiler tsc is installed separately when users want to transpile .ts files into JavaScript. In source, that split shows up as a bundled editor integration that hosts a TypeScript service client and registers providers, while project compilation remains the responsibility of the user's workspace toolchain.

Sources: extensions/typescript-language-features/src/typeScriptServiceClientHost.ts, extensions/typescript-language-features/src/commands/selectTypeScriptVersion.ts

Relevant Source Files

• extensions/copilot/src/extension/completions-core/vscode-node/extension/src/panelShared/languages/typeScriptReact.tmLanguage.ts - Provides TypeScript React grammar data used by Copilot completion UI code paths that need to reason about TSX-like syntax.
• extensions/typescript-basics/syntaxes/TypeScript.tmLanguage.json - Defines the TextMate grammar contribution for TypeScript syntax highlighting.
• extensions/typescript-basics/syntaxes/TypeScriptReact.tmLanguage.json - Defines the TextMate grammar contribution for TypeScript React and TSX syntax highlighting.
• extensions/typescript-language-features/src/commands/selectTypeScriptVersion.ts - Implements the typescript.selectTypeScriptVersion command that opens the TypeScript version picker through the service client.
• extensions/typescript-language-features/src/typeScriptServiceClientHost.ts - Hosts the TypeScript service client, language providers, diagnostics configuration, status UI, typings status, plugin manager, logging, cancellation, and version/process services.
• extensions/typescript-language-features/src/languageFeatures/typeDefinitions.ts - Registers and implements the Type Definition provider backed by TypeScript service requests.

System-to-Code Mapping

The JavaScript and TypeScript experience is split between lightweight grammar contributions and a richer language-feature extension. Grammar files handle lexical structure for highlighting and token scopes. They are intentionally separate from the semantic service so that files can receive immediate syntax coloring even before the language server has finished project analysis. The TypeScript and TypeScript React grammar paths in typescript-basics cover .ts and TSX-oriented syntax, while the Copilot TSX grammar path shows the same language shape being reused where AI completion surfaces need syntax-aware presentation.

Sources: extensions/copilot/src/extension/completions-core/vscode-node/extension/src/panelShared/languages/typeScriptReact.tmLanguage.ts, extensions/typescript-basics/syntaxes/TypeScript.tmLanguage.json, extensions/typescript-basics/syntaxes/TypeScriptReact.tmLanguage.json

Semantic behavior is centralized by TypeScriptServiceClientHost. The host owns a TypeScriptServiceClient, keeps a list and map of LanguageProvider instances, tracks Automatic Type Acquisition progress through TypingsStatus, and manages per-file configuration through FileConfigurationManager. Its constructor dependencies show the major integration points: command registration, log directory selection, request cancellation, TypeScript version selection, server process creation, active editor tracking, service configuration, experimentation telemetry, and logging. That design lets the same host coordinate editor UI, language-service traffic, and project settings without embedding all behavior in one provider.

Sources: extensions/typescript-language-features/src/typeScriptServiceClientHost.ts

API Components and Commands

The most direct command entry point in this source set is SelectTypeScriptVersionCommand. It exports the command id typescript.selectTypeScriptVersion, stores that id on the instance, and implements execute() by resolving a lazy TypeScriptServiceClientHost and calling serviceClient.showVersionPicker(). The lazy host dependency matters because version selection is a user action that should route through the already configured TypeScript service integration rather than constructing an independent picker. For users, this corresponds to choosing between VS Code's bundled TypeScript version and a workspace-installed version when a project needs specific language-service behavior.

Sources: extensions/typescript-language-features/src/commands/selectTypeScriptVersion.ts

The type-definition feature is implemented as TypeScriptTypeDefinitionProvider, a subclass of DefinitionProviderBase that implements vscode.TypeDefinitionProvider. Its provideTypeDefinition(document, position, token) method delegates to getSymbolLocations('typeDefinition', document, position, token), which keeps the provider focused on the VS Code API contract while the base definition machinery handles the TypeScript protocol request pattern. Registration is conditional: register(selector, client) requires either ClientCapability.EnhancedSyntax or ClientCapability.Semantic, then registers against selector.syntax. This prevents the editor from advertising type-definition navigation unless the connected client can answer the request.

Sources: extensions/typescript-language-features/src/languageFeatures/typeDefinitions.ts

// Public command id implemented by the bundled TypeScript language features extension
typescript.selectTypeScriptVersion
 
// Provider method shape from the Type Definition implementation
provideTypeDefinition(document, position, token)
 
// TypeScript service request kind used by the provider
typeDefinition

Execution Flow

A typical editing flow starts before any TypeScript server request is needed. When a user opens a TypeScript or TSX file, the grammar contribution supplies tokenization so the editor can render meaningful colors and scopes immediately. As the language-feature extension activates and the user works in JavaScript or TypeScript files, TypeScriptServiceClientHost coordinates the configured language descriptions, active editor tracking, file configuration, diagnostics style handling, and status indicators. The host's imported collaborators show that IntelliSense status, large-project status, version status, typings status, plugin management, cancellation, and logging are part of the same lifecycle.

Sources: extensions/typescript-language-features/src/typeScriptServiceClientHost.ts, extensions/typescript-basics/syntaxes/TypeScript.tmLanguage.json, extensions/typescript-basics/syntaxes/TypeScriptReact.tmLanguage.json

Project-aware features become more useful as the TypeScript service understands the workspace. In JavaScript projects, a jsconfig.json can scope files, separate frontend and backend project contexts, or exclude generated files from IntelliSense. In TypeScript projects, users can install typescript locally or globally and run tsc from the integrated terminal, while VS Code's editor support remains available even when compilation is handled outside the editor. If a project depends on a particular TypeScript version, the version picker command routes the decision through the active service client so diagnostics and IntelliSense use the intended version.

Sources: extensions/typescript-language-features/src/commands/selectTypeScriptVersion.ts, extensions/typescript-language-features/src/typeScriptServiceClientHost.ts

Navigation features follow the same service-backed pattern. When a user invokes Go to Type Definition, VS Code calls the registered TypeScriptTypeDefinitionProvider with the current document, cursor position, and cancellation token. The provider asks the TypeScript service for typeDefinition locations and returns a VS Code Definition result when available. Because registration is gated by enhanced syntax or semantic capability, the command behaves as part of the language-service capability model rather than as a purely textual search. That distinction is important for JavaScript too, where type information can come from inference, JSDoc, declaration files, and Automatic Type Acquisition.

Sources: extensions/typescript-language-features/src/languageFeatures/typeDefinitions.ts

Implementation Details and Constraints

Several source details explain how VS Code balances immediate editor feedback with deeper project analysis. The service host contains a styleCheckDiagnostics set built from TypeScript protocol error-code groups for unused variables, unused properties, unused imports, unreachable code, unused labels, fall-through switch cases, and missing returns. The host also keeps a reportStyleCheckAsWarnings flag, showing that not every TypeScript diagnostic is treated equally in the editor presentation. This supports the user expectation that correctness errors, style checks, and project-size status can be communicated through different UI channels.

Sources: extensions/typescript-language-features/src/typeScriptServiceClientHost.ts

The host constructor also reveals the extension boundary. It receives a PluginManager, ITypeScriptVersionProvider, TsServerProcessFactory, OngoingRequestCancellerFactory, ServiceConfigurationProvider, and ILogDirectoryProvider instead of hard-coding those responsibilities. That makes TypeScript support adaptable across project settings, installed TypeScript versions, logging modes, and server-process choices. For web-oriented or constrained environments, the important architectural point is that editor features depend on VS Code API registration and service abstractions, while exact server startup and version resolution are delegated to injected services.

Sources: extensions/typescript-language-features/src/typeScriptServiceClientHost.ts

Practical Next Steps

For everyday JavaScript work, start with the built-in experience and add project structure only when IntelliSense needs more context. Create a jsconfig.json when a workspace contains unrelated JavaScript roots, generated files that should be excluded, or legacy scripts that should be treated as one project. For TypeScript, install the compiler with npm install --save-dev typescript in the workspace when reproducible builds matter, then use the version picker if VS Code should use that workspace version for language features. These steps align the editor's semantic understanding with the same dependencies used by your build.

Sources: extensions/typescript-language-features/src/commands/selectTypeScriptVersion.ts, extensions/typescript-language-features/src/typeScriptServiceClientHost.ts

If you are contributing to the repository, treat grammar and semantic changes as separate review concerns. Grammar edits affect tokenization and highlighting for TypeScript, TSX, and TSX-aware Copilot presentation surfaces. Language-feature changes affect command behavior, provider registration, server communication, diagnostics, status UI, typings progress, and cancellation behavior. After changing navigation features, verify that capability-gated registration still matches the client abilities. After changing version selection, verify the command still resolves the lazy host and delegates to the service client rather than bypassing the configured TypeScript integration.

Sources: extensions/copilot/src/extension/completions-core/vscode-node/extension/src/panelShared/languages/typeScriptReact.tmLanguage.ts, extensions/typescript-language-features/src/commands/selectTypeScriptVersion.ts, extensions/typescript-language-features/src/languageFeatures/typeDefinitions.ts