Category: VS Code

Getting started with Azure Devops MCP in VS Code

What is MCP? It stands for Model Context Protocol and enables your AI Agent (Such as Github Copilot in VS Code) to integrate directly against other systems. One such system is Azure Devops. This tools enables Copilot to read most of your organisation Azure Devops information.

So instead of context switching and copy pasting info from Devops (error messages or User Stories information etc) you can just ask your AI agent directly in your IDE.

Examples of useful prompts for a developer: (from ChatGPT)

Pipeline & Run Inspection

“Find my latest failed run for pipeline Backend-CI and summarize which step failed, including the log excerpt around the error.”

“Get the duration trend for the last 20 runs of ClientSPA-CI and highlight the slowest job.”

“List all pipelines that have not run in the last 60 days.”

“Compare two pipeline runs (Run 1412 and Run 1477) for MyApplication-API and explain the differences in steps, duration, and triggered changes.”

Pull Requests & Repo Info

“Show me all active PRs in the repo MyApplication that have unresolved comments.”

“Which PRs were merged this week, and which work items did they close?”

“Summarize the diff for PR 84303, but only include changes in the Angular project under ClientSPA/.”

“List files in the repo MyApplication that changed in the last 48 hours.”

“Search all repositories for references to ProductRowID.”

Work Items

“Find all work items assigned to me that are blocked by another work item, and summarize the blockers.”

“Show me work items marked as ‘Ready for test’ but not linked to any build or PR.”

“List all bugs created in the last 7 days containing the word paracetamol.”

Artifacts & Variables

“Show me all variable groups used by Backend-CI.”

“Fetch the artifacts for pipeline run 292 of ClientSPA-CI, list their sizes, and highlight anything over 100 MB.”

“Find pipelines that reference the variable AzureAd:ClientSecret.”

 

Setup in VS Code:
azure-devops-mcp/docs/GETTINGSTARTED.md at main · microsoft/azure-devops-mcp

General installation guide:
https://learn.microsoft.com/en-us/azure/devops/mcp-server/mcp-server-overview?view=azure-devops#install-mcp-server

 

Log File Highlighter Extension – Visual Studio Marketplace

A Visual Studio Code extension for adding color highlighting to log files. It is based on standard conventions for log4net log files but it’s general enough to be useful for other variations of log files as well. The colors are customizable but by default the current color theme’s colors are used.

Source: Log File Highlighter – Visual Studio Marketplace

How to use underscore lib from DefinitelyTyped with typescript? – Stack Overflow

Step 1. install type definitions (e.g. vs code intellisense) to project:
npm install –save @types/underscore

(https://www.npmjs.com/package/@types/underscore)

 

Step 2. import to ts file:

import * as _ from “underscore”;

Source: How to use underscore lib from DefinitelyTyped with typescript? – Stack Overflow

Settings Sync – Visual Studio Code Extension

An extension for Visual Studio Code to sync settings between computers.

It Syncs

All extensions and complete User Folder that Contains
1. Settings File
2. Keybinding File
3. Launch File
4. Snippets Folder
5. VSCode Extensions & Extensions Configurations
6. Workspaces Folder

Source: Settings Sync – Visual Studio Marketplace

My VS Code Extensions for web and angular development

These are the VS Code extensions I use currently for web and angular development:

Auto close tag
Auto complete tag
Auto rename tag
Beautify
Colorize
Debugger for Chrome
ESLint
Expand selection to scope
Highlight matching tag
Html Boilerplate
Html css support
Html snippets
Htmltagwrap
Intellisense for css class names
Jshint
Live sass compiler
Live server
Sass
Tag-rename
TSLint
Unibeautify
Visual Studio Keymap

Search and install trough VS Code Extensions tab or search here:
https://marketplace.visualstudio.com/VSCode