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 TypeScript or JavaScript project ready for development. Run the generator and fill out a few fields for a TypeScript project:
Visual Studio also supports the new sample packs available on the MSDN Code Samples Gallery. Sample packs like the Windows 8 Consumer Preview Sample Pack as well as individual samples can be downloaded through the ‘Online’ tab of the Extension Manager. Visual studio code offers a wide range of extensions. Here is how to install the extension. Press SHIFT+COMMAND (or Windows)+X or just click on the extension icon of visual studio code. Search for the extension and press install. Here I am listing down the top 15 best visual studio code extensions for web development. Visual Studio extension development. Create add-ons and extensions for Visual Studio, including new commands, code analyzers, and tool windows. Add the SDKs and tools you need to create new commands, code analyzers, tool windows, and language services using C#. Then, share your extension with the community in the Visual Studio. The Visual Studio Intellicode is one of the most amazing Visual Studio Code extensions that you can ever use. It is built for helping developers and programmers with smart code completion suggestions and has pre-built support for a wide array of programming languages.
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 from HelloWorld!
notification showing up. Success!
Developing the extension
Let's make a change to the message:
- Change the message from
Hello World from HelloWorld!
toHello VS Code
inextension.ts
- Run Developer: 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. Contribution points are static declarations you make in the package.json Extension Manifest to extend VS Code, such as adding commands, menus, or keybindings to your extension.
- 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 Run 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.
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.
Using JavaScript
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.
Install Salesforce Extensions for Visual Studio Code
Visual Studio Code is the go-to code editor for Salesforce developers. It's free, open-source, and available for Windows, Linux, and macOS. This editor has easy-to-install extensions for syntax highlighting, code completion, and more.
In this project, we install Visual Studio Code and the recommended Salesforce Extension Pack.
- Download and install the latest version of Visual Studio Code for your operating system. If you already have Visual Studio Code installed, there’s no need to reinstall it.
- Launch Visual Studio Code.
- On the left toolbar, click the Extensions icon .
- Search for
Salesforce Extension Pack
and click Install.
Note
Some features, particularly Apex support, in Salesforce Extensions for Visual Studio Code depend on the Java Platform, Standard Edition Development Kit (JDK). Only JDK 8 and 11 are supported. If you have another version of Java installed, you need to also install JDK 8 or JDK 11. Once you install the right JDK, use the following links to configure your setup:
Now that you’ve installed Visual Studio Code and enabled the necessary extensions, you need to test them out.
- In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS).
- Enter
sfdx
to filter for commands provided by the Salesforce Extensions.
Visual Studio Code Extension Samples Pdf
As you use more SFDX commands, those commands will show up in the recently used
panel.
In the final step, you create your first Lightning web component and add it to your org’s home page.
Visual Studio Code Extension Development
We won’t check any of your setup. Click Verify Step to go to the next step in the project.