question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TypeScript class method decorator not rendering properly in version >= 1.63.2

See original GitHub issue

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

  • VS Code Version: 1.63.2
  • OS Version: Darwin x64 20.6.0

Steps to Reproduce:

  1. Write a JSDoc string with an example that involves a decorator:
class MyClass {
   /**
   * This is an example of a decorator.
   * 
   * @example
   * ```typescript
   * import { MyClass } from '@org/myClass';
   * 
   * const myClass = new MyClass();
   * 
   * class MyAwesomeClass {
   *   @myClass.decorateMethod()
   *   public doStuff() {
   *     ...
   *   }
   * }
   * 
   * ```
   * 
   * @decorator Class
   */
   public decorateMethod(): MyType {
     return (target, _propertyKey, descriptor) => {
       const originalMethod = descriptor.value;

       descriptor.value = ((event, context, callback) => {
         return originalMethod?.apply(target, [ event, context, callback ]);
       });

       return descriptor;
     };
   }
}
  1. Use decorator / hover on method declaration:

image

As you can see from the screenshot above the example appears not to be rendered correctly with two main issues:

  • Decorator is rendered on a new line & wrapped with *
  • All code indentation after the decorator is lost

Before opening this issue I’ve searched the repo (& the TypeScript one) and found a series of other issues. Most of them have been closed as duplicates or as fixed but as the above shows the issue is still there. Examples:

If the issue has been indeed fixed, could you please take a second to clarify what’s the intended usage to allow VS Code to render decorators correctly? I’m aware that decorators are an experimental feature, if that’s the reason why this is not supported could you please state it?

Thanks in advance.

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:2
  • Comments:11 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
trusktrcommented, Jan 2, 2023

JSDoc itself is still active, and the community has open issues for this:

https://github.com/jsdoc/jsdoc/issues/1521 https://github.com/jsdoc2md/jsdoc-to-markdown/issues/209

@hegemonic do you have any opinions on decorator support?

I believe we should all aim to be on the same page to avoid community fracture. It would be so much better to coalesce into a common future.

In the worst case, a tool like better-docs would have to take incompatible syntax and convert it to compatible syntax, which wouldn’t be ideal.

1reaction
sandersncommented, Sep 12, 2022

Update: the fix at #50677 correctly makes single and triple backticks multiline, but this breaks unclosed backticks in the tests and would break them in the compiler source code itself. We’re discussing whether to take the change or not.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Documentation - Decorators - TypeScript
A Decorator is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter. Decorators use...
Read more >
Typescript Method Decorator has Strange Behaviour
For now, there's not a workaround I like much. Class decorator mutation can be simulated soundly just by using the decorator as a...
Read more >
How To Use Decorators in TypeScript - DigitalOcean
This tutorial will show you how create your own decorators in TypeScript for classes and class members, and also how to use them....
Read more >
Decorators do not work as you might expect
Tagged with typescript, webdev, javascript, angular. ... The @Component() is an excellent example for a class decorator, and it's one of the ...
Read more >
Tracer | aws-lambda-powertools-typescript
FYI: Decorator might not render properly in VSCode mouse over due to ... your Lambda handler you can use the methods in the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found