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.
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:
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.
The toolkit includes several components:
Using JavaScript Frameworks in Extension Development
You can incorporate frameworks like Angular, Vue, and React into your extension using the Webview UI Toolkit samples:
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.
-
Install
nodemon
:
npm install nodemon
-
Create a
nodemon.json
configuration file:
{ "watch": ["src"], "ext": "js,jsx,ts,tsx,scss,css", "ignore": ["node_modules/**/*"], "exec": "npm run build" }
-
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! 🎉
Top comments (0)