Setting Up VS Code for Salesforce LWC Development on macOS

As a Salesforce developer, setting up your development environment correctly is crucial for efficiency and productivity. In this guide, I will walk you through the steps to set up Visual Studio Code (VS Code) for Salesforce Lightning Web Component (LWC) development on macOS. While I primarily use a MacBook, I also use Windows for work, and the installation process is very similar across both platforms.

Configure VS Code for Salesforce

Before we begin, you need to install a few dependencies. Prerequisites for Salesforce CLI and Salesforce Extension Configuration:

• Java Development Kit (JDK) version 21 (recommended), 17 or 11.

1) Install Java Development Kit (JDK)

To fully utilize all features of Salesforce Extensions for Visual Studio Code, especially Apex support, the Java Development Kit (JDK) is necessary. The JDK includes the Java Runtime Environment (JRE) and is required for Salesforce DX to run properly. It is recommended to install JDK version 21, though versions 17 and 11 is also compatible. If you currently have a different version of Java installed, you should still install JDK 21, JDK 17, or JDK 11.

1. Download JDK: Visit the Oracle website and download the latest version of JDK (version 21, 17 or 11).
2. Choose the Correct Installer: Depending on your Mac’s hardware, you’ll need either the ARM64 or x64 DMG Installer. For instance, I use the JDK 21 ARM64 DMG Installer on my MacBook Pro.
3. Install JDK: Open the downloaded DMG file and follow the installation prompts. The DMG Installer provides a straightforward graphical interface for the installation process.
4. Verify Installation: To confirm that JDK has been installed correctly, open Terminal and run the following command: java -version (Note: you should see output displaying the installed Java version).

2) Install Visual Studio Code

1. Download VS Code: Go to the VS Code website and download the latest version for macOS.
2. Install VS Code: Open the downloaded file and drag the Visual Studio Code.app to your Applications folder.
3. Launch VS Code: Open the application to ensure you installed it correctly.

3) Install Salesforce Extensions

1. Open VS Code: Firstly launch Visual Studio Code from your Applications folder.
2. Go to Extensions: Secondly click on the Extensions icon on the left sidebar or press Shift + Command + X.
3. Search for Salesforce Extension Pack: Thirdly type “Salesforce Extension Pack” in the search bar and select the pack developed by Salesforce.
4. Install the Extension Pack: Finally click the Install button to add the extension to your VS Code.

4) Install Salesforce CLI for Salesforce DX

1. Open Terminal in VS Code: Go to View > Terminal.
2. Install Salesforce CLI: Follow the official instructions to install the Salesforce CLI.
3. Authenticate to Salesforce Org: Use the Salesforce CLI commands to authenticate and connect to your Salesforce org.

Finalizing Your VS Code Setup for Salesforce Development on macOS

Overall with these steps completed, your VS Code is now set up for Salesforce Lightning Web Component development on macOS. Occasionally update your tools and extensions to benefit from the latest features and improvements. Happy coding!

Additional Salesforce VS Code Configuration Resources

For additional Salesforce VS Code configuration resources, you can explore the following:

1. Quick Start: Lightning Web Components – Set Up Visual Studio Code
2. Salesforce VS Code Extensions Guide
3. Installing Salesforce VS Code Extensions
4. Java Setup for Salesforce VS Code Extensions