{"id":16431034,"url":"https://github.com/estruyf/vscode-msgraph-essentials","last_synced_at":"2025-06-24T22:37:36.382Z","repository":{"id":80486675,"uuid":"353084135","full_name":"estruyf/vscode-msgraph-essentials","owner":"estruyf","description":"Microsoft Graph Essentials - The Microsoft Graph Essentials extension helps you developing with the Microsoft Graph Toolkit \u0026 API.","archived":false,"fork":false,"pushed_at":"2021-04-02T11:27:07.000Z","size":713,"stargazers_count":7,"open_issues_count":1,"forks_count":2,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-08T03:51:08.692Z","etag":null,"topics":["autocomplete","extension","m365dev","microsoft","microsoft-graph","microsoft-graph-toolkit","snippets","visual-studio-code"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-msgraph-essentials","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/estruyf.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["estruyf"]}},"created_at":"2021-03-30T17:23:21.000Z","updated_at":"2025-04-04T13:53:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"ef837123-a977-45fa-899e-982df91f45c5","html_url":"https://github.com/estruyf/vscode-msgraph-essentials","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/estruyf/vscode-msgraph-essentials","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/estruyf%2Fvscode-msgraph-essentials","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/estruyf%2Fvscode-msgraph-essentials/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/estruyf%2Fvscode-msgraph-essentials/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/estruyf%2Fvscode-msgraph-essentials/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/estruyf","download_url":"https://codeload.github.com/estruyf/vscode-msgraph-essentials/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/estruyf%2Fvscode-msgraph-essentials/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261769249,"owners_count":23207158,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autocomplete","extension","m365dev","microsoft","microsoft-graph","microsoft-graph-toolkit","snippets","visual-studio-code"],"created_at":"2024-10-11T08:29:00.702Z","updated_at":"2025-06-24T22:37:36.372Z","avatar_url":"https://github.com/estruyf.png","language":"TypeScript","funding_links":["https://github.com/sponsors/estruyf"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-msgraph-autocomplete\"\u003e\n    \u003cimg alt=\"Microsoft Graph Essentials\" src=\"./assets/logo-big.png\" height=\"200\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eMicrosoft Graph Essentials - Visual Studio Code Extension\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-msgraph-essentials\" title=\"Check it out on the Visual Studio Marketplace\"\u003e\n    \u003cimg src=\"https://vsmarketplacebadge.apphb.com/version/eliostruyf.vscode-msgraph-essentials.svg\" alt=\"Visual Studio Marketplace\" style=\"display: inline-block\" /\u003e\n  \u003c/a\u003e\n\n  \u003cimg src=\"https://vsmarketplacebadge.apphb.com/installs/eliostruyf.vscode-msgraph-essentials.svg\" alt=\"Number of installs\"  style=\"display: inline-block;margin-left:10px\" /\u003e\n  \n  \u003cimg src=\"https://vsmarketplacebadge.apphb.com/rating/eliostruyf.vscode-msgraph-essentials.svg\" alt=\"Ratings\" style=\"display: inline-block;margin-left:10px\" /\u003e\n\u003c/p\u003e\n\nThe Microsoft Graph Essentials extension helps you developing with the Microsoft Graph Toolkit \u0026 API.\n\n## Autocompletion for CSS variables and HTML attributes\n\nThe extension gives you autocompletion for all the CSS variables and HTML web component attributes.\n\nThe **CSS variables** are used to customize the styling of the MGT web components.\n\nExample:\n\n```CSS\nmgt-person {\n  --person-card-display-name-font-size: 40px;\n  --person-card-display-name-color: #ffffff;\n  --person-card-title-font-size: 20px;\n}\n```\n\nUsing is as simple as starting to type `--`, and the extension will show you all the options.\n\n![](./assets/css-variables.png)\n\nThe **HTML attributes** suggestions will automatically appear when using any of the `mgt` components in HTML files.\n\n![](./assets/html-attributes.png)\n\n## Commands\n\nCurrently the extension has the following commands you can use:\n\n- **MS Graph: Open API documentation site** (`msgraph.essentials.openDocs`)\n- **MS Graph: Open Graph Explorer site** (`msgraph.essentials.openGraphExplorer`) \n\n## Snippets\n\n### React\n\n| Snippet | Purpose |\n|---------|---------|\n| `mgt-react-tmp` | Create a new MGT React template component. |\n\n### HTML\n\nSnippets to insert the MGT web component in HTML:\n\n| Snippet |\n|---------|\n| `mgt-agenda` |\n| `mgt-login` |\n| `mgt-people` |\n| `mgt-people-picker` |\n| `mgt-person` |\n| `mgt-person-card` |\n| `mgt-tasks` |\n| `mgt-teams-channel-picker` |\n\n### CSS\n\nSnippets to quickly modify the component styles:\n\n| Snippet |\n|---------|\n| `mgt-agenda` |\n| `mgt-login` |\n| `mgt-people` |\n| `mgt-people-picker` |\n| `mgt-person` |\n| `mgt-person-card` |\n| `mgt-tasks` |\n| `mgt-teams-channel-picker` |\n\n## Changelog\n\nSee the [changelog](./CHANGELOG.md) for the latest changes.\n\n## Feedback and snippet ideas\n\nFeedback and/or ideas are always welcome. Please submit them via creating an issue in the extension repository: [issue list](https://github.com/estruyf/vscode-msgraph-essentials/issues).\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#\"\u003e\n      \u003cimg src=\"https://estruyf-github.azurewebsites.net/api/VisitorHit?user=estruyf\u0026repo=vscode-msgraph-essentials\u0026countColor=%23161938\" /\u003e\n   \u003c/a\u003e\n\u003c/p\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Festruyf%2Fvscode-msgraph-essentials","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Festruyf%2Fvscode-msgraph-essentials","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Festruyf%2Fvscode-msgraph-essentials/lists"}