Productive Development with Visual Studio Code

The modern-day developer empowers themselves with world-class tooling to efficiently build applications. These developers can significantly increase productivity by investing a little bit of time into setting up their development environment. VS Code is a popular development tool for its incredible productivity features, and it can be easily installed from the Visual Studio Code site.

In this post, you will learn how to improve your development experience by adopting simple techniques and fully leveraging the power of VSCode. We will cover a few key features that can make a big difference.

The Amazing Salesforce Extension Pack

Visual Studio Code is a fast and lightweight cross-platform source code editor that runs on most popular platforms (Windows, Mac, and Linux). Developers can craft and debug code using its built-in features, plus an extensive ecosystem of extensions. The Salesforce Extension Pack has excellent tools and features to help Salesforce developers build their applications.

The Salesforce Extension Pack is a collection of extensions that provide support for command execution, syntax highlighting, language features such as refactoring, debugging, and more for Apex, LWC, Aura, and Visualforce. You can find instructions on how to set up VS Code with these Salesforce Extensions in this Trailhead QuickStart.

Know your User Interface

You should first get familiar with the user interface of Visual Studio Code to use it effectively.

The basic user interface is divided into five main areas as shown in the above image.

Activity Bar: Located on the left-hand side and it contains iconic buttons to switch between different views. For instance, the Explorer view is active in the above picture.
Side Bar: Contains different views like the Explorer to assist you while working on your project. For example, you can see the Explorer view active in the above image which lists the files in a file structure of your project.
Editors: The main areas to edit your files. You can open as many editors as you like side by side, vertically and horizontally.
Panel: Shows output or debug information, errors and warnings, or an integrated terminal. You can display different panels below the Editor.
Status Bar: Shows information about the opened project and the files you’re editing.

Setup your environment

First things first, set up the environment to suit your development needs.

Set up extensions to add functionality to VS Code for your development. Search and install extensions through the extensions view in the side bar. You can search for a specific extension by typing the name of the extension or by applying different search criteria. Filter by enabled extensions, outdated extensions, recommended extensions, sort by name or rating, and much more. For instance, you can search for installed Salesforce extensions by typing @installed salesforce as shown in the below image. You can also find some common search criteria by clicking ... in the top right corner of the side bar.

Setup the workspace to build your projects. In VS Code, projects are organized as folders which can be added to a workspace. A workspace can have one or more projects. By default, VS Code adds your folder to an UNTITLED workspace. You can save your workspace with a new name.

Configure settings using the settings editor. Nearly every part of the VS Code’s editor, user interface, and functional behavior has options that can be modified. For example, you can set your environment to automatically deploy metadata on saving, or you can configure it to automatically format your code whenever you save files, etc.

You can apply settings at different scopes.

User Settings are applied globally to any instance of VS Code you open.
Workspace Settings are applied at the workspace level.
Folder Settings are applied at the folder level.

The settings are applied in order of precedence, where Folder is followed by Workspace and User. That means, if conflicting options are defined in User, Workspace and Folder settings, the option defined in Folder settings will be applied.

The settings editor can be invoked using File > Preferences > Settings (on Windows) or Code > Preferences > Settings (on macOS). The settings editor can also be invoked using shortcut keys Cmd+, (for macOS) or Ctrl+, (for Windows).

Settings can also be viewed and modified in the form of a JSON file. The settings.json file can be opened using the icon (Open Settings JSON, see the screenshot above) in the top right corner of the settings editor. Alternatively, you can also enter Preferences: Open Settings (JSON) in command palette to open the settings.json file.

Each extension can be uniquely identified by its id in settings.json, such as salesforcedx-vscode-apex for the Apex extension. The properties can be set using name-value pairs. For example, you can set Java Home for your Apex extensions as follows.
{
"salesforcedx-vscode-apex.java.home": "/Library/Java/JavaVirtualMachines/jdk-11.0.6.jdk/Contents/Home"
}

You will see how we can increase productivity by configuring extensions via settings in future sections.

Visual productivity features

Let’s explore some of the best capabilities of Visual Studio Code that help to improve the readability of code and provide quick access to tools and features.

Themes are used to make your code more readable by setting text colors and backgrounds. VS Code provides several color themes out of the box. You can search for themes by typing ‘theme' in the extensions view of the sidebar. You can also create and use custom themes. My favorite themes are Codey Midnight and Codey High Noon which are extensions from Salesforce and also follow accessibility guidelines.

Quick Open is a one-stop feature from where you can run common actions in VS Code. In general, we can use the menu and shortcuts in VS Code for common actions such as opening Command Palette (which we will explain later), opening a File, list open editors, list recently accessed editors, go to Symbol in a File, Go to Line, etc. But with Quick Open, you can do all of these things with a single command. You can invoke Quick Open by using menu Go>Go to File... or by using a shortcut key Cmd+P (for macOS) or Ctrl+P (for Windows) and then type ? for list of actions that you can run. The following gif illustrates a few of the actions such as open a file, search for a symbol, open command palette, switch to a file in the open editors, and open view.

Command Palette is used to launch the common commands of the extensions. For instance, a developer can launch SFDX commands from the command palette. The Command Palette can be opened using View>Command Palette menu item or Cmd+Shif+P (for Mac) or Ctrl+Shift+P (for Windows). It can also be accessed from Quick Open by selecting >.

The available commands that you can run from the command palette for the Salesforce Extension Pack can be found in the command reference. It also shows its usage and the equivalent CLI command.

Tip: The Command Palette shows the list of recently used commands when you invoke it. You can control the number of lines of history by setting the option Command Palette: History in Settings. You can also restore the last command by setting Command palette: Preserve Input in settings which shows the last ran command whenever you invoke Command Palette.

Key Bindings are keyboard shortcuts that are handy to quickly edit code using features like multi-line-edit or to launch a tool. You can configure shortcuts using Keyboard Shortcuts editor. If you are migrating from other IDEs/editors like Eclipse, Vim, Atom, etc., you can use Keymap extensions to match shortcuts with those of other editors so you don’t need to learn new keyboard shortcuts. You can also download easy reference for keyboard short cuts for Mac, Windows, and Linux. You can search and install the Keymap extensions from Extensions view.

Code Productivity features

Developers will be able to deliver high-quality code faster with proper code productivity tools. In this section, we will see how developers can save time and effort with a few configurations and extensions.

Format with Prettier for consistent formatting of code across all the files in your projects. Prettier is one of the most popular and must-have extensions. It formats code consistently and makes it easy to read and understand. It takes whatever code you write or copy/paste and magically reformats it. You can set up Prettier with few easy steps listed in Salesforce Extension documentation. Once Prettier is installed, you can format a document by typing Format Document in the Command Palette. You can also configure Prettier to format the document whenever you save it by setting the option Editor: Format On Save in your Settings as illustrated in the following gif image.

Codelens is a very useful feature that enables you to quickly peek the reference of the method or property defined in your code. It creates clickable links above all your method definitions indicating the number of references of that method. You can click the link to peek each of those references. This feature can be toggled in your settings using the option Editor: Code Lens. You can find popular extensions in Marketplace that use Codelens such as Git Lens, Version Lens, etc. The following gif image shows how to set up and use Codelens for javascript.

Code Snippets are small re-usable source code templates that can save you from writing repeated code patterns such as loops or conditional statements. It creates a skeletal structure for your code segment when inserted. Code Snippets can be inserted by using Insert Snippet in the Command Palette. They also appear in Intellisense and are also supported in tab completion. You can find code snippets for common patterns like for, for-each, do-while, etc. You can use code snippets in javascript, apex class, apex triggers, etc. The Salesforce Lightning Extensions pack also provides code snippets for common Lightning Web Components(LWC) and Apex code patterns. The following gif shows sample usage of code snippets.

You can also create your own code snippets for your repetitive code which are called custom code snippets.

Deploy on Save can be one of the useful features if you want to quickly check the functionality against your org. With this feature enabled, your code automatically deploys to your default org whenever you save a local source file. This feature can be enabled by selecting Push-or-deploy-on-save in Settings.

Tip: Set a default org for development. This enables you to run commands quickly against that org. You can set scratch org for package development model and set a sandbox, a Developer Edition (DE) org, or a Trailhead Playground for org development model.

Org Browser is a part of the Salesforce Extension Pack which helps you browse and retrieve metadata from your org without having to use a manifest file. The Org Browser is available only in non-scratch orgs such as sandboxes or developer edition orgs. You can find it as a cloud icon in the activity bar. You can retrieve the metadata source into your local project. You can find more information about the Org Browser in the Salesforce Extension Pack documentation.

Apex Replay Debugger is a part of the Salesforce Extension Pack which allows you to debug your Apex code by inspecting debug logs using Visual Studio Code as the client. You can view variables, set breakpoints, and hover over variables to see their current value. You can learn more about Apex Replay Debugger from our trailhead project Find and Fix Bugs with Apex Replay Debugger.

SOQL Language Server is a part of the Salesforce extension pack which allows you to build and test SOQL queries before you import it to your Apex code. It is currently available in beta. You can learn more about it from this article in the Salesforce Extension Pack.

Productivity with Version Control

Visual Studio Code has integrated source control and it includes git support out-of-the-box. You can also search and install other source control extensions from the Extensions view. The source control icon in the activity bar displays the number of changes currently done in your local repository. You can perform various git operations including switching the branch, staging the changes, merging the changes, commit, push and pull changes, etc. When you select a file in the Source Control view, you can also view the changes made in your files with respect to the remote branch side by side.

Git Lens by Eric Amodio is one of the feature-rich open source extensions from the Marketplace that we can try. With Git Lens, you can quickly glimpse into by whom, why, and when a line or code block was changed. It uses the CodeLens UI to show the most recent commit, number of authors and author names etc. and exposes the peek window for full history view. It is highly customizable to suit your needs.

Summary

Developer productivity and happiness are key for successful implementation of any project. Here we have covered how a developer can be more productive by setting up their development environment for their own needs and preferences. We have covered few of the features that are available out of the box from VS Code, as well as some more unique features available via the Salesforce Extension pack and marketplace. You can adopt these tools and features all at once, or one at a time to build applications with greater comfort and efficiency.

Resources

Salesforce Extensions for Visual Studio Code