https://github.com/estruyf/vscode-msgraph-essentials
Microsoft Graph Essentials - The Microsoft Graph Essentials extension helps you developing with the Microsoft Graph Toolkit & API.
https://github.com/estruyf/vscode-msgraph-essentials
autocomplete extension m365dev microsoft microsoft-graph microsoft-graph-toolkit snippets visual-studio-code
Last synced: 7 months ago
JSON representation
Microsoft Graph Essentials - The Microsoft Graph Essentials extension helps you developing with the Microsoft Graph Toolkit & API.
- Host: GitHub
- URL: https://github.com/estruyf/vscode-msgraph-essentials
- Owner: estruyf
- Created: 2021-03-30T17:23:21.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-02T11:27:07.000Z (almost 5 years ago)
- Last Synced: 2025-04-08T03:51:08.692Z (10 months ago)
- Topics: autocomplete, extension, m365dev, microsoft, microsoft-graph, microsoft-graph-toolkit, snippets, visual-studio-code
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-msgraph-essentials
- Size: 696 KB
- Stars: 7
- Watchers: 4
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
Microsoft Graph Essentials - Visual Studio Code Extension
The Microsoft Graph Essentials extension helps you developing with the Microsoft Graph Toolkit & API.
## Autocompletion for CSS variables and HTML attributes
The extension gives you autocompletion for all the CSS variables and HTML web component attributes.
The **CSS variables** are used to customize the styling of the MGT web components.
Example:
```CSS
mgt-person {
--person-card-display-name-font-size: 40px;
--person-card-display-name-color: #ffffff;
--person-card-title-font-size: 20px;
}
```
Using is as simple as starting to type `--`, and the extension will show you all the options.
The **HTML attributes** suggestions will automatically appear when using any of the `mgt` components in HTML files.
## Commands
Currently the extension has the following commands you can use:
- **MS Graph: Open API documentation site** (`msgraph.essentials.openDocs`)
- **MS Graph: Open Graph Explorer site** (`msgraph.essentials.openGraphExplorer`)
## Snippets
### React
| Snippet | Purpose |
|---------|---------|
| `mgt-react-tmp` | Create a new MGT React template component. |
### HTML
Snippets to insert the MGT web component in HTML:
| Snippet |
|---------|
| `mgt-agenda` |
| `mgt-login` |
| `mgt-people` |
| `mgt-people-picker` |
| `mgt-person` |
| `mgt-person-card` |
| `mgt-tasks` |
| `mgt-teams-channel-picker` |
### CSS
Snippets to quickly modify the component styles:
| Snippet |
|---------|
| `mgt-agenda` |
| `mgt-login` |
| `mgt-people` |
| `mgt-people-picker` |
| `mgt-person` |
| `mgt-person-card` |
| `mgt-tasks` |
| `mgt-teams-channel-picker` |
## Changelog
See the [changelog](./CHANGELOG.md) for the latest changes.
## Feedback and snippet ideas
Feedback 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).
