Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extra * characters inserted around decorator in fenced code block in JSDoc #48976

Open
rbuckton opened this issue Apr 26, 2022 · 2 comments
Open
Labels
Bug A bug in TypeScript Domain: Quick Info e.g. hover text, tool-tips, and tooltips. Effort: Moderate Requires experience with the TypeScript codebase, but feasible. Harder than "Effort: Casual". Help Wanted You can do this
Milestone

Comments

@rbuckton
Copy link
Member

rbuckton commented Apr 26, 2022

Does this issue occur when all extensions are disabled?: Yes

  • VS Code Version: 1.67.0-insider (commit: f050b17dacedba13962244b13c70084a473d08f7)
  • OS Version: Windows 11

Steps to Reproduce:

  1. Open a TypeScript file in VSCode
  2. Create a variable or type and add a JSDoc comment
  3. Inside the JSDoc comment, add a fenced code block for the TypeScript language (i.e., ```ts)
  4. Inside the fenced code block add @decorator class C {}
  5. Bring up the quick info/hover for the documented element.
  6. Observe that in the documentation, the decorator is rendered as *@decorator*.

image

NOTE: This occurs regardless as to whether the @example tag is used, as the problem always occurs when using a fenced code block.

@mjbvz mjbvz transferred this issue from microsoft/vscode May 5, 2022
@mjbvz
Copy link
Contributor

mjbvz commented May 5, 2022

Similar to #39371

Minimal code sample:

/**
 * @example
 * ```ts
 * @blablabla
 * foo()
 * ```
 */
function foo() { }

And TS response:

[Trace  - 17:39:58.92] <semantic> Response received: quickinfo (309). Request took 2 ms. Success: true 
Result: {
    "kind": "function",
    "kindModifiers": "",
    "start": {
        "line": 8,
        "offset": 10
    },
    "end": {
        "line": 8,
        "offset": 13
    },
    "displayString": "function foo(): void",
    "documentation": [],
    "tags": [
        {
            "name": "example",
            "text": [
                {
                    "text": "```ts",
                    "kind": "text"
                }
            ]
        },
        {
            "name": "blablabla",
            "text": [
                {
                    "text": "foo()\n```",
                    "kind": "text"
                }
            ]
        }
    ]
}

@mjbvz mjbvz removed their assignment May 5, 2022
@andrewbranch andrewbranch added Bug A bug in TypeScript Help Wanted You can do this Effort: Moderate Requires experience with the TypeScript codebase, but feasible. Harder than "Effort: Casual". Domain: Quick Info e.g. hover text, tool-tips, and tooltips. labels May 24, 2022
@andrewbranch andrewbranch added this to the Backlog milestone May 24, 2022
@trusktr
Copy link

trusktr commented Sep 25, 2023

Decorators are non-experimental now in TypeScript 5. Can this please be fixed? 🙏


A workaround for this is to escape the ampersand, like this: \@foo. This will leave the code formatted as is, but the drawback is that backslashes will appear in the code example. I've been doing it like so, for now telling people to ignore backslashes every time:

/**
 * Example (ignore backslashes):
 *
 * ```js
 * \@behavior
 * class MyBehavior extends Behavior {
 *   \@numberAttribute foo = 123
 * }
 * ```
 */

Output:

Screenshot 2023-09-25 at 12 29 24 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug A bug in TypeScript Domain: Quick Info e.g. hover text, tool-tips, and tooltips. Effort: Moderate Requires experience with the TypeScript codebase, but feasible. Harder than "Effort: Casual". Help Wanted You can do this
Projects
None yet
Development

No branches or pull requests

4 participants