VS Code Extension Development Tips

Getting Started with VS Code Extension Development: Tips and Tricks

Prerequisites

To begin developing VS Code extensions, ensure that you have the latest versions of Node.js, the VS Code application, and Git installed.

• Node.js
• VS Code
• Git

Getting Started

Kick off your VS Code extension project by using Yeoman and the VS Code Extension Generator to scaffold a project. You can choose either TypeScript or JavaScript as your project language.

• Quick Setup (without global Yeoman installation):
  

  npx --package yo --package generator-code -- yo code
  

• Full Setup (with global Yeoman installation):
  

  npm install --global yo generator-code
  yo code
  

For a TypeScript project, select the following options:

? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? HelloWorld
# (Press <Enter> for default options below)
? What's the identifier of your extension? helloworld
? Initialize a git repository? Yes
? Bundle the source code with webpack? No
? Which package manager to use? npm

Open src/extension.ts in your editor, press F5, or run Debug: Start Debugging from the Command Palette (⇧⌘P). This will compile and launch your extension in a new Extension Development Host window. To test it, run the Hello World command from the Command Palette in the new window.

Sample Development

Microsoft has created a variety of sample extensions to help you get started:

• Authentication Sample
• Webview Sample
• Snippet Sample

For the full repository of samples, visit VS Code Extension Samples.

Webview UI Toolkit

To streamline UI development, Microsoft provides a Webview UI Toolkit to help your extension match the VS Code theme and UI behavior.

• Webview UI Toolkit for Visual Studio Code

The toolkit includes several components:

• Button
• Checkbox
• Dropdown
• Text Field

Using JavaScript Frameworks in Extension Development

You can incorporate frameworks like Angular, Vue, and React into your extension using the Webview UI Toolkit samples:

• Angular Sample
• React-CRA Sample
• React-Vite Sample
• Vue Sample

Webview Development Tips

Icons

For icon design, you can use Codicons, a set of official VS Code icons. If you’re working with React, consider using React Icons.

Auto Build for Webview

While VS Code’s extension watcher detects code changes, it may not catch updates in webview files, especially with TypeScript or frameworks. Use nodemon for efficient change detection and auto-builds.

1. Install nodemon:
   

   npm install nodemon
   

2. Create a nodemon.json configuration file:
   

   {
     "watch": ["src"],
     "ext": "js,jsx,ts,tsx,scss,css",
     "ignore": ["node_modules/**/*"],
     "exec": "npm run build"
   }
   

3. Start nodemon:
   

   nodemon
   

Refresh Extension

To see webview updates, reload the window by pressing ⌘⇧P and selecting Developer: Reload Window.

Alternatively, you can create a keyboard shortcut:

Press ⌘⇧P to open the panel. Click on the configure keybinding

Click on the pencil icon and create the shortcut you need to use

Footnote

Thanks to Hawk Ticehurst and the Microsoft team for providing samples and references to make VS Code extension development easier!

---

Enjoy building your VS Code extension! 🎉