Visual Studio Code 中的语言可以扩展吗?

2024-03-01

Scenario

我有 JSON 文件,描述了一系列要执行的任务,其中每个任务都可以引用 JSON 文件中的其他任务和对象。

{
    "tasks": [
        { "id": "first", "action": "doSomething()", "result": {} },
        { "id": "second", "action": "doSomething(${id:first.result})", "result": {} },
    ]
}

我希望同时拥有 JSON 模式验证和自定义语言文本效果,例如关键字着色,甚至在 JSON 中的字符串中支持“转到定义”。

我可以做什么

我可以创建一个扩展,为文件扩展名“*.foo.json”指定 JSON 架构。如果 vscode 将文件识别为 JSON 文件,这会在编辑器中提供架构验证和代码完成。

我还可以在“*.foo.json”文件的扩展名中创建新的“foo”语言,该文件在 JSON 字符串中具有自定义关键字着色。为此,我创建一个从 JSON.tmLanguage.json 复制的 TextMate (*.tmLanguage.json) 文件,然后修改“stringcontent”定义。

Problem

问题是,只有当我在状态栏中选择“JSON”作为文件类型时,架构验证和提示才起作用,并且只有当我在状态栏中选择“foo”作为文件类型时,自定义文本着色才起作用。

有什么办法可以同时拥有两者吗?我可以以某种方式扩展 vscode 中的 JSON 语言处理吗?


和一些来自 vscode 团队的帮助 https://github.com/Microsoft/vscode/issues/43436#issuecomment-364948943,下面的代码可以正常工作。

包.json

  ...
  "activationEvents": [
      "onLanguage:json",
      "onLanguage:jsonc"
  ],
  "main": "./src/extension",
  "dependencies": {
      "jsonc": "^0.1.0",
      "jsonc-parser": "^1.0.0",
      "vscode-nls": "^3.2.1"
  },
  ...

src/扩展.js

'use strict';

const path = require( 'path' );
const vscode = require( 'vscode' );
const { getLocation, visit, parse, ParseError, ParseErrorCode } = require( 'jsonc-parser' );

module.exports = {
    activate
};

let pendingFooJsonDecoration;

const decoration = vscode.window.createTextEditorDecorationType( {
    color: '#04f1f9' // something like cyan
} );

// wire up *.foo.json decorations
function activate ( context /* vscode.ExtensionContext */) {

    // decorate when changing the active editor editor
    context.subscriptions.push( vscode.window.onDidChangeActiveTextEditor( editor => updateFooJsonDecorations( editor ), null, context.subscriptions ) );

    // decorate when the document changes
    context.subscriptions.push( vscode.workspace.onDidChangeTextDocument( event => {
        if ( vscode.window.activeTextEditor && event.document === vscode.window.activeTextEditor.document ) {
            if ( pendingFooJsonDecoration ) {
                clearTimeout( pendingFooJsonDecoration );
            }
            pendingFooJsonDecoration = setTimeout( () => updateFooJsonDecorations( vscode.window.activeTextEditor ), 1000);
        }
    }, null, context.subscriptions ) );

    // decorate the active editor now
    updateFooJsonDecorations( vscode.window.activeTextEditor );

    // decorate when then cursor moves
    context.subscriptions.push( new EditorEventHandler() );
}

const substitutionRegex = /\$\{[\w\:\.]+\}/g;
function updateFooJsonDecorations ( editor /* vscode.TextEditor */ ) {
    if ( !editor || !path.basename( editor.document.fileName ).endsWith( '.foo.json' ) ) {
        return;
    }

    const ranges /* vscode.Range[] */ = [];
    visit( editor.document.getText(), {
        onLiteralValue: ( value, offset, length ) => {
            const matches = [];
            let match;
            while ( ( match = substitutionRegex.exec( value ) ) !== null) {
                matches.push( match );
                const start = offset + match.index + 1;
                const end = match.index + 1 + offset + match[ 0 ].length;

                ranges.push( new vscode.Range( editor.document.positionAt( start ), editor.document.positionAt( end ) ) );
            }
        }
    });

    editor.setDecorations( decoration, ranges );
}

class EditorEventHandler {

    constructor () {
        let subscriptions /*: Disposable[] */ = [];
        vscode.window.onDidChangeTextEditorSelection( ( e /* TextEditorSelectionChangeEvent */ ) => {
            if ( e.textEditor === vscode.window.activeTextEditor) {
                updateFooJsonDecorations( e.textEditor );
            }
        }, this, subscriptions );
        this._disposable = vscode.Disposable.from( ...subscriptions );    
    }

    dispose () {
        this._disposable.dispose();
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Visual Studio Code 中的语言可以扩展吗? 的相关文章

随机推荐