New commands added for quicker access to the docs

Author: estruyf

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to the "vscode-msgraph-essentials" extension will be documented in this file.
 
+## [0.0.5]
+
+- Command added to open the Microsoft Graph API documenation
+- Command added to open the Graph Explorer website
+
 ## [0.0.4]
 
 - Added HTML web component autocompletion support for attributes

README.md

@@ -42,6 +42,13 @@ The **HTML attributes** suggestions will automatically appear when using any of
 
 ![](./assets/html-attributes.png)
 
+## 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

README_TMPL.md

@@ -18,9 +18,11 @@
 
 The Microsoft Graph Essentials extension helps you developing with the Microsoft Graph Toolkit & API.
 
-## Autocompletion for CSS variabls
+## Autocompletion for CSS variables and HTML attributes
 
-The extension gives you autocompletion for all the CSS variables which are used to customize the styling of the MGT web components.
+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:
 
@@ -36,6 +38,17 @@ Using is as simple as starting to type `--`, and the extension will show you all
 
 ![](./assets/css-variables.png)
 
+The **HTML attributes** suggestions will automatically appear when using any of the `mgt` components in HTML files.
+
+![](./assets/html-attributes.png)
+
+## 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

package.json

@@ -23,10 +23,22 @@
     "eliostruyf.vscode-msgraph-autocomplete"
   ],
   "activationEvents": [
-    "*"
+    "*",
+		"onCommand:msgraph.essentials.openDocs",
+		"onCommand:msgraph.essentials.openGraphExplorer"
   ],
   "main": "./out/extension.js",
   "contributes": {
+    "commands": [
+			{
+				"command": "msgraph.essentials.openDocs",
+				"title": "MS Graph: Open API documentation site"
+			},
+			{
+				"command": "msgraph.essentials.openGraphExplorer",
+				"title": "MS Graph: Open Graph Explorer site"
+			}
+		],
     "snippets": [
       {
         "language": "typescriptreact",

src/autocomplete/css/css.variables.json

@@ -3,6 +3,17 @@ import { CssVariableProvider } from './providers/CssVariableProvider';
 import { HtmlVariableProvider } from './providers/HtmlVariableProvider';
 
 export function activate(context: vscode.ExtensionContext) {
+
+	const openDocs = vscode.commands.registerCommand('msgraph.essentials.openDocs', async () => {
+		vscode.commands.executeCommand('vscode.open', vscode.Uri.parse('https://docs.microsoft.com/en-us/graph/api/overview?view=graph-rest-1.0'));
+	});
+	context.subscriptions.push(openDocs);
+
+	const openGraphExplorer = vscode.commands.registerCommand('msgraph.essentials.openGraphExplorer', async () => {
+		vscode.commands.executeCommand('vscode.open', vscode.Uri.parse('https://developer.microsoft.com/en-us/graph/graph-explorer'));
+	});
+	context.subscriptions.push(openGraphExplorer);
+
 	const cssProvider = vscode.languages.registerCompletionItemProvider([
 		{ language: 'css' },
 		{ language: 'less' },