Alter Typescript Code Snippet Component to either auto wrap a class or ignore highlighting altogether

[alkrobinson]

Currently you cannot write complex typescript code unless it is wrapped in a class.

[zjkipping]

Going to close this. I feel like the snippets usually look better anyways with the class context (proper code highlighting of fields/methods):

class ExampleComponent {
  @ViewChild('modalContent') modalContent?: TemplateRef<any>;
  modalRef?: ModalRef<any>;

  constructor(private modal: Modal) { }

  openModal() {
    this.modalRef = this.modal.open(this.modalContent, {
      height: '250px',
      width: '300px',
    });
  }

  closeModal() {
    this.modalRef?.close();
  }
}

vs

@ViewChild('modalContent') modalContent?: TemplateRef<any>;
modalRef?: ModalRef<any>;

constructor(private modal: Modal) { }

openModal() {
  this.modalRef = this.modal.open(this.modalContent, {
    height: '250px',
    width: '300px',
  });
}

closeModal() {
  this.modalRef?.close();
}

Simple fix and you get the proper formatting/highlighting. There would be no easy way to "auto-wrap" code inside a class. Especially if the code is pure and shouldn't be in a class to begin with.

Unfortunately we also can't get rid of prettier since it does a lot of good work in removing "white-space" we get back from the DOM rendering of the html code snippet content. I tried looking for alternatives and didn't find much.