Visual Studio Code能否扩展语言能力？含JSON任务文件定制需求

Let’s break down how to achieve both JSON Schema validation and custom editor features like keyword coloring and "go to definition" for your task-based JSON files in VS Code:

1. Set Up JSON Schema Validation for *.foo.json #

You’re already on the right track targeting the *.foo.json extension—here’s how to formalize this setup:

• Define your JSON Schema: Create a schema file (e.g., foo-task-schema.json) that describes your task structure, including rules for cross-references between tasks/objects. For example, if tasks use a dependsOn field to reference other task IDs, use the $ref keyword to enforce valid references:

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "tasks": {
      "type": "object",
      "additionalProperties": {
        "type": "object",
        "properties": {
          "dependsOn": {
            "type": "array",
            "items": {
              "type": "string",
              "$ref": "#/properties/tasks" // Enforces references to existing tasks
            }
          },
          "description": { "type": "string" }
        },
        "required": ["description"]
      }
    }
  }
}

• *Link the schema to .foo.json: Use workspace settings to associate your schema with the file extension. Add this to .vscode/settings.json:

"json.schemas": [
  {
    "fileMatch": ["*.foo.json"],
    "url": "./foo-task-schema.json" // Path to your local schema file
  }
]

Once configured, VS Code will automatically validate your *.foo.json files and provide code completion based on your schema rules.

2. Add Custom Language Features (Syntax Highlighting & Go to Definition) #

JSON Schema alone won’t handle custom coloring or cross-file/intra-file "go to definition"—you’ll need a small VS Code extension to add these capabilities:

a. Scaffold a Basic Extension #

1. Install the extension generator tools:

npm install -g yo generator-code

2. Run yo code, select "New Language Support", and set the language ID to something like foo with the extension .foo.json.

b. Implement Syntax Highlighting #

Open the generated syntaxes/foo.tmLanguage.json file and define regex patterns to color your task-specific keywords. For example:

{
  "patterns": [
    {
      "name": "keyword.control.foo-task",
      "match": "\"(dependsOn|taskId|description)\""
    },
    {
      "name": "string.reference.foo-task-id",
      "match": "\"dependsOn\"\\s*:\\s*\\[\\s*\"([^\"]+)\""
    }
  ],
  "scopeName": "source.foo.json"
}

This will color core task keywords and highlight task IDs in dependsOn arrays.

c. Add "Go to Definition" Functionality #

To enable jumping from a task reference to its definition, add a definition provider in your extension’s extension.ts:

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  context.subscriptions.push(
    vscode.languages.registerDefinitionProvider('foo', {
      provideDefinition(document: vscode.TextDocument, position: vscode.Position) {
        // Get the task ID reference under the cursor
        const wordRange = document.getWordRangeAtPosition(position, /[^\"]+/);
        if (!wordRange) return undefined;
        const targetTaskId = document.getText(wordRange);

        // Search the document for the matching task definition
        const fullText = document.getText();
        const taskDefRegex = new RegExp(`\"${targetTaskId}\"\\s*:\\s*{`, 'g');
        let match;
        while ((match = taskDefRegex.exec(fullText)) !== null) {
          const defPosition = document.positionAt(match.index);
          return new vscode.Location(document.uri, new vscode.Range(defPosition, defPosition));
        }
        return undefined;
      }
    })
  );
}

Update your package.json to declare the language activation event:

{
  "contributes": {
    "languages": [
      {
        "id": "foo",
        "extensions": [".foo.json"],
        "configuration": "./language-configuration.json"
      }
    ]
  },
  "activationEvents": ["onLanguage:foo"]
}

d. Test the Extension #

Press F5 to launch the Extension Development Host. Open a *.foo.json file, and you’ll see:

• Custom syntax highlighting for your task keywords
• The ability to right-click a task ID in dependsOn and jump to its definition.

3. Combine Both Features #

Since your extension targets *.foo.json, VS Code will apply both the JSON Schema validation and your custom language features to the same files—giving you a fully integrated editing experience.

内容的提问来源于stack exchange，提问作者Matt Miller