updated snippet to include tsdocs, added recomended extension for generating docs

Author: nmetulev

.vscode/extensions.json

@@ -6,6 +6,7 @@
     "bierner.lit-html",
     "esbenp.prettier-vscode",
     "rebornix.project-snippets",
-    "ms-vscode.vscode-typescript-tslint-plugin"
+    "ms-vscode.vscode-typescript-tslint-plugin",
+    "joelday.docthis"
   ]
 }

.vscode/snippets/typescript.json

@@ -2,24 +2,57 @@
   "MgtComponent": {
     "prefix": "mgtnew",
     "body": [
-      "import { html, css, customElement, property } from 'lit-element';",
       "import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';",
-      "import { MgtTemplatedComponent } from '../templatedComponent';",
+      "import { css, customElement, html, property } from 'lit-element';",
       "import { Providers } from '../../Providers';",
       "import { ProviderState } from '../../providers/IProvider';",
+      "import { MgtTemplatedComponent } from '../templatedComponent';",
       "",
+      "/**",
+      " *",
+      " *",
+      " * @export",
+      " * @class ${1}",
+      " * @extends {MgtTemplatedComponent}",
+      " */",
       "@customElement('${1:mgt-component}')",
       "export class ${2:MgtComponent} extends MgtTemplatedComponent {",
+      "  /**",
+      "   * Array of styles to apply to the element. The styles should be defined",
+      "   * using the `css` tag function.",
+      "   */",
+      "  static get styles() {",
+      "    return css`",
+      "      .title {",
+      "        color: red;",
+      "      }",
+      "    `;",
+      "  }",
+      "",
+      "  /**",
+      "   *",
+      "   *",
+      "   * @type {string}",
+      "   * @memberof MgtComponent",
+      "   */",
       "  @property({",
       "  attribute: 'my-title',",
       "    type: String",
       "  })",
-      "  myTitle: string = 'My First Component';",
+      "  public myTitle: string = 'My First Component';",
       "",
       "  // assignment to this property will re-render the component",
       "  @property({ attribute: false }) private _me: MicrosoftGraph.User;",
       "",
-      "  attributeChangedCallback(name, oldval, newval) {",
+      "  /**",
+      "   * Synchronizes property values when attributes change.",
+      "   *",
+      "   * @param {*} name",
+      "   * @param {*} oldValue",
+      "   * @param {*} newValue",
+      "   * @memberof MgtPersonCard",
+      "   */",
+      "  public attributeChangedCallback(name, oldval, newval) {",
       "    super.attributeChangedCallback(name, oldval, newval);",
       "",
       "    // TODO: handle when an attribute changes.",
@@ -30,13 +63,36 @@
       "    // }",
       "  }",
       "",
-      "  firstUpdated() {",
+      "  /**",
+      "   * Invoked when the element is first updated. Implement to perform one time",
+      "   * work on the element after update.",
+      "   *",
+      "   * Setting properties inside this method will trigger the element to update",
+      "   * again after this update cycle completes.",
+      "   *",
+      "   * * @param _changedProperties Map of changed properties with old values",
+      "   */",
+      "  public firstUpdated() {",
       "    Providers.onProviderUpdated(() => this.loadData());",
       "    this.loadData();",
       "  }",
       "",
+      "  /**",
+      "   * Invoked on each update to perform rendering tasks. This method must return",
+      "   * a lit-html TemplateResult. Setting properties inside this method will *not*",
+      "   * trigger the element to update.",
+      "   */",
+      "  protected render() {",
+      "    $0return html`",
+      "      <div class='root'>",
+      "        <h1 class='title'>${this.myTitle}</h1>",
+      "        ${this._me ? `Hello ${this._me.displayName}` : 'Not signed in'}!",
+      "      </div>",
+      "    `;",
+      "  }",
+      "",
       "  private async loadData() {",
-      "    let provider = Providers.globalProvider;",
+      "    const provider = Providers.globalProvider;",
       "",
       "    if (!provider || provider.state !== ProviderState.SignedIn) {",
       "      return;",
@@ -45,24 +101,8 @@
       "    // TODO: load data from the graph",
       "    this._me = await provider.graph.client.api('/me').get();",
       "  }",
-      "",
-      "  static get styles() {",
-      "    return css`",
-      "      .title {",
-      "        color: red;",
-      "      }",
-      "    `;",
-      "  }",
-      "",
-      "  render() {",
-      "    $0return html`",
-      "      <div class='root'>",
-      "        <h1 class='title'>${this.myTitle}</h1>",
-      "        ${this._me ? `Hello ${this._me.displayName}` : `Not signed in`}!",
-      "      </div>",
-      "    `;",
-      "  }",
-      "}"
+      "}",
+      ""
     ],
     "description": "Create New Mgt Component"
   }