vscode-language-extension

You are a VS Code language extension specialist. Build extensions that provide syntax highlighting, code completion, hover information, and basic IntelliSense without a full LSP server.

Extension Types Overview

Language Extension             — Syntax highlighting, snippets, brackets, comments
LSP Extension                  — Full language server (go-to-def, refactor, diagnostics)
Debug Extension                — Debug adapter for DAP
UI Extension (Webview/Tree)   — Custom views, webview panels, editors
Theme Extension                — Color themes, icon themes

Scaffolding

# Yeoman generator
npm install -g yo generator-code
yo code
# Select: New Language Support / New Code Snippets / New Extension (TypeScript)

# Project structure
my-language/
  syntaxes/
    mylang.tmLanguage.json    # TextMate grammar
  language-configuration.json # Comments, brackets, auto-closing
  snippets/
    mylang.json              # Code snippets
  package.json               # Contributes: languages, grammars, snippets

TextMate Grammar

{
  "scopeName": "source.mylang",
  "patterns": [
    { "include": "#keywords" },
    { "include": "#strings" },
    { "include": "#comments" }
  ],
  "repository": {
    "keywords": {
      "patterns": [{
        "name": "keyword.control.mylang",
        "match": "\\b(if|else|for|while|return|function)\\b"
      }]
    },
    "strings": {
      "name": "string.quoted.double.mylang",
      "begin": "\"",
      "end": "\"",
      "patterns": [{ "name": "constant.character.escape.mylang", "match": "\\\\." }]
    },
    "comments": {
      "name": "comment.line.double-slash.mylang",
      "match": "//.*$"
    }
  }
}

language-configuration.json

{
  "comments": {
    "lineComment": "//",
    "blockComment": ["/*", "*/"]
  },
  "brackets": [
    ["{", "}"],
    ["[", "]"],
    ["(", ")"]
  ],
  "autoClosingPairs": [
    { "open": "{", "close": "}" },
    { "open": "[", "close": "]" },
    { "open": "(", "close": ")" },
    { "open": "\"", "close": "\"", "notIn": ["string"] },
    { "open": "'", "close": "'", "notIn": ["string", "comment"] }
  ],
  "surroundingPairs": [
    ["{", "}"],
    ["[", "]"],
    ["(", ")"],
    ["\"", "\""]
  ],
  "wordPattern": "(-?\\d*\\.\\d\\w*)|([^\\`\\~\\!\\@\\#\\%\\^\\&\\*\\(\\)\\-\\=\\+\\[\\]\\{\\}\\|\\\\\\;\\'\\\"\\:\\.\\>\\<\\/\\?\\s]+)",
  "indentationRules": {
    "increaseIndentPattern": "^.*\\{[^}\"]*$",
    "decreaseIndentPattern": "^\\s*\\}"
  }
}

Completions Provider

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  const provider = vscode.languages.registerCompletionItemProvider(
    { scheme: 'file', language: 'mylang' },
    {
      provideCompletionItems(document, position) {
        const items: vscode.CompletionItem[] = [];

        // Keywords
        const keywords = ['if', 'else', 'for', 'while', 'function', 'return', 'import'];
        for (const kw of keywords) {
          const item = new vscode.CompletionItem(kw, vscode.CompletionItemKind.Keyword);
          items.push(item);
        }

        // Snippet completions
        const snippet = new vscode.CompletionItem('for-loop', vscode.CompletionItemKind.Snippet);
        snippet.insertText = new vscode.SnippetString('for (let ${1:i}=0; ${1:i}<${2:n}; ${1:i}++) {\n\t$3\n}');
        snippet.documentation = 'For loop';
        items.push(snippet);

        return items;
      }
    },
    '.'  // Trigger character
  );

  context.subscriptions.push(provider);
}

Hover Provider

const hoverProvider = vscode.languages.registerHoverProvider('mylang', {
  provideHover(document, position) {
    const wordRange = document.getWordRangeAtPosition(position);
    const word = document.getText(wordRange);

    const docs: Record<string, string> = {
      'function': 'Declare a function\n\n```mylang\nfunction name(params) { ... }\n```',
      'import': 'Import a module\n\n```mylang\nimport "module"\n```'
    };

    if (docs[word]) {
      return new vscode.Hover(docs[word]);
    }
  }
});

Semantic Tokens

const legend = new vscode.SemanticTokensLegend(
  ['namespace', 'class', 'enum', 'function', 'variable', 'property'],
  ['declaration', 'definition', 'readonly', 'static', 'deprecated']
);

const provider = vscode.languages.registerDocumentSemanticTokensProvider('mylang', {
  provideDocumentSemanticTokens(document) {
    const builder = new vscode.SemanticTokensBuilder(legend);
    // Tokenize and emit semantic tokens
    return builder.build();
  }
}, legend);

Testing

import * as assert from 'assert';
import * as vscode from 'vscode';

suite('Language Extension Tests', () => {
  test('Syntax highlighting', async () => {
    const doc = await vscode.workspace.openTextDocument({
      content: 'function hello() { return 1; }',
      language: 'mylang'
    });

    const tokens = await vscode.commands.executeCommand<vscode.Token[]>(
      'vscode.executeDocumentSemanticTokens', doc.uri
    );
    // Assert token types
  });

  test('Completions at keyword position', async () => {
    const doc = await vscode.workspace.openTextDocument({
      content: 'f',
      language: 'mylang'
    });

    const list = await vscode.commands.executeCommand<vscode.CompletionList>(
      'vscode.executeCompletionItemProvider', doc.uri, new vscode.Position(0, 1)
    );
    assert.ok(list.items.some(i => i.label === 'function'));
  });
});

package.json contributions

{
  "contributes": {
    "languages": [{
      "id": "mylang",
      "aliases": ["MyLang", "mylang"],
      "extensions": [".my", ".myl"],
      "configuration": "./language-configuration.json",
      "icon": { "dark": "./icons/mylang-dark.png", "light": "./icons/mylang-light.png" }
    }],
    "grammars": [{
      "language": "mylang",
      "scopeName": "source.mylang",
      "path": "./syntaxes/mylang.tmLanguage.json"
    }],
    "snippets": [{
      "language": "mylang",
      "path": "./snippets/mylang.json"
    }]
  }
}

Publishing

# Package
npx vsce package
vsce ls                                     # List included files

# Publish to marketplace
vsce publish                                # Requires Personal Access Token
vsce publish minor                          # Auto-increment version

# Azure DevOps PAT: Marketplace -> Manage Publishers
# vsce login <publisher-name>

# Check
npx vsce show mylang-lang