← Back to all projects

IDE PLUGIN DEVELOPMENT MASTERY

The IDE is the developer's cockpit. While compilers turn code into binaries, IDEs turn code into a navigable, living structure. Mastering plugin development allows you to:

Learn IDE Plugin Development: From Zero to Tooling Master

Goal: Deeply understand the internals of modern IDEs and editors—how they parse code, manage state, and provide intelligent features. You will learn to build extensions that transform the developer experience by implementing static analysis, automated refactoring, and Language Server Protocol (LSP) integrations. By the end, you’ll see your editor not as a black box, but as a programmable platform for developer productivity.

Why IDE Plugin Development Matters

The IDE is the developer’s cockpit. While compilers turn code into binaries, IDEs turn code into a navigable, living structure. Mastering plugin development allows you to:

  • Multiply Productivity: Automate repetitive tasks and enforce team-wide coding standards directly in the editor.
  • Deepen Language Understanding: You can’t build a plugin without understanding Abstract Syntax Trees (ASTs), symbol tables, and scoping rules.
  • Join the Tooling Revolution: The industry is moving towards “Developer Platforms.” Understanding LSP and VS Code/IntelliJ internals puts you at the forefront of this shift.
  • Democratize Best Practices: Instead of writing documentation that no one reads, write a linting rule that fixes the code for them.

[Include hierarchy diagrams, memory layout diagrams, etc.]

The Architecture of Intelligence

Modern IDEs generally follow one of two architectural patterns:

1. The Extension Host Pattern (VS Code)

┌──────────────────────────────────────────┐
│              VS Code (UI)                │
│ (Monaco Editor, Sidebar, Terminal)       │
└────────┬─────────────────────────┬───────┘
         │ IPC (JSON-RPC)          │
┌────────▼────────┐       ┌────────▼────────┐
│ Extension Host  │       │ Language Server │
│ (Node.js/TS)    │◄─────►│ (Any Language)  │
│ [Your Plugin]   │  LSP  │ [Analysis Engine]│
└─────────────────┘       └─────────────────┘

Why this exists: Isolation. A heavy plugin shouldn’t freeze the UI.

2. The Integrated Platform Pattern (IntelliJ)

┌──────────────────────────────────────────┐
│            IntelliJ Platform             │
│ (JVM, Swing/Compose, Heavy Multithreading)│
│                                          │
│  ┌────────────────────────────────────┐  │
│  │     PSI (Program Structure)        │  │
│  │     [Your Plugin Lives Here]       │  │
│  └────────────────────────────────────┘  │
└──────────────────────────────────────────┘

Why this exists: Deep integration. Direct access to the IDE’s unified model of the entire project across languages.

Core Concept Analysis

1. Abstract Syntax Trees (AST) & PSI

Code isn’t text to an IDE; it’s a tree.

Text: function add(a, b) { return a + b; }

AST Representation:

FunctionDeclaration
├── Identifier (add)
├── Parameters
│   ├── Parameter (a)
│   └── Parameter (b)
└── BlockStatement
    └── ReturnStatement
        └── BinaryExpression (+)
            ├── Identifier (a)
            └── Identifier (b)

In IntelliJ, this is the PSI (Program Structure Interface). It’s a “fat” AST that includes whitespace, comments, and semantic information (like what type a variable is).

2. The Language Server Protocol (LSP)

The LSP is a “Babel fish” for editors. Instead of writing N plugins for M editors (N*M), you write one Language Server that talks to any editor via JSON-RPC.

The Flow:

  1. Editor: “User opened main.c. Here is the content.”
  2. Server: “Thanks. I’ll parse it.”
  3. Editor: “User hovered over line 10, column 5.”
  4. Server: “That’s a variable x. It’s an int. Here’s the docstring.”

3. Static Analysis & Linting

This is “running code without running it.”

  • Syntax Analysis: Does the code follow the grammar?
  • Semantic Analysis: Do types match? Does the variable exist in this scope?
  • Data Flow Analysis: Can this pointer ever be null? Is this variable used before it’s initialized?

4. Contributions and Extension Points

Every IDE has a way to “hook” into its UI:

  • Command Palette: Adding new actions.
  • Decorations: Underlining code, adding icons in the gutter.
  • Webviews: Custom UIs for complex data visualization.
  • Tree Views: Custom sidebars for project-specific navigation.

Concept Summary Table

Concept Cluster What You Need to Internalize
AST/PSI Parsing Code is a tree, not a string. You navigate it via visitors or listeners.
LSP (JSON-RPC) The decoupling of the UI (Client) from the Language Logic (Server).
Extension Host The lifecycle of a plugin: activation events, disposables, and sandboxing.
Symbol Tables How the IDE remembers where every variable and function is defined/used.
Document State Managing incremental changes as the user types (VFS - Virtual File System).

Deep Dive Reading by Concept

Language Internals & Tooling

Concept Book & Chapter
AST & Parsing “Compilers: Principles, Techniques, and Tools” by Aho et al. — Ch. 2: “A Simple Syntax-Directed Translator”
Semantic Analysis “Engineering a Compiler” by Cooper & Torczon — Ch. 4: “Context-Sensitive Analysis”
Static Analysis “Principles of Program Analysis” by Flemming Nielson et al. — Ch. 1: “Introduction”

Platform Specifics

Concept Book & Chapter
IntelliJ PSI “IntelliJ Platform SDK DevGuide” (Official Docs) — Section: “Program Structure Interface (PSI)”
VS Code API “Visual Studio Code Extensibility Guide” (Official Docs) — Section: “Extension Guides”
LSP Specification “Official LSP Specification” (Microsoft) — “Protocol Basics”

Essential Reading Order

  1. The Mental Model (Week 1):
    • Compilers Ch. 2 (Understanding the Tree)
    • IntelliJ SDK Guide “Architectural Overview”
  2. The Protocol (Week 2):
    • LSP Spec “Initialization” and “Text Document Synchronization”

Project 1: The “Hello Gutter” Extension (The Basics of Contributions)

  • File: IDE_PLUGIN_DEVELOPMENT_MASTERY.md
  • Main Programming Language: TypeScript (VS Code) or Kotlin (IntelliJ)
  • Alternative Programming Languages: Java, JavaScript
  • Coolness Level: Level 2: Practical but Forgettable
  • Business Potential: 1. The “Resume Gold”
  • Difficulty: Level 1: Beginner
  • Knowledge Area: IDE APIs / UI Contributions
  • Software or Tool: VS Code API or IntelliJ SDK
  • Main Book: “Visual Studio Code Extensibility Guide” (Online) or “IntelliJ Platform SDK DevGuide”

What you’ll build: A plugin that adds a custom command to the command palette and places a special icon in the “gutter” (the margin next to line numbers) whenever a specific keyword (like FIXME) is found.

Why it teaches IDE development: This project introduces the “Contribution Points” system. You’ll learn how to register your code so the IDE knows when to run it, and how to manipulate the UI without direct access to the editor’s DOM or internal rendering logic.

Core challenges you’ll face:

  • Understanding the package.json (VS Code) or plugin.xml (IntelliJ) → maps to Declarative vs. Imperative registration
  • Handling Activation Events → maps to Lazy loading for performance
  • Managing Disposables → maps to Memory management in long-running IDE processes

Key Concepts:

  • Command Registration: IDE SDK Documentation
  • Text Decorations: VS Code TextEditorDecorationType / IntelliJ GutterIconRenderer

Difficulty: Beginner Time estimate: Weekend Prerequisites: Basic TS/Kotlin, familiarity with the IDE you’re developing for.

Real World Outcome

You will have a working extension that you can launch in a “Host” editor instance. When you type FIXME in a file, a red warning icon appears in the gutter immediately. You can also open the Command Palette and run “Hello Gutter: Count Fixmes” to see a notification popup.

Example Output (Notification):

[Hello Gutter]: Found 12 FIXME markers in the current file.

The Core Question You’re Answering

“How does the IDE know my plugin exists without running it yet?”

Before you write any code, sit with this question. IDEs are performance-sensitive. If they loaded every plugin’s code at startup, they would never finish booting. Understanding “Activation Events” and the manifest file is the foundation of efficient plugin design.

Concepts You Must Understand First

Stop and research these before coding:

  1. The Plugin Manifest
    • What is the purpose of contributes in VS Code or <extensions> in IntelliJ?
    • Why shouldn’t you put your main logic in the entry point?
    • Book Reference: “IntelliJ Platform SDK” - DevGuide: “Plugin Configuration File”
  2. The Editor Lifecycle
    • What happens when a user opens a file?
    • What happens when a user closes a file?
    • Book Reference: “VS Code API” - Extension Guides: “Activation Events”

Questions to Guide Your Design

Before implementing, think through these:

  1. Triggers
    • Should the gutter icon update as the user types, or only on save?
    • How will you track the “current” editor?
  2. Cleanliness
    • If the user uninstalls or disables the plugin, how do the icons disappear?
    • What is a Disposable (VS Code) and why is it crucial?

Thinking Exercise

The Performance Trace

Imagine you have a 50,000-line file.

// Your logic:
editor.onDidDocumentChange(() => {
    const text = editor.document.getText();
    const count = (text.match(/FIXME/g) || []).length;
    updateUI(count);
});

Questions while analyzing:

  • What happens if the user types 10 characters per second?
  • How many times is getText() called?
  • How would you “debounce” this operation to keep the IDE snappy?

The Interview Questions They’ll Ask

Prepare to answer these:

  1. “What are activation events, and why are they important for IDE performance?”
  2. “Explain the difference between a command and a contribution point.”
  3. “How do you handle resource cleanup in an IDE plugin?”
  4. “Why shouldn’t you perform heavy regex matching on the main UI thread?”
  5. “What is the manifest file and what is its role in the plugin lifecycle?”

Hints in Layers

Hint 1: Start with the Manifest Don’t write code yet. Look at the package.json (VS Code) or plugin.xml (IntelliJ). Find where “commands” are defined.

Hint 2: The Command Handler Look for the registerCommand function. This maps the ID in your manifest to a function in your code.

Hint 3: Finding Text Use the editor’s Document object. It usually has a way to get the text of the entire file or a specific range.

Hint 4: Decorations/Gutter In VS Code, search for createTextEditorDecorationType. In IntelliJ, look for LineMarkerProvider.

Project 2: Todo Highlighter & Manager (Navigating State)

  • File: IDE_PLUGIN_DEVELOPMENT_MASTERY.md
  • Main Programming Language: TypeScript/Kotlin
  • Alternative Programming Languages: Java
  • Coolness Level: Level 3: Genuinely Clever
  • Business Potential: 2. The “Micro-SaaS / Pro Tool”
  • Difficulty: Level 2: Intermediate
  • Knowledge Area: State Management / Tree Views
  • Software or Tool: IDE Sidebars
  • Main Book: “Code Complete” (Ch. 34: “Characterizing Software Quality”)

What you’ll build: An extension that scans the entire workspace for TODO, HACK, and NOTE comments and displays them in a dedicated Sidebar Tree View, grouped by file. Clicking a TODO should jump the editor to that exact line.

Why it teaches IDE development: You’ll move beyond the “single file” view. You’ll learn how to scan workspaces, manage a persistent data model of the project, and implement custom UI components like Tree Views.

Core challenges you’ll face:

  • Workspace-wide scanning → maps to File system APIs and indexing
  • Implementing a TreeDataProvider → maps to Reactive UI patterns in IDEs
  • Maintaining State across file changes → maps to Incremental updates vs. full re-scans

Key Concepts:

  • Tree Views: VS Code TreeView / IntelliJ ToolWindow
  • Text Selection API: Jumping to lines/columns programmatically.

Difficulty: Intermediate Time estimate: 1 week

Real World Outcome

A new icon appears in the Activity Bar (VS Code) or a new Tool Window appears (IntelliJ). Opening it shows a list:

  • src/main.ts
    • [Line 12] TODO: Fix memory leak
    • [Line 45] HACK: Temporary workaround
  • tests/suite.ts
    • [Line 5] NOTE: Add more edge cases

Clicking “Fix memory leak” opens main.ts and highlights line 12.

Project 3: AST Explorer & Visualizer (Seeing the Tree)

  • File: IDE_PLUGIN_DEVELOPMENT_MASTERY.md
  • Main Programming Language: TypeScript or Java
  • Alternative Programming Languages: Rust (via LSP)
  • Coolness Level: Level 4: Hardcore Tech Flex
  • Business Potential: 1. The “Resume Gold”
  • Difficulty: Level 3: Advanced
  • Knowledge Area: Compilers / AST
  • Software or Tool: IDE internal parsers

What you’ll build: A “Webview” or “Tool Window” that shows the Abstract Syntax Tree (AST) of the file you are currently editing in real-time. As you click on code, the corresponding node in the AST view highlights.

Why it teaches IDE development: You are peering into the IDE’s brain. You’ll learn how to access the internal parser (PSI in IntelliJ, or ts.createSourceFile in VS Code/TS) and how to communicate between the IDE process and a custom UI (like a Webview).

Core challenges you’ll face:

  • Accessing the Parser → maps to Interfacing with language-specific SDKs
  • Bidirectional selection sync → maps to Mapping character offsets to AST node ranges
  • Serializing the Tree → maps to Communicating complex objects between the extension host and a Webview

Key Concepts:

  • AST Nodes: Node, Expression, Statement, Identifier.
  • Webviews: Sandboxed HTML/CSS/JS inside the editor.

Difficulty: Advanced Time estimate: 1-2 weeks

Project 4: Boilerplate Buster (Code Transformation)

  • File: IDE_PLUGIN_DEVELOPMENT_MASTERY.md
  • Main Programming Language: TypeScript/Kotlin
  • Alternative Programming Languages: Java
  • Coolness Level: Level 3: Genuinely Clever
  • Business Potential: 2. The “Micro-SaaS / Pro Tool”
  • Difficulty: Level 2: Intermediate
  • Knowledge Area: Code Generation / Refactoring
  • Software or Tool: Text Edit API

What you’ll build: A “Quick Fix” or “Code Action” that detects a class without a constructor (or a struct without tags) and offers to generate it automatically based on the existing fields.

Why it teaches IDE development: You’ll learn how to change code safely. This involves calculating “Text Edits” (which parts of the file to replace) to ensure you don’t break undo/redo history or mess up formatting.

Core challenges you’ll face:

  • Context Awareness → maps to Only showing the action when the cursor is on a Class
  • Formatting preservation → maps to Respecting the user’s tab/space settings
  • Snippet syntax → maps to Using placeholders so the user can quickly tab through names

Project 5: The Custom Linter (Static Analysis)

  • File: IDE_PLUGIN_DEVELOPMENT_MASTERY.md
  • Main Programming Language: TypeScript (using ESLint API) or Java (using IntelliJ Inspection API)
  • Alternative Programming Languages: Rust (via swc or syn)
  • Coolness Level: Level 3: Genuinely Clever
  • Business Potential: 3. The “Service & Support” Model
  • Difficulty: Level 3: Advanced
  • Knowledge Area: Static Analysis / Diagnostics
  • Software or Tool: Diagnostics API
  • Main Book: “Engineering a Compiler” (Ch. 4: Context-Sensitive Analysis)

What you’ll build: A plugin that detects a specific “Forbidden Pattern” (e.g., using console.log in production-bound files or deep nested ternary operators) and underlines it in the editor with a custom message and a “Quick Fix” to refactor it.

Why it teaches IDE development: This project moves from simple text matching to Semantic Analysis. You’ll use the AST to ensure you’re only flagging actual code, not comments or strings. You’ll also learn the “Diagnostic” system used to show errors and warnings.

Core challenges you’ll face:

  • AST Pattern Matching → maps to Writing recursive visitors to find specific code structures
  • Scope Analysis → maps to Distinguishing between a global variable and a local one with the same name
  • Calculating the Refactor → maps to Programmatically rewriting the AST or text to fix the issue

Key Concepts:

  • Diagnostics: DiagnosticSeverity, range, message.
  • Code Actions: The “Lightbulb” menu in the editor.

Difficulty: Advanced Time estimate: 1-2 weeks

Real World Outcome

The user writes:

const result = a ? b ? c : d : e; // Diagnostic triggers here

The line gets a yellow squiggly. Hovering shows: “Error: Deeply nested ternary operators are prohibited. Use an if-else statement for clarity.” Clicking the lightbulb shows “Convert to if-else,” which automatically replaces the code.

Project 6: LSP “Hello World” (The Decoupled Server)

  • File: IDE_PLUGIN_DEVELOPMENT_MASTERY.md
  • Main Programming Language: Node.js/TypeScript (Server)
  • Alternative Programming Languages: Rust, Python, Go
  • Coolness Level: Level 4: Hardcore Tech Flex
  • Business Potential: 4. The “Open Core” Infrastructure
  • Difficulty: Level 3: Advanced
  • Knowledge Area: Networking / Protocols (JSON-RPC)
  • Software or Tool: Language Server Protocol (LSP)
  • Main Book: “Official LSP Specification”

What you’ll build: A standalone Language Server for a custom “toy” language (e.g., a simple config format or a math DSL). It should provide syntax highlighting, basic autocomplete, and “Go to Definition.”

Why it teaches IDE development: This is the modern standard. You’ll learn how to separate the “IDE logic” from the “Editor UI.” You’ll implement the JSON-RPC handshake and handle document synchronization (how the server keeps its own copy of the file content as the user types).

Core challenges you’ll face:

  • The Lifecycle Handshake → maps to initialize, initialized, and shutdown
  • Text Sync → maps to Handling didOpen, didChange (incremental vs. full), and didSave
  • Protocol Buffers/JSON-RPC → maps to Communicating over stdin/stdout or sockets

Key Concepts:

  • Capabilities: Telling the client what features your server supports.
  • Incremental Sync: Only sending the characters that changed, not the whole file.

Difficulty: Advanced Time estimate: 2 weeks

Project 7: Cross-Language Navigator (Symbol Mapping)

  • File: IDE_PLUGIN_DEVELOPMENT_MASTERY.md
  • Main Programming Language: TypeScript/Kotlin
  • Alternative Programming Languages: Java
  • Coolness Level: Level 3: Genuinely Clever
  • Business Potential: 1. The “Resume Gold”
  • Difficulty: Level 3: Advanced
  • Knowledge Area: Symbol Tables / Indexing
  • Software or Tool: Definition Provider

What you’ll build: A plugin that allows “Cmd+Click” navigation between different languages. For example, clicking on a CSS class in an HTML file should open the .css file and jump to that class definition. Or clicking a SQL table name in a Java string should jump to the Liquibase/SQL migration file.

Why it teaches IDE development: You’ll learn about Symbol Resolving. You’ll need to index the entire project to find definitions that aren’t in the current file or even the same language.

Core challenges you’ll face:

  • Global Indexing → maps to Building a background task to index project symbols
  • Heuristic Matching → maps to Finding the right file when multiple files might have the same symbol
  • Provider Registration → maps to Hooking into the “Go to Definition” action

Project 8: Real-time Performance Overlay (Visualizing Data)

  • File: IDE_PLUGIN_DEVELOPMENT_MASTERY.md
  • Main Programming Language: TypeScript/Kotlin
  • Alternative Programming Languages: Java
  • Coolness Level: Level 5: Pure Magic (Super Cool)
  • Business Potential: 2. The “Micro-SaaS / Pro Tool”
  • Difficulty: Level 4: Expert
  • Knowledge Area: Data Visualization / Editor Inlays
  • Software or Tool: CodeLens / Inlay Hints
  • Main Book: “Designing Data-Intensive Applications” (Ch. 1)

What you’ll build: A plugin that reads a JSON file (e.g., a benchmark report or a profiler log) and displays the execution time of each function directly inside the code editor as “Inlay Hints” or “CodeLens” text.

Why it teaches IDE development: You’re blending external data with the code structure. You’ll learn how to map external line/column data back to the editor’s view and how to use modern UI elements like Inlay Hints (tiny text inside the line) that don’t affect the actual file content.

Core challenges you’ll face:

  • Data Mapping → maps to Reconciling external line numbers with a document that may have changed
  • UI Performance → maps to Updating thousands of hints without stuttering
  • File Watching → maps to Automatically refreshing the UI when the JSON log changes

Key Concepts:

  • CodeLens: Interactive text above lines.
  • Inlay Hints: Inline ghost text (e.g., parameter names).

Project 9: The “Time Machine” Debugger UI (Visualizing Execution)

  • File: IDE_PLUGIN_DEVELOPMENT_MASTERY.md
  • Main Programming Language: TypeScript (VS Code) or Kotlin (IntelliJ)
  • Alternative Programming Languages: Java
  • Coolness Level: Level 4: Hardcore Tech Flex
  • Business Potential: 4. The “Open Core” Infrastructure
  • Difficulty: Level 4: Expert
  • Knowledge Area: Debugging / State Visualization
  • Software or Tool: Debug Adapter Protocol (DAP)
  • Main Book: “The Art of Debugging” (Ch. 1)

What you’ll build: A custom UI (Webview) that visualizes a “Time Travel” log. Instead of standard stepping, the user can drag a slider to see how variables changed over time. The editor should highlight the active line for each step in the log.

Why it teaches IDE development: You’ll explore the Debug Adapter Protocol (DAP), the counterpart to LSP. You’ll learn how to feed data into the IDE’s debugging infrastructure and how to build a complex, interactive dashboard that stays in sync with the editor’s cursor.

Core challenges you’ll face:

  • DAP Integration → maps to Understanding how the IDE requests variable values
  • Synchronization → maps to Making sure the slider, the Webview, and the editor highlight all show the same moment
  • Large Data Handling → maps to Efficiently searching and rendering thousands of state snapshots

Key Concepts:

  • DAP: The standardized protocol for debuggers (Variables, Scopes, StackFrames).
  • Editor Highlighting: Programmatically focusing the editor on a specific line.

Difficulty: Expert Time estimate: 3-4 weeks

Project 10: The Modularizer (Structural Refactoring)

  • File: IDE_PLUGIN_DEVELOPMENT_MASTERY.md
  • Main Programming Language: TypeScript/Kotlin
  • Alternative Programming Languages: Java
  • Coolness Level: Level 3: Genuinely Clever
  • Business Potential: 5. The “Industry Disruptor”
  • Difficulty: Level 4: Expert
  • Knowledge Area: Code Transformation / AST
  • Software or Tool: WorkspaceEdit API

What you’ll build: A “Refactor” action that allows a user to select a block of code, right-click, and select “Extract to New File.” The plugin must: 1. Create the new file, 2. Move the code, 3. Determine all required imports for the new file, 4. Export the code from the new file, and 5. Add an import to the original file.

Why it teaches IDE development: This is the “Final Boss” of code transformation. It requires deep AST knowledge to find dependencies (what variables/types does this code use?) and Workspace-level manipulation to edit multiple files atomically.

Core challenges you’ll face:

  • Dependency Tracking → maps to Analyzing the selected code’s scope for external references
  • Import Resolution → maps to Finding the source of every used symbol in the selection
  • Atomic Operations → maps to Using WorkspaceEdit to ensure all file changes happen as a single ‘Undo’ step

Project 11: Remote Pair Programming (Networking & Synchronization)

  • File: IDE_PLUGIN_DEVELOPMENT_MASTERY.md
  • Main Programming Language: TypeScript/Node.js
  • Alternative Programming Languages: Go (for the relay server)
  • Coolness Level: Level 5: Pure Magic (Super Cool)
  • Business Potential: 5. The “Industry Disruptor”
  • Difficulty: Level 5: Master
  • Knowledge Area: Distributed Systems / Conflict Resolution
  • Software or Tool: WebSockets / CRDTs
  • Main Book: “Grokking Data Structures” (Ch. on Graphs and Trees)

What you’ll build: A “Live Share” clone. Two people open the same project in different IDEs. When Person A moves their cursor, Person B sees a colored cursor label. When Person A types, the text appears in Person B’s editor in real-time.

Why it teaches IDE development: You’ll learn how to hook into the lowest level of the editor: text buffer changes and cursor movements. You’ll also face the challenge of synchronization (what happens if both people type at the same time?).

Core challenges you’ll face:

  • Operational Transforms (OT) or CRDTs → maps to Ensuring document consistency across peers
  • Cursor Synchronization → maps to Translating local character offsets to remote ones
  • Performance → maps to Sending minimal JSON diffs over a socket

Project 12: The Documentation Ghost (Contextual Assistance)

  • File: IDE_PLUGIN_DEVELOPMENT_MASTERY.md
  • Main Programming Language: TypeScript/Kotlin
  • Alternative Programming Languages: Python (for an AI backend)
  • Coolness Level: Level 3: Genuinely Clever
  • Business Potential: 2. The “Micro-SaaS / Pro Tool”
  • Difficulty: Level 2: Intermediate
  • Knowledge Area: Hover Providers / Search
  • Software or Tool: Hover API

What you’ll build: A plugin that enhances the standard “Hover” tooltip. When you hover over a function, it doesn’t just show the docstring; it also shows 2-3 real examples from your current project where that function is actually used.

Why it teaches IDE development: You’ll learn how to implement a Hover Provider. You’ll also practice searching your workspace’s index to find “Find All References” results and filtering them for the most relevant examples.

Core challenges you’ll face:

  • Hover Rendering → maps to Using Markdown to create rich tooltips
  • Quick Workspace Search → maps to Querying the IDE’s symbol index without blocking the UI
  • Ranking Relevance → maps to Deciding which examples are most “illustrative”

Project Comparison Table

Project Difficulty Time Depth of Understanding Fun Factor
1. Hello Gutter Level 1 Weekend Introduction to Manifests ⭐⭐
2. Todo Manager Level 2 1 week Workspace State & Tree Views ⭐⭐⭐
3. AST Explorer Level 3 2 weeks Language Internals & Webviews ⭐⭐⭐⭐
4. Boilerplate Buster Level 2 1 week Text Manipulation ⭐⭐⭐
5. Custom Linter Level 3 2 weeks Static Analysis & Diagnostics ⭐⭐⭐
6. LSP “Hello World” Level 3 2 weeks Protocols & Decoupling ⭐⭐⭐⭐
7. Cross-Lang Nav Level 3 2 weeks Symbol Tables & Indexing ⭐⭐⭐
8. Perf Overlay Level 4 2 weeks Inlay Hints & External Data ⭐⭐⭐⭐⭐
9. Debugger UI Level 4 1 month DAP & State Management ⭐⭐⭐⭐⭐
10. Modularizer Level 4 3 weeks Complex AST Transformations ⭐⭐⭐⭐
11. Remote Pair Level 5 1 month+ CRDTs & Distributed State ⭐⭐⭐⭐⭐
12. Doc Ghost Level 2 1 week Hover API & References ⭐⭐⭐

Recommendation

  • If you are new to the platform: Start with Project 1 (Hello Gutter). It ensures your environment is set up and you understand how to talk to the IDE at the simplest level.
  • If you love compilers/languages: Jump to Project 3 (AST Explorer) and Project 6 (LSP). This will give you the “aha!” moment of how code is actually represented.
  • If you want a resume-ready tool: Build Project 8 (Performance Overlay). It’s visually impressive and solves a real problem.

Final Overall Project: The “Architecture Enforcer”

  • Main Programming Language: TypeScript or Kotlin + LSP
  • Goal: Create a complete “Guardian” for your codebase that enforces complex architectural rules that standard linters can’t touch.

What you’ll build: A comprehensive IDE suite that:

  1. Visualizes the Module Graph: A Webview showing how files depend on each other.
  2. Enforces Layering: A Language Server that flags errors if a “Database” layer file tries to import a “UI” layer file.
  3. Automates Migration: A Code Action that, when an architectural pattern changes, offers to migrate the entire file to the new pattern.
  4. Interactive Dashboard: A custom sidebar showing “Technical Debt” metrics derived from your analysis.

Why it ties everything together: You will need to use ASTs to find imports, LSP for the core analysis, Webviews for the graph, Tree Views for the dashboard, and WorkspaceEdits for the migration. You are no longer just building a “plugin”; you are building a platform for code quality.

Summary

This learning path covers IDE Plugin Development through 12 hands-on projects. Here’s the complete list:

# Project Name Main Language Difficulty Time Estimate
1 Hello Gutter TS/Kotlin Beginner Weekend
2 Todo Manager TS/Kotlin Intermediate 1 week
3 AST Explorer TS/Kotlin Advanced 1-2 weeks
4 Boilerplate Buster TS/Kotlin Intermediate 1 week
5 Custom Linter TS/Java Advanced 1-2 weeks
6 LSP “Hello World” TS/Rust/Any Advanced 2 weeks
7 Cross-Lang Nav TS/Kotlin Advanced 2 weeks
8 Perf Overlay TS/Kotlin Expert 2 weeks
9 Debugger UI TS/Kotlin Expert 3-4 weeks
10 Modularizer TS/Kotlin Expert 3 weeks
11 Remote Pair TS/Node.js Master 1 month+
12 Doc Ghost TS/Kotlin Intermediate 1 week

For beginners: Start with projects #1, #2, #4. For intermediate: Focus on projects #5, #6, #7, #12. For advanced: Master the ecosystem with projects #3, #8, #9, #10, #11.

Expected Outcomes

After completing these projects, you will:

  • Navigate the complex APIs of VS Code and IntelliJ with confidence.
  • Master the Language Server Protocol (LSP) and Debug Adapter Protocol (DAP).
  • Understand how to parse and transform code using ASTs (Abstract Syntax Trees).
  • Build high-performance, non-blocking tools that handle large-scale projects.
  • Design custom UIs within the editor using Webviews and Tree Views.

You’ll have built 12 working projects that demonstrate deep understanding of IDE internals from first principles.