My first VSCode extension playground

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?

1. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
2. Run Weathr: Start Weather Animation
3. 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:

1. Install the packaging tool:

`
npm install -g @vscode/vsce

`

1. Create a publisher account at marketplace.visualstudio.com/manage — sign in with a Microsoft account.

2. 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)

1. Log in from the terminal:

`
vsce login YOUR_PUBLISHER_NAME

`

paste your PAT when prompted

1. 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.

1. 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

`

1. 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
`

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! 😄