Microsoft has announced it’s launching its primary coding interface, Visual Studio, on Mac computers. The news may sound uninteresting, but it’s been a long time coming, and is a big shakeup.
In this topic, we'll teach you the fundamental concepts for building extensions. Make sure you have Node.js and Git installed, then install Yeoman and VS Code Extension Generator with:
The generator scaffolds a project ready for development. Run the generator and fill out a few fields:
Then, inside the editor, press F5. This will compile and run the extension in a new Extension Development Host window.
Run the Hello World
command from the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) in the new window:
You should see the Hello World
notification showing up. Success!
Developing the extension
Let's make a change to the message:
- Change the message from
Hello World
toHello VS Code
inextension.ts
- Run
Reload Window
in the new window - Run the command
Hello World
again
You should see the updated message showing up.
Here are some ideas for you to try:
- Give the
Hello World
command a new name in the Command Palette. - Contribute another command that displays current time in an information message.
- Replace the
vscode.window.showInformationMessage
with another VS Code API call to show a warning message.
Debugging the extension
VS Code's built-in debugging functionality makes it easy to debug extensions. Set a breakpoint by clicking the gutter next to a line, and VS Code will hit the breakpoint. You can hover over variables in the editor or use the Debug View in the left to check a variable's value. The Debug Console allows you to evaluate expressions.
You can learn more about debugging Node.js apps in VS Code in the Node.js Debugging Topic.
Visual Studio Mac Os
Next steps
In the next topic, Extension Anatomy, we'll take a closer look at the source code of the Hello World
sample and explain key concepts.
You can find the source code of this tutorial at: https://github.com/Microsoft/vscode-extension-samples/tree/master/helloworld-sample. The Extension Guides topic contains other samples, each illustrating a different VS Code API or Contribution Point.
Blend For Visual Studio Mac Unity
Using JavaScript
Microsoft Blend For Visual Studio
In this guide, we mainly describe how to develop VS Code extension with TypeScript because we believe TypeScript offers the best experience for developing VS Code extensions. However, if you prefer JavaScript, you can still follow along using helloworld-minimal-sample.