DEV Community

Selfish Dev
Selfish Dev

Posted on

1

How to create a vs code extension #1 (Template)

I'm not a master of this myself—just a beginner like you—so I'll explain everything from the start.

First, I use Linux, so most things will be the same for Windows and Mac users, except for the terminal commands, which are only relevant in Part 1 of this series.

Installing Node.js

For Windows, you may need to download it from the official website or install it via the command prompt, then add it to the environment variables.

For Linux, you can install it with:

sudo apt install nodejs npm
Enter fullscreen mode Exit fullscreen mode

If that doesn’t work (which happened on my device), try this

sudo dpkg --configure -a
sudo apt update
sudo apt install nodejs npm
Enter fullscreen mode Exit fullscreen mode

Installing Yeoman & the VS Code Extension Generator

Once Node.js is installed, we need Yeoman and the VS Code Extension Generator. Install them using:

sudo npm install -g yo generator-code
Enter fullscreen mode Exit fullscreen mode

(You can remove sudo, but when I did, it gave me errors, so... your call.)

Setup Complete! 🎉

Congrats! Everything you need is installed. (And don’t even think about telling me you didn’t install VS Code—I will kill you. )

Now, just run:

yo code
Enter fullscreen mode Exit fullscreen mode

Fill in the required details, and boom—your extension template is ready!
In the next part, we'll dive into creating a syntax highlighter. Stay tuned!

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more