The term "containerName" in SymbolInformation is utilized to represent the hierarchy of

In my quest to make the code outline feature work for a custom language, I have made progress in generating symbols and displaying functions in the outline view. However, my next challenge is to display variables under the respective function in the outline view. While my symbols seem to have the correct containerName value, I am currently stuck with a flat outline view.

The following is the current code snippet from extension.ts:

'use strict';
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    context.subscriptions.push(vscode.languages.registerDocumentSymbolProvider(
        {language: "as"}, new FooDocumentSymbolProvider()
    ));
}

class FooDocumentSymbolProvider implements vscode.DocumentSymbolProvider {
    public provideDocumentSymbols(document: vscode.TextDocument, token: vscode.CancellationToken): Thenable<vscode.SymbolInformation[]> {
        return new Promise((resolve, reject) => {
            var symbols = [];
            var sym = "";
            for (var i = 0; i < document.lineCount; i++) {
                var line = document.lineAt(i);
                if (line.text.startsWith(".PROGRAM")) {
                    var sym = "";
                    symbols.push({
                        name: line.text.substr(9).trimRight(),
                        kind: vscode.SymbolKind.Function,
                        containerName: sym,
                        location: new vscode.Location(document.uri, line.range)
                    });
                    sym = line.text.substr(9).trimRight();
                }
                if (line.text.includes("CALL") && !(line.text.startsWith(".*"))) {
                    symbols.push({
                        name: line.text.substr(0).trimLeft(),
                        kind: vscode.SymbolKind.Module,
                        containerName: sym,
                        location: new vscode.Location(document.uri, line.range)
                    });
                }
            }
            resolve(symbols);
        });
    }
}

    

UPDATE #2:

public provideDocumentSymbols(document: vscode.TextDocument, token: vscode.CancellationToken): Thenable<vscode.DocumentSymbol[]> {
        return new Promise((resolve, reject) => {
            var symbols = [];
            var sym = "";
            for (var i = 0; i < document.lineCount; i++) {
                var line = document.lineAt(i);
                if (line.text.startsWith(".PROGRAM")) {
                    var sym = "";
                    var childrens = [];
                    symbols.push({
                        name: line.text.substr(9).trimRight(),
                        kind: vscode.SymbolKind.Function,
                        children: [],
                        range: line.range,
                        detail: "",
                        selectionRange: line.range
                    });
                    sym = line.text.substr(9).trimRight();
                }
                if (line.text.includes("CALL") && !(line.text.startsWith(".*"))) {
                    symbols.push({
                        name: line.text.substr(0).trimLeft(),
                        kind: vscode.SymbolKind.Module,
                        children: [],
                        range: line.range,
                        detail: "",
                        selectionRange: line.range
                    });
                }
            }
            resolve(symbols);
        });
    }

    

Answer №1

containerName isn't actually the key player in determining the hierarchy. It's more like an added "detail" that shows up in a faded font under the symbol.

The real solution is to steer clear of using SymbolInformation altogether, and instead opt for the newer DocumentSymbol API (remember when document symbol providers didn't support hierarchies until it was introduced in version 1.25). Each DocumentSymbol can have an array of children, making it easy to represent the hierarchy as a tree structure.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error in Typescript: Using forEach method - 'string' type cannot be assigned to 'never' type

I encountered an issue with this code where it's giving me an error message "Type 'string' is not assignable to type 'never'" at the specified comment. type serviceInfoType = { PORT: number; HOST: string; MS_NAME: strin ...

Error Alert: Next.js TypeScript is reporting that the necessary packages are missing from your setup

As I work on developing a basic Next.js website using their TypeScript starter, everything was going smoothly with the 'yarn dev' command. However, out of nowhere, I started encountering an error message whenever I tried to run 'yarn dev&apo ...

Breaking down types in Typescript: Extracting individual types from an object containing multiple objects

Having a query: const queries = { light: { a... b... }, dark: { a... b... c... d... }, The react element requires a colors parameter that corresponds to one of the themes in the above object, with each theme containing a un ...

Angular displays error ERR_UNKNOWN_URL_SCHEME when attempting to retrieve an image saved in a blob

As I transition my app from Electron to Angular, one of my main objectives is to display an image uploaded by a user. Here's how I attempted to achieve this: page.component.ts uploadImageFile(){ fileDialog({}, files =>{ //Utilizing the fileDi ...

Angular 7: The Pitfalls of Incorrect URL Concatenation

After navigating to a different page within my project, an unexpected 404 error with the wrong URL appears in the console. Here's what it looks like: https://localhost:4420/example.com/api/customers However, it should actually look like this: h ...

The system now alerts that there are no pending migrations when trying to execute them, which previously ran smoothly without any issues

I am experiencing an issue with my web app where the migrator I have written to create tables and relations is not being recognized by TypeORM, preventing it from running. Here is a glimpse of my file structure (specifically the migrations): src> Data ...

Guide to leveraging various build targets while executing the capacitor sync command within an Angular project

In my current Angular project, I have been utilizing Capacitor. Within my angular.json file, I have set up various build targets such as development, staging, and production. To deploy with different configurations, I use the command ng build --configurati ...

Retrieve every item in a JSON file based on a specific key and combine them into a fresh array

I have a JSON file containing contact information which I am retrieving using a service and the following function. My goal is to create a new array called 'contactList' that combines first names and last names from the contacts, adding an &apos ...

What is the best way to retrieve matching values based on IDs from an imported table?

How can I retrieve values that match on ID with another imported table? My goal is to import bank details from another table using the ID and display it alongside the companyName that shares the same ID with the bank details. I've attempted several o ...

Breaking down an object using symbols as keys in Typescript

I'm encountering an error when running this code Type 'symbol' cannot be used to index type '{ [x: string]: string; }'.: let symbol = Symbol() let obj = { [symbol] : 'value'} let { [symbol]: alias } = obj // ...

The name 'const' is missing or not found

While working on my Angular application, I attempted to utilize the Typescript 3.4 feature known as "const assertion" in the following manner: const counterSettingsDefaults = { setTo: 10, tickSpeed: 200, increment: 1 } as const; Unfortunately, this resul ...

Is it possible to obtain Literal types for object keys dynamically in typescript?

I am looking to extract the type of object keys. Below is a generic function for objects with keys as strings: type GenericInput = { [key:string]: {value:string,type:HTMLInputTypeAttribute,placeholder:string,min?:number,max?:number,required?:boolean, err ...

What is the method for ensuring TypeScript automatically detects the existence of a property when an object is statically defined?

In my software, I have an interface that serves as a base for other types. To simplify things for this discussion, let's focus on one specific aspect. This interface includes an optional method called getColor. I am creating an object that implements ...

Creating a React component with a column allowing multiple checkbox selections in NextUI table

Setting up multiple "checkbox" columns in a table using the NextUI table has been my current challenge. Each row should have selectable checkboxes, and I want these selections to be remembered when navigating between pages, running searches, or removing co ...

How can I resolve a promise that is still pending within the "then" block?

Here is a piece of code that I have written: fetch(`${URL}${PATH}`) .then(res => { const d = res.json(); console.log("The data is: ", d); return d; }) When the code runs, it outputs The data is: Promise { <pending> ...

The implementation of CommonJS modules allows for efficient modularization

While using Nx for my Angular workspace, I noticed something that sparked a question in my mind. Why is it necessary to use CommonJS modules in all tsconfig.spec.json files for libs? Looking at Nx examples, I observed that not all libs include it, only app ...

Can we create an alias for the import path in TypeScript?

import A = require('../../distant/PathToA'); import B = require('./different/path/PathToB'); I am utilizing external modules (commonJS) and browserify, with WebStorm as my editor. If this were just regular javascript, there are severa ...

I possess an item, but unfortunately, I am only able to save the first object from this possession

I have an object, but I can only save the first item from this object. Interface: export interface PhotoToCreate { albumName: string; albumTitle: string; ImageNameO : string; imageNameT : string; } Component import { Component, OnI ...

Problem with Infragistics radio button not firing change event when value is set manually

After migrating from Angular 11 to 17, I encountered a strange issue with my application's Infragistics radio button. The change event for the radio button does not trigger manually for the first time, but it works fine when changed through the applic ...

Webpack is throwing an error due to the Vue component type being labeled as "any"

When using ts 4.2.4 and Vue3, I encountered a strange error while building my vue project: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a2a7aeaaededb3a2a0a083f3edf2edf3">[email protected]</a> build > v ...