VS Code’s core architecture:

README.md

VS Code’s core architecture: VS Code splits into three major layers: UI (Workbench) ↓ Editor (Monaco) ↓ Language Features (Providers / LSP)

VS Code itself does NOT parse most languages. It delegates to:

• Built-in language services (TS/JS, JSON, HTML, CSS)
• Extensions
• LSP servers

Autocomplete (Suggest) data flow/architecture: When you press: Ctrl + Space

Here’s what happens: SuggestController ↓ SuggestModel ↓ CompletionItemProvider (1..N) ↓ Language Feature Registry ↓ Extension Host or Built-in Provider ↓ (Optional) LSP Server

🔹 UI Layer (Popup Menu) src/vs/editor/contrib/suggest/

Key Files 1️⃣ suggestController.ts

Main entry point for triggering suggest. Class: SuggestController Key methods: triggerSuggest() _cancelSuggestWidget()

2️⃣ suggestModel.ts Handles provider orchestration and merging results. This is where all providers are queried. Class: SuggestModel Important methods: trigger(context: SuggestTriggerContext) _provideCompletionItems()

3️⃣ suggestWidget.ts The actual popup UI list. Class: SuggestWidget Handles: Rendering Selection Filtering Focus

3. Completion Providers (Language Side) This is the core autocomplete interface. Provider Interface Defined in: src/vs/editor/common/languages.ts Interface: export interface CompletionItemProvider { provideCompletionItems( model: ITextModel, position: Position, context: CompletionContext, token: CancellationToken ): ProviderResult; }

Registry In: src/vs/editor/common/languageFeatureRegistry.ts Class: LanguageFeatureRegistry Used for: -CompletionItemProvider -HoverProvider -DefinitionProvider -etc.

4. Hover / “Lookup Window” (Tooltip) When you hover over a symbol: HoverController ↓ HoverOperation ↓ HoverProvider (1..N) ↓ Language Service / LSP

🔹 UI Files Folder: src/vs/editor/contrib/hover/ Important files: hoverController.ts Entry point. contentHoverController.ts Coordinates content hover behavior. hoverWidget.ts The actual tooltip UI.

Hover Provider Interface In: src/vs/editor/common/languages.ts Interface: export interface HoverProvider { provideHover( model: ITextModel, position: Position, token: CancellationToken ): ProviderResult; }

5. Syntax Tree — Where It Actually Comes From VS Code editor itself does NOT build an AST for most languages. Instead: | Language | Who owns AST | | --------------------- | --------------------------- | | TypeScript/JavaScript | TypeScript Server | | JSON | vscode-json-languageservice | | HTML | vscode-html-languageservice | | CSS | vscode-css-languageservice | | Python | Pylance extension | | Rust | rust-analyzer extension |

TypeScript Example (Built-in) Extension folder: extensions/typescript-language-features/ Important file: src/tsServer/tsServerService.ts This launches: tsserver.js

The AST lives inside TypeScript's compiler services. Autocomplete ultimately comes from:

languageService.getCompletionsAtPosition()

Defined in the TypeScript repo, not VS Code.

6. LSP Data Flow (Most Languages) For extension-based languages: Editor (Monaco) ↓ Extension Host ↓ vscode-languageclient ↓ JSON-RPC ↓ Language Server (separate process)

LSP Interface (Extension API) Registers providers from extensions. In: src/vs/workbench/api/common/extHostLanguageFeatures.ts Key class: ExtHostLanguageFeatures

Completion LSP Spec Protocol definition lives in: Language Server Protocol repo: Completion request: textDocument/completion Spec: CompletionParams CompletionItem CompletionList

7. Full Autocomplete Flow (Step-by-Step) Let’s trace Ctrl+Space fully: 1️⃣ User triggers suggest SuggestController.triggerSuggest() ↓ 2️⃣ SuggestModel gathers providers LanguageFeatureRegistry ↓ 3️⃣ Each provider called provideCompletionItems() ↓ 4️⃣ If LSP-backed: Extension Host → JSON RPC → Language Server → returns CompletionItems ↓ 5️⃣ SuggestModel merges & ranks ↓ 6️⃣ SuggestWidget renders popup

8. Core Language Interfaces src/vs/editor/common/languages.ts Defines: CompletionItem Hover Definition DocumentSymbol 2️⃣ Provider Registry src/vs/editor/common/languageFeatureRegistry.ts 3️⃣ Suggest Engine src/vs/editor/contrib/suggest/ 4️⃣ Hover Engine src/vs/editor/contrib/hover/ 5️⃣ Extension Host Bridge src/vs/workbench/api/common/extHostLanguageFeatures.ts

9. Monaco vs VS Code Important distinction: VS Code embeds Monaco Editor. Monaco repo: https://github.com/microsoft/monaco-editor Many editor-side files originate from Monaco. If you're exploring autocomplete internals, also read: monaco-editor/src/vs/editor/contrib/suggest/ They are extremely similar.

10. Architectural Layers (Mental Model) Think of VS Code like this: [Workbench UI] panels, tabs, layout [Editor (Monaco)] text model cursor decorations suggest hover [Language Feature Registry] provider orchestration [Extension Host] sandbox for extensions [Language Server / Built-in Service] AST type checking semantic model

11. If You Want to Modify Behavior Modify popup UI? Look in: suggestWidget.ts Modify ranking? completionModel.ts Modify trigger logic? suggestController.ts Modify hover appearance? hoverWidget.ts

12. Where Lookup Tables Live There are 2 types: 1️⃣ Keyword-based completion Hardcoded arrays inside language services. Example: JSON schema keywords HTML tags list These live in: vscode-html-languageservice vscode-json-languageservice

2️⃣ AST-based lookup Generated from: TypeScript compiler API LSP server symbol tables VS Code itself does not maintain symbol tables.

13. Best Way to Learn the Flow I recommend: Open VS Code repo Search: provideCompletionItems Set breakpoint in: suggestModel.ts Run VS Code in dev mode:

yarn watch

./scripts/code.sh

14. If You're Studying Architecture The most educational files: Those define the whole contract.

languages.ts
suggestModel.ts
extHostLanguageFeatures.ts
languageFeatureRegistry.ts