DEV Community: Valiantsin Lutchanka

My first VSCode extension playground

Valiantsin Lutchanka — Tue, 24 Feb 2026 20:21:34 +0000

What is it about?

The idea of my first VSCode extension was inspired by weathr cli app from this project - https://github.com/Veirt/weathr.

I know there are plenty of different extensions already on the market, but this one is just my playground to try to do something new 😄.

I was planning to build it for a Github Copilot CLI challenge, but was late hehe, so I did it just for fan.

The process of extension creation is quite simple, having all the AI power at your fingertips, you can do so in a couple of hours - it is just a matter of having an idea to implement. My colleague Copilot has done all the hard work, so I was just sitting in a sidecar giving advices 😂.

So if you would like to create one by your own, the process is simple.

First you will need actually to develop one.

Working example repo can be found here

My idea was to have a realtime weather app in a bottom panel along with the terminal and in a side panel where explorer tab of VSCode is which will look like this:

Features

It has two modes - canvas or pixel modes.

🌦️ Live weather animations — rain, snow, thunderstorm, drizzle, fog, clear, partly-cloudy, overcast
🌅 Day/night cycle — stars, moon, fireflies at night; sun, birds, airplanes during the day
📍 Flexible location — auto-detect via IP, specify by town/postcode, or use coordinates
🏠 Animated scene — house with chimney smoke, trees, fence, road
🍂 Falling leaves — optional autumn leaves animation
⚡ Thunderstorm lightning — screen flashes, animated bolts
🌡️ HUD overlay — condition, temperature, wind, precipitation, coordinates
🎨 Configurable — all weathr config options exposed as VS Code settings

How to use it?

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
Run Weathr: Start Weather Animation
Or find Weathr in the bottom panel tabs

Commands

Command	Description
`Weathr: Start Weather Animation`	Open the animation panel
`Weathr: Refresh Weather`	Re-fetch weather from Open-Meteo
`Weathr: Simulate Weather Condition`	Pick any weather condition to preview
`Weathr: Toggle HUD`	Show/hide the status bar overlay
`Weathr: Toggle Falling Leaves`	Enable/disable autumn leaves
`Weathr: Set Location by Town or Postcode`	Manually set location (e.g., "London" or "SW1A 1AA")

Configuration

All settings are under vscode-weathr.* in VS Code Settings:

Setting	Default	Description
`location.mode`	`auto`	Location mode: `auto` (IP), `manual` (town/postcode), `coordinates`
`location.manual`	``	Manual location string (e.g., "London" or "SW1A 1AA"), used when mode is `manual`
`location.latitude`	`36.60`	Latitude (–90 to 90)
`location.longitude`	`4.52`	Longitude (–180 to 180)
`location.hide`	`false`	Hide coordinates in HUD
`hideHUD`	`false`	Hide weather HUD overlay
`units.temperature`	`celsius`	`celsius` or `fahrenheit`
`units.windSpeed`	`kmh`	`kmh`, `ms`, `mph`, `kn`
`units.precipitation`	`mm`	`mm` or `inch`
`showLeaves`	`false`	Autumn leaves animation
`animationSpeed`	`normal`	`slow`, `normal`, `fast`
`theme`	`auto`	`auto`, `dark`, `light`

Weather Conditions (Simulate)

Clear skies: clear, partly-cloudy, cloudy, overcast
Precipitation: fog, drizzle, rain, freezing-rain, rain-showers
Snow: snow, snow-grains, snow-showers
Storms: thunderstorm, thunderstorm-hail

Setting Location

You have three options to set your location:

1. Auto-detect (default)

Set location.mode to auto to detect your location using your IP address.

2. Manual location (town or postcode)

Run the Weathr: Set Location by Town or Postcode command and enter a location name:

Town names: "London", "New York", "Tokyo"
Postcodes: "SW1A 1AA", "10001", "100-0001"

The location will be automatically geocoded and weather will update immediately.

3. Manual coordinates

Set location.mode to coordinates and configure:

location.latitude — latitude of your location
location.longitude — longitude of your location

Configuration Example

`json { "vscode-weathr.location.mode": "manual", "vscode-weathr.location.manual": "Paris", "vscode-weathr.units.temperature": "celsius", "vscode-weathr.units.windSpeed": "kmh", "vscode-weathr.units.precipitation": "mm" } `

Or use coordinates-based location:

`json { "vscode-weathr.location.mode": "coordinates", "vscode-weathr.location.latitude": 40.7128, "vscode-weathr.location.longitude": -74.0060, "vscode-weathr.units.temperature": "celsius", "vscode-weathr.units.windSpeed": "kmh", "vscode-weathr.units.precipitation": "mm" } `

Geocoding

When using manual location mode, town/postcode names are converted to coordinates using the Nominatim API (free OpenStreetMap geocoding service). No API key is required.

Here's the full publishing process for a VS Code extension:

Install the packaging tool:

`
npm install -g @vscode/vsce

Create a publisher account at marketplace.visualstudio.com/manage — sign in with a Microsoft account.
Create a Personal Access Token (PAT):

Go to dev.azure.com → your org → User Settings → Personal Access Tokens
New token → set Marketplace scope to Manage
Copy the token (you only see it once)

`
vsce login YOUR_PUBLISHER_NAME

paste your PAT when prompted

Make sure package.json has the required fields: json{ "publisher": "your-publisher-name", "name": "vscode-,name.", "displayName": "Weathr", "description": "Meaningful description", "version": "1.0.0", "icon": "icon.png", "repository": { "type": "git", "url": "https://github.com/you/vscode-weathr" }, "license": "MIT", "engines": { "vscode": "^1.80.0" } }

The icon.png must be 128×128px and is required — the publish will fail without it.

Package and inspect it first (optional but recommended):

`
vsce package

produces vscode-weathr-1.0.0.vsix — you can install it locally to

test:

`
code --install-extension vscode-weathr-1.0.0.vsix

Publish:

`
vsce publish

Or publish and bump the version in one command:

` vsce publish minor # 1.0.0 → 1.1.0 vsce publish patch # 1.0.0 → 1.0.1 `

Write a good README.md — it becomes the marketplace listing page. Include a screenshot or GIF of the extension in action, which makes a big difference for discoverability.

After publishing it takes about 5 minutes to appear on the marketplace. You can manage it, see install counts, and publish updates at marketplace.visualstudio.com/manage.

Hope it will be useful for anyone who wants to create and publish his/her own extension! 😄

My first VSCode extension playground

Valiantsin Lutchanka — Tue, 24 Feb 2026 20:21:34 +0000

What is it about?

The idea of my first VSCode extension was inspired by weathr cli app from this project - https://github.com/Veirt/weathr.

I know there are plenty of different extensions already on the market, but this one is just my playground to try to do something new 😄.

I was planning to build it for a Github Copilot CLI challenge, but was late hehe, so I did it just for fan.

So if you would like to create one by your own, the process is simple.

First you will need actually to develop one.

Working example repo can be found here

My idea was to have a realtime weather app in a bottom panel along with the terminal and in a side panel where explorer tab of VSCode is which will look like this:

Features

It has two modes - canvas or pixel modes.

🌦️ Live weather animations — rain, snow, thunderstorm, drizzle, fog, clear, partly-cloudy, overcast
🌅 Day/night cycle — stars, moon, fireflies at night; sun, birds, airplanes during the day
📍 Flexible location — auto-detect via IP, specify by town/postcode, or use coordinates
🏠 Animated scene — house with chimney smoke, trees, fence, road
🍂 Falling leaves — optional autumn leaves animation
⚡ Thunderstorm lightning — screen flashes, animated bolts
🌡️ HUD overlay — condition, temperature, wind, precipitation, coordinates
🎨 Configurable — all weathr config options exposed as VS Code settings

How to use it?

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
Run Weathr: Start Weather Animation
Or find Weathr in the bottom panel tabs

Commands

Command	Description
`Weathr: Start Weather Animation`	Open the animation panel
`Weathr: Refresh Weather`	Re-fetch weather from Open-Meteo
`Weathr: Simulate Weather Condition`	Pick any weather condition to preview
`Weathr: Toggle HUD`	Show/hide the status bar overlay
`Weathr: Toggle Falling Leaves`	Enable/disable autumn leaves
`Weathr: Set Location by Town or Postcode`	Manually set location (e.g., "London" or "SW1A 1AA")

Configuration

All settings are under vscode-weathr.* in VS Code Settings:

Setting	Default	Description
`location.mode`	`auto`	Location mode: `auto` (IP), `manual` (town/postcode), `coordinates`
`location.manual`	``	Manual location string (e.g., "London" or "SW1A 1AA"), used when mode is `manual`
`location.latitude`	`36.60`	Latitude (–90 to 90)
`location.longitude`	`4.52`	Longitude (–180 to 180)
`location.hide`	`false`	Hide coordinates in HUD
`hideHUD`	`false`	Hide weather HUD overlay
`units.temperature`	`celsius`	`celsius` or `fahrenheit`
`units.windSpeed`	`kmh`	`kmh`, `ms`, `mph`, `kn`
`units.precipitation`	`mm`	`mm` or `inch`
`showLeaves`	`false`	Autumn leaves animation
`animationSpeed`	`normal`	`slow`, `normal`, `fast`
`theme`	`auto`	`auto`, `dark`, `light`

Weather Conditions (Simulate)

Clear skies: clear, partly-cloudy, cloudy, overcast
Precipitation: fog, drizzle, rain, freezing-rain, rain-showers
Snow: snow, snow-grains, snow-showers
Storms: thunderstorm, thunderstorm-hail

Setting Location

You have three options to set your location:

1. Auto-detect (default)

Set location.mode to auto to detect your location using your IP address.

2. Manual location (town or postcode)

Run the Weathr: Set Location by Town or Postcode command and enter a location name:

Town names: "London", "New York", "Tokyo"
Postcodes: "SW1A 1AA", "10001", "100-0001"

The location will be automatically geocoded and weather will update immediately.

3. Manual coordinates

Set location.mode to coordinates and configure:

location.latitude — latitude of your location
location.longitude — longitude of your location

Configuration Example

Or use coordinates-based location:

Geocoding

When using manual location mode, town/postcode names are converted to coordinates using the Nominatim API (free OpenStreetMap geocoding service). No API key is required.

Here's the full publishing process for a VS Code extension:

Install the packaging tool:

`
npm install -g @vscode/vsce

Create a publisher account at marketplace.visualstudio.com/manage — sign in with a Microsoft account.
Create a Personal Access Token (PAT):

Go to dev.azure.com → your org → User Settings → Personal Access Tokens
New token → set Marketplace scope to Manage
Copy the token (you only see it once)

`
vsce login YOUR_PUBLISHER_NAME

paste your PAT when prompted

Make sure package.json has the required fields: json{ "publisher": "your-publisher-name", "name": "vscode-,name.", "displayName": "Weathr", "description": "Meaningful description", "version": "1.0.0", "icon": "icon.png", "repository": { "type": "git", "url": "https://github.com/you/vscode-weathr" }, "license": "MIT", "engines": { "vscode": "^1.80.0" } }

The icon.png must be 128×128px and is required — the publish will fail without it.

Package and inspect it first (optional but recommended):

`
vsce package

produces vscode-weathr-1.0.0.vsix — you can install it locally to

test:

`
code --install-extension vscode-weathr-1.0.0.vsix

Publish:

`
vsce publish

Or publish and bump the version in one command:

` vsce publish minor # 1.0.0 → 1.1.0 vsce publish patch # 1.0.0 → 1.0.1 `

Write a good README.md — it becomes the marketplace listing page. Include a screenshot or GIF of the extension in action, which makes a big difference for discoverability.

After publishing it takes about 5 minutes to appear on the marketplace. You can manage it, see install counts, and publish updates at marketplace.visualstudio.com/manage.

Hope it will be useful for anyone who wants to create and publish his/her own extension! 😄

Create ZOD schema generator app with GitHub Copilot CLI

Valiantsin Lutchanka — Sat, 07 Feb 2026 09:36:05 +0000

Hi folks!

Year ago, I have been playing out of curiosity with AI tools like Claude or ChatGPT to create some apps just for fun and to try what they are capable for. The results were not so impressive.

Days are past and now with all the progress that big AI players made I decided to give a second try to tools like cli agents.

I am heavily involved into API testing and as far as Zod has become my go-to library for schema validation, and writing Zod schemas from scratch can be tedious, especially for complex data structures, I decided to create a small app to generate ZOD schemas out of JSON responses and JSON schemas with GitHub Copilot CLI.

I do not have a GitHub subscription so I was suffering in a free tier mode with Haiku model :).

Surprisingly enough it was doing quite well and udnerstood the requirements quickly. I did not want to have a complex structure or use any frameworks, maybe this was a reason Haiku handled this task after some back and forwards, and errors fixing.

So the app was finally created using vanilla JS - all-in-one web page. And Copilot CLI even did not run out of free tier :).

The idea was simple - parse the users' input - if it is a normal JSON - generate ZOD schema using regex matchers. If users' input is a JSON schema - use the library to convert it to ZOD schema as a string.

The result is quite pleasant and at least useful for me (hope someone will find it useful as well).

This is how it looks like:

You can try it live here:

What I took out of this?

Well - the AI is evolving quite fast, and tasks that before have been taking significant time and tokens to generate with more advanced models, now can be acomplished with much lesser efforts and with simplier models. But I am sure you all know this :)

It is very interesting were we will come with all this progress, and how it will look like in 1 year, especially with tools like BMAD or Beads.

Would be glad to hear about your experience, and what things you been creating with AI!

Cypress Performance Plugin "cypress-performance": A Guide to automate the Web Performance Testing

Valiantsin Lutchanka — Thu, 19 Dec 2024 15:29:20 +0000

Introduction

This is my first post on dev.to, so I hope it will be welcomed

The idea to create this plugin came to my mind when I was struggling to measure the web UI performance and the existing plugins were not providing me with the flexibility I needed. The "cypress-performance" plugin introduces a powerful way to measure and assert web performance metrics directly in your Cypress tests. Unlike traditional end-to-end testing that focuses on functionality, this plugin enables teams to catch performance regressions early and maintain high-performance standards through automated testing.

Web performance testing has become crucial today. Users expect lightning-fast experiences, and slow-loading pages can significantly impact business metrics. While Cypress is an excellent tool for end-to-end testing, it lacks built-in performance measurement capabilities.

Today, I'm excited to introduce "cypress-performance", a new plugin that brings performance measurement capabilities to your Cypress tests.

You can check it out here:

https://www.npmjs.com/package/cypress-performance https://github.com/Valiantsin2021/cypress-performance

Key Features

Real-time performance metrics collection during test execution
Built-in retry mechanisms for reliable measurements
Support for Core Web Vitals and other key performance indicators
Seamless integration with existing Cypress tests
Type definitions for TypeScript support
Configurable thresholds and timing options

Why Another Performance Testing Plugin?

You might be wondering, "Don't we already have "@cypress-audit/lighthouse"?" Yes, we do, and it's an excellent tool. However, "cypress-performance" takes a different approach:

Real User Metrics: While Lighthouse simulates performance under specific conditions, cypress-performance captures metrics during actual test execution, giving you insights into real user scenarios.
Test Integration: The plugin seamlessly integrates with your existing tests, allowing you to measure performance while executing your regular test flows, not as a separate audit.
Granular Control: You get fine-grained control over when and how to measure performance, with built-in retry mechanisms for reliable results.
Core Web Vitals: Focus on modern performance metrics that matter, including Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).
Lower overhead - no need for separate Lighthouse runs
Less configuration - minimal setup required for basic usage
Specific metrics focus - Core Web Vitals and key timings
Test integration - natural fit in existing test flows the command is chainable and returns all collected metrics to be asserted
Retry capability - built-in reliability mechanisms to ensure the metrics are collected
Resource timing - detailed resource-level metrics
Total bytes - size of all resources

On the other side - @cypress-audit/lighthouse provides us with
Comprehensive audits including SEO, accessibility

Scoring system aligned with Lighthouse
Static analysis of best practices
Recommendations for improvements
Performance simulation under various conditions
Broader metrics beyond just performance

So what is it and how to use it?

This is a standalone Cypress plugin with 0 external dependencies.

First, install the plugin:

npm install -D cypress-performance

Add to your cypress/support/e2e.js:

import 'cypress-performance'

For TypeScript users, include types in tsconfig.json:

{
  "compilerOptions": {
    "types": ["cypress", "cypress-performance"]
  }
}

Now you're ready to start measuring performance!

Usage

The plugin exposes the single Cypress method:

cy.performance()

The cy.performance() command itself is retriable, meaning Cypress will retry the command until it either:

Gets valid metrics
Reaches the retryTimeout

Default options for the command:

MetricsOptions{
  startMark?: keyof PerformanceTiming // Default: 'navigationStart'
  endMark?: keyof PerformanceTiming // Default: 'loadEventEnd'
  timeout?: number // Timeout in milliseconds (default: 10000)
  initialDelay?: number // Initial delay in milliseconds (default: 1000)
  retryTimeout?: number // Retry timeout in milliseconds (default: 5000)
}

A typical test will look like this:

And her like it will look in the Cypress test runner:

Best Practices

Set Realistic Thresholds Consider your users and application when setting performance thresholds: LCP: < 2.5s (good), < 4s (needs improvement) CLS: < 0.1 (good), < 0.25 (needs improvement) TBT: < 300ms (good), < 600ms (needs improvement)

Use Custom Marks For single-page applications or complex user flows, use custom performance marks to measure specific interactions.

Consider Environment Variations Remember that CI environments might perform differently than local development. Adjust thresholds accordingly or use relative comparisons.

Combine with Other Metrics Use cypress-performance alongside other tools like Lighthouse for a complete performance picture

Epilogue

My "cypress-performance" plugin serves for quick valuable and most important web performance metrics collection and brings performance testing capabilities to your Cypress test suite. By focusing on real user metrics and providing fine-grained control, it helps ensure your application performs well under actual use conditions.

Whether you're monitoring Core Web Vitals, measuring specific user interactions, or ensuring smooth resource loading, "cypress-performance" provides the tools you need to catch performance regressions before they reach production.

The good performance is not just about speed—it's about consistency and reliability. With "cypress-performance", you can ensure your application maintains high-performance standards throughout its development lifecycle.

Give it a try in your project, and let me know how it works for you! The plugin is open source, and I welcome all contributions and feedback.