We should add a check to detect whether there is a file in the current workspace that resembles an rc file. If a file doesn't exist we can suggest to the developer to create one and help with that.

Update snippets to use v0.17.0 schemas

After #38 is implemented, we should detect if the version used in the schema matches the installed version of proxy.

If the version does not match, we should suggest the correct version and provide a code action to make this a one click operation.

From @waldekmastykarz

When creating a config file using devproxy-config-file snippet an error is displayed on the urlsToWatch array, however entering a string into the array doesn't remove the error.

Using VSCode Insiders on macOS

Raised from #29

Update the following snippets

• devproxy-config-file
• devproxy-request
• devproxy-response
• devproxy-plugin-crud-api-file
• devproxy-plugin-generic-random-error-file
• devproxy-plugin-rate-limiting-file

some snippets could provide even more help and handy behavior for the user.

for example the snippet devproxy-plugin-crud-api-action creates the following part of json

   {
        "action": "",
        "method": "",
        "query": "",
        "url": ""
    }

but in a way the user works doesn't stop there. the user will need to still go over each property and fill it.
I was thinking we could improve that adding tabstops/placeholders to some snippets (like this one). You may do that by adding the $1 $2 etc to your snippet definition.
https://code.visualstudio.com/docs/editor/userdefinedsnippets#_tabstops

as an example the CLI for Microsoft 365 VS Code extension uses tab stops in every snippets that have some required option that needs to be set. That way after the snippet code is added the user may use tab to move between next options. Like this

We currently ship file snippets but they just provide the basic shape. We should create snippets that are more like examples, so we can show how a completed file would look like, the developers can remove and edit to their own needs.

We should check to see if proxy is installed on the local machine.

If proxy is not installed we can suggest to download the version relevant to the current OS.

We provide schemas to make it easier for developers to build out their own files, however the schema property is optional.

We should suggest that when a file looks like something related to proxy we should suggest to add the relevant schema to the file for the best experience.

The loading icon is more appropriate as nothing is being synced.

Currently if the JSON file contains a plugins array and urlsToWatch array, we identify the file as a config file. urlsToWatch is optional so should be removed from this check.

From @waldekmastykarz

1. Create new file
2. Switch to JSON language
3. Press Ctrl + Space to open context menu
4. Use devproxy-config-file snippet to create config
5. Press Ctrl + Space to open context menu inside plugins array
6. Only empty object appears (from schema), no snippets appear

Using latest VSCode insiders build on macOS

The rate-limiting-file-schema snippet adds schema for the CrudApiPlugin

• Rename the repo
• Update repo description
• Update readme
• Update package,json

It would be useful to show the proxy status in VS Code, this could just be a visual indicator at first with no functionality, the Status Bar would be a good place to add this indicator.

https://code.visualstudio.com/api/ux-guidelines/status-bar

We can check for the devproxy process using the following code:

import { exec } from 'child_process';
import { promisify } from 'util';

const execAsync = promisify(exec);

async function isProcessRunning(processName: string): Promise<boolean> {
  const command = process.platform === 'win32' ? 'tasklist' : 'ps aux';
  const { stdout } = await execAsync(command);
  return stdout.includes(processName);
}

async function checkProcess() {
  const isRunning = await isProcessRunning('devproxy');
  console.log(`Is 'devproxy' running? ${isRunning ? 'Yes' : 'No'}`);
}

checkProcess().catch(console.error);

Remove

• rate
• labelMode
• logLevel

https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/technical-reference/entramockresponseplugin

• Add snippet
• Add code lens documentation link
• Add pluginSnippet reference

Add snippets to create the following files along with snippets for their schema.

• Config
• ConfigSchema
• Errors
• ErrorsShema
• Mocks
• MocksSchema
• CRUDAPI
• CRUDAPISchema
• RateLimiting
• RateLimitingSchema

hi 👋
For starters awesome work 🤩 and I am already in love with this extension 👏.
While playing around with it I have a looooot of ideas and I thought that instead of creating separate issues for each of those and making a mess in the issues list (sorry if I already did 😉🙏) I will create this one single issue with all of the ideas I currently have and you may decide on your own which are valuable and which totally are out of scope and make no sense at all 😅.

1. validate setup - I was wondering if the extension could have a kind of valdiate devproxy setup VS Code command. So when executed it would check in the user preferable terminal (based on VSCode settings) if devproxy (for example devproxy --help) works and is recognizable. If no the extension could present a notify that your devproxy is not properly setup with a button that when clicked would check if user is on win or mac and what shell and would run the install script for the user like (Invoke-WebRequest https://aka.ms/devproxy/setup.ps1).Content | Invoke-Expression in the console. If yes the extension could also present a notify that you are ready to go. Depending on how far this extension would go if in future it would extend VS code with some UI this command may be 'attached' to any button, like in the extension welcome experience to a button like 'validate your devproxy setup'. To provide an example I would say this could be a similar feature like the viva toolkit validates if the user has correct dependencies installed to start doing SPFx development https://github.com/pnp/vscode-viva/wiki/5.1-Validate-and-set-up-a-local-workspace

2. samples/presets gallery - I was thinking that the extension could have a command like open samples gallery that would open a dedicated webview in the editor window presenting all the dev proxy samples/presets from the pnp repo https://github.com/pnp/proxy-samples. The user should be able to get quick details about each sample, go to github repo or download it locally to the current workspace with a single click all without leaving VS Code. nowadays it became a quite common feature, for example Teams Toolkit has it's samples gallery, or PnP PS extension or Viva Toolkit as well

3. add a quick action to run devproxy with a mock - add a editor action to the toolbar visible when someone has a mock json file opened in the editor. The action should allow to run the devproxy command in the console with the currently opened mock.

4. add a command to start devproxy - this is probably and overkill but I was wondering if it worth having VS Code commands that will start devprox with a specific setting. For example the extension could have a command like run devproxy and record. After running it the extension would ask the user additional questions like "provide file name for the summary report (default empty)" and after that VS Code could run the command devproxy --record --summary-file-path report.md in the user console

5. add an icon to the status bar that would indicate if the proxy is working or not - this might be tricky as I am not sure how to do that just now 😅 I would need to do a bit of research 😉.

Ok this is just some ideas I had, I have some other ideas as well but those base on a concept that the VS Code extension would have some UI 🤔. I hope this will be of any help

Cheers 👍

BTW before I will be the person that just adds a lot of feedback and then doesn't provide any help at all 😅 I am wondering if you consider to be open for contributions? I would love to help out

urlsToWatch for Graph plugins are missing a comma at the end of the second to last entry

• GraphClientRequestIdGuidancePlugin
• GraphMockResponsePlugin
• GraphRandomErrorPlugin
• GraphSdkGuidancePlugin
• GraphSelectGuidancePlugin
• ODSPSearchGuidancePlugin

Plugins with no config sections have dangling commas after pluginPath

• ODataPagingGuidancePlugin
• OpenApiDocGeneratorPlugin
• RetryAfterPlugin

If a plugin is enabled and has an issue in it's configuration we show an error.

If the plugin is disabled, we also show an error.

We should update the logic to show warnings when the plugin is disabled.

If you remove the node that has the error, the diagnostic is removed, however if you remove all the context of the file the diagnostic remains in the editor.

From @waldekmastykarz

if you start from the snippet, you have it already, but if you have a file already, it's a PITA to figure out the schema URL

Let's create the following snippets for each schema URL

Currently we show an error when the urlsToWatch array is empty, however

• urlsToWatch is optional
• urlsToWatch can be defined on a plugin instance

We should update the check so that an error is shown if plugins don't have urlsToWatch set and there is no global array set, or the global array is empty.

It is not possible to include markdown in Diagnostics messages which would be the best place to add links to documentation when errors and warnings occur.

As a work around, we should add a code lens action above the name property in the plugin instance which opens the integrated browser in VSCode and displays the reference page for the plugin.

Once #37 is implemented, we should obtain the currently installed version.

If the version installed is not the latest, we should suggest upgrading to the latest version.

https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/technical-reference/apicenteronboardingplugin

• Add snippet
• Add code lens documentation link
• Add pluginSnippet reference

In VS Code it is possible to introduce a walkthrough for the user which shows up one time on first startup of the extension just after user installs it from the marketplace, it's also possible to start a walkthrough manually by the user if needed

https://code.visualstudio.com/api/ux-guidelines/walkthroughs

It's a perfect place to introduce additional guide and instructions for the user not only about the vs code extension itself but in this case it could have a step that instructs how to get and download toe proxy with an action button for that, and the references to the guide.

• mock
• response
• request
• request header

If we get an error saying that a configSection is missing for a plugin that requires it, we should provide a quick fix to add a default configSection, this will be much easier than adding a configSection using a snippet.

Now that we can detect dev proxy installations, we should provide an easy way to start dev proxy from within VS code when a config file is in the active window.

There are a couple of ways we could achieve this

• Add a code lens to the top of the editor
• Add a command to the status bar

Either of these approaches should open a visible terminal and start the dev proxy process using the config file. To stop the proxy, users would issue Ctrl + C as normal in the terminal window.

We treat all plugins the same, if they have accept a configSection we make it mandatory, however the MinimalPrermissionsGuidancePlugin does not require a configSection to work, so we don't need to raise an error for this plugin if a configSection does not exist.

From @waldekmastykarz

If you have a beta version installed, you will get a message to update to the latest version.

We should support beta versions, so that this message does not appear, however if you are using an old beta version, we should provide a message to upgrade to the latest beta version.

We should also show the full beta version in the status bar, e.g. v0.15.0-beta.5

• Create a config file using the devproxy-config snippet
• Add a plugin using a snippet
• urlsToWatch error will now display
• Close config file
• Create new file
• The diagnostics error are shown from the previous document

From @waldekmastykarz

The snippet has a new line feed and extra tabs, assuming that you don't expand the mocks array before adding the snippet.

As the user behaviour is to automatically expand the array first, then add the mock via the snippet. we should ensure that arrays and objects in the snippets are automatically expanded and remove the new line and extra tabs so indenting is correct.

When you add a plugin that requires a config section we display an error. In the tooltip, the user can choose quick fixes to resolve the problem. We should add a Code Action to provide an action that the user can click to add the config section to the current document without needing to use a snippet.

https://code.visualstudio.com/api/references/vscode-api#CodeAction

https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/technical-reference/mockrequestplugin

• Add snippet
• Add code lens documentation link
• Add pluginSnippet reference

The JSON validation works really nice and as you may see it validates the empty URL.

but for some reason it does not validate the empty plugin array 🤔. Not sure what am I doing wrong.

The following plugins have optional config sections

• CachingGuidancePlugin
• DevToolsPlugin
• ExecutionSummaryPlugin
• GraphRandomErrorPlugin
• LatencyPlugin
• MinimalPermissionsGuidancePlugin
• MinimalPermissionsPlugin

Raised from #24

Make it easy to push new versions to the marketplace