Development Workflow - Visual Studio Code

Development Environment Setup

VS Code provides a comprehensive development environment with pre-configured tasks, launch configurations, and tooling.

Editor Configuration

The repository includes VS Code workspace settings optimized for development:

TypeScript

Tabs for indentation (not spaces)
Real-time compilation feedback
Strict type checking enabled

Tasks

Pre-configured build tasks
Watch mode tasks
Test runner tasks

Extensions

ESLint integration
TypeScript language features
Debug adapters

Launch Configs

Multiple debug configurations
Compound launch setups
Test runner integrations

Architecture Overview

Understanding the codebase structure is essential for effective development:

Core Source Structure (`src/`)

Base Layer
Platform Layer
Editor Layer
Workbench Layer
Code Layer

src/vs/base/ - Foundation utilities and cross-platform abstractions

Common data structures (arrays, maps, events)
Platform-agnostic utilities
Basic UI components
No dependencies on other VS Code layers

src/vs/platform/ - Platform services and dependency injection

Service infrastructure
Dependency injection framework
Core platform services (files, storage, logging)
Cross-cutting concerns

src/vs/editor/ - Text editor implementation

Monaco Editor core
Language services
Syntax highlighting
IntelliSense features

src/vs/workbench/ - Main application workbench

browser/ - Core UI components
services/ - Workbench services
contrib/ - Feature contributions
api/ - Extension API implementation

src/vs/code/ - Electron main process

Application lifecycle
Window management
Native integration

Built-in Extensions

The extensions/ directory contains first-party extensions:

Language features: typescript-language-features/, html-language-features/, css-language-features/
Core features: git/, debug-auto-launch/, emmet/, markdown-language-features/
Themes: theme-* folders
Development tools: extension-editing/, vscode-api-tests/

Coding Guidelines

Following these guidelines is mandatory for all code contributions. The CI/CD pipeline enforces many of these rules.

Naming Conventions

// Use PascalCase for types
type ViewMode = 'split' | 'single';

// Use PascalCase for interfaces
interface IEditorService {
    activeEditor: IEditor;
}

// Use PascalCase for enum values
enum Theme {
    Light,
    Dark,
    HighContrast
}

// Use camelCase for functions
function openEditor(uri: URI): void {
    // ...
}

// Use camelCase for methods
class EditorService {
    openEditor(uri: URI): void {
        // ...
    }
}

// Use camelCase for properties and local variables
const activeEditor = this.getActiveEditor();

Indentation and Style

VS Code uses tabs, not spaces for indentation. This is enforced by ESLint.

// Correct: No parens for single parameter
array.map(x => x + 1)

// Correct: Parens for multiple parameters
array.map((x, y) => x + y)

// Correct: Parens for type parameters
array.map(<T>(x: T) => x)

// Wrong: Unnecessary parens
array.map((x) => x + 1)

// Always use curly braces
if (condition) {
    doSomething();
}

// Curly braces on same line
for (let i = 0; i < n; i++) {
    process(i);
}

// Correct spacing
if (x < 10) {
    foo();
}

// Prefer function declarations in top-level scopes
export function createEditor(): IEditor {
    return new Editor();
}

// Arrow functions for callbacks
window.addEventListener('load', () => {
    initialize();
});

String Handling

import * as nls from 'vs/nls';

// Use double quotes for user-facing strings
const message = nls.localize('key', "This message will be translated");

// Use placeholders instead of concatenation
const error = nls.localize('error', "Failed to open {0}", fileName);

// Use single quotes for internal strings
const eventName = 'onDidChangeConfiguration';
const propertyKey = 'editor.fontSize';

UI Labels

Use title-style capitalization for UI elements:

// Command labels (title case)
const command = {
    id: 'workbench.action.files.openFile',
    title: 'Open File',  // ✓ Correct
    // title: 'Open file',  // ✗ Wrong
};

// Don't capitalize short prepositions
'Show in Explorer'  // ✓ Correct
'Show In Explorer'  // ✗ Wrong

Code Quality Requirements

TypeScript Strictness

No any or unknown without justification
Proper type annotations required
Define interfaces for complex types

// Good
function processData(data: EditorData): Result {
    return transform(data);
}

// Avoid
function processData(data: any): any {
    return transform(data);
}

Async/Await

Prefer async/await over Promises:

// Preferred
async function loadFile(uri: URI): Promise<string> {
    const content = await fileService.readFile(uri);
    return content.value.toString();
}

// Avoid
function loadFile(uri: URI): Promise<string> {
    return fileService.readFile(uri).then(content => {
        return content.value.toString();
    });
}

Disposables

Critical: Always handle disposables properly to avoid memory leaks:

class MyComponent {
    private readonly disposables = new DisposableStore();

    constructor() {
        // Register disposables immediately
        this.disposables.add(
            this.onDidChange(() => this.update())
        );
    }

    dispose(): void {
        this.disposables.dispose();
    }
}

Code Reuse

Always search for existing utilities before implementing new ones:

// Check if similar functionality exists in:
// - src/vs/base/common/
// - src/vs/base/browser/
// - src/vs/platform/*/common/

Development Tasks

Compilation and Building

# Start all watch tasks in parallel
npm run watch

# Or start specific watch tasks
npm run watch-client
npm run watch-extensions

# Compile everything
npm run compile

# Build specific components
npm run compile-web
npm run compile-cli

# Use deemon for daemon-style watching
npm run watchd          # Start
npm run kill-watchd     # Stop
npm run restart-watchd  # Restart

Code Quality Checks

Run these checks before committing:

TypeScript Compilation

Check for compilation errors:

npm run compile

Monitor the watch task output for real-time errors:

npm run watch

Layer Validation

Ensure architectural layers are respected:

npm run valid-layers-check

Linting

Run ESLint and StyleLint:

npm run eslint
npm run stylelint

Hygiene Check

Run all code hygiene checks:

npm run hygiene

Or use the precommit hook:

npm run precommit

Specialized Compilation Checks

npm run monaco-compile-check

npm run tsec-compile-check

npm run vscode-dts-compile-check

npm run define-class-fields-check

Working with Extensions

Building Extensions

# Compile all built-in extensions
npm run compile-extensions-build

# Watch extensions for changes
npm run watch-extensions

Downloading Built-in Extensions

Some extensions are not included in the repository:

# Download all built-in extensions
npm run download-builtin-extensions

# Download with code generation
npm run download-builtin-extensions-cg

Updating Dependencies

Grammar Updates

Update language grammars:

npm run update-grammars

Localization

Update localization extension:

npm run update-localization-extension

TypeScript Version

Update to latest TypeScript:

npm run update-build-ts-version

Performance Testing

Run performance benchmarks:

# Performance tests
npm run perf

# Using scripts
node scripts/code-perf.js

Common Development Workflows

Feature Development

Start Watch Mode

npm run watch

Run VS Code

Launch VS Code with debugger attached (F5 in VS Code) or:

./scripts/code.sh

Make Changes

Edit TypeScript files - they’ll automatically recompile

Reload Window

In the running VS Code instance:

Press Cmd/Ctrl + R to reload
Or use Command Palette: “Developer: Reload Window”

Run Tests

Test your changes:

./scripts/test.sh --grep "your test pattern"

Bug Fixing Workflow

Find Related Code

Use semantic search for general concepts (Glob tool)
Use grep for exact strings/error messages
Follow imports to understand dependencies
Check test files for usage patterns

Debug the Issue

Launch VS Code with debugger (see Debugging)

Implement Fix

Make changes following coding guidelines

Validate

# Check compilation
npm run compile

# Run tests
./scripts/test.sh --grep "related test"

# Check layers
npm run valid-layers-check

CI/CD Integration

The repository includes CI/CD scripts:

npm run core-ci        # Full core CI
npm run core-ci-pr     # PR checks

npm run extensions-ci     # Full extension CI
npm run extensions-ci-pr  # PR checks

Tips and Best Practices

Use Watch Mode

Always develop with watch mode running (npm run watch) for instant feedback on TypeScript errors.

Leverage Launch Configurations

Use the pre-configured launch configurations in .vscode/launch.json for debugging different processes:

Main Process
Extension Host
Shared Process
Search Process

Check Layer Dependencies

Before importing from another module, verify it’s allowed by the layer architecture:

npm run valid-layers-check

Test as You Go

Run relevant tests frequently during development:

./scripts/test.sh --grep "pattern matching your feature"

Clean Builds When Needed

If you encounter strange issues, try a clean build:

rm -rf out node_modules/.cache
npm run compile

Next Steps

Debugging

Learn how to debug VS Code itself

Running Tests

Understand the testing infrastructure

Building from Source

Review build instructions

How to Contribute

Read the full contribution guide

​Development Environment Setup

​Editor Configuration

TypeScript

Tasks

Extensions

Launch Configs

​Architecture Overview

​Core Source Structure (src/)

​Built-in Extensions

​Coding Guidelines

​Naming Conventions

​Indentation and Style

​String Handling

​UI Labels

​Code Quality Requirements

​Development Tasks

​Compilation and Building

​Code Quality Checks

​Specialized Compilation Checks

​Working with Extensions

​Building Extensions

​Downloading Built-in Extensions

​Updating Dependencies

​Grammar Updates

​Localization

​TypeScript Version

​Performance Testing

​Common Development Workflows

​Feature Development

​Bug Fixing Workflow

​CI/CD Integration

​Tips and Best Practices

​Next Steps

Debugging

Running Tests

Building from Source

How to Contribute

Development Environment Setup

Editor Configuration

Architecture Overview

Core Source Structure (`src/`)

Built-in Extensions

Coding Guidelines

Naming Conventions

Indentation and Style

String Handling

UI Labels

Code Quality Requirements

Development Tasks

Compilation and Building

Code Quality Checks

Specialized Compilation Checks

Working with Extensions

Building Extensions

Downloading Built-in Extensions

Updating Dependencies

Grammar Updates

Localization

TypeScript Version

Performance Testing

Common Development Workflows

Feature Development

Bug Fixing Workflow

CI/CD Integration

Tips and Best Practices

Next Steps