LWC Configuration
A concise guide to set up your local environment for Lightning Web Components development.
1. Download and install VS Code
Visual Studio Code is a lightweight but powerful code editor with excellent extension support for Salesforce development. Download the installer for your OS from the official site, run the installer, and follow the prompts. After installation you can open your project folder and use the integrated terminal for CLI commands.
Official download: https://code.visualstudio.com/
2. Install Salesforce CLI
Salesforce CLI (sfdx) is the command-line tool that enables creating projects, authenticating to orgs, pushing and pulling source, running tests, and so on. Download the appropriate installer for Windows/macOS/Linux from the official developer site and follow installation instructions. After installing, verify with sf --version in a terminal.
3. Install Salesforce extensions for VS Code
Install the official Salesforce extensions pack for VS Code to get language support, code completion, Apex debugging, and LWC features. Open the Extensions view in VS Code (Ctrl+Shift+X) and install the Salesforce Extension Pack. This extension integrates tightly with the Salesforce CLI and provides commands (Command Palette) to create projects, components, and more.
VS Code Extensions: https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode
4. Create a Salesforce DX project
Use the Salesforce CLI or the VS Code command palette to create a new SFDX project. A typical command is sfdx force:project:create -n my-lwc-project. This scaffolds the project structure (sfdx-project.json, force-app folder, etc.). Open the generated folder in VS Code to begin adding Lightning Web Components under force-app/main/default/lwc. Keep your source in source format if you plan to use source-driven development.
sfdx force:project:create -n my-lwc-project cd my-lwc-project code .
5. Connect with your Salesforce org
Authenticate your local environment to a Salesforce org so you can push/pull metadata and deploy your LWC code. For a web login to a developer org or scratch org use sfdx auth:web:login -a DevOrg. For non-web auth flows (JWT, device code), follow the CLI documentation for your chosen flow. Once authorized, set the default username and validate with sfdx force:org:list and sfdx force:source:push or deploy commands.
sfdx auth:web:login -a MyDevOrg sfdx force:org:list sfdx force:source:push
6. Lightning Studio Extension
Lightning Studio is a popular Chrome extension and VS Code companion for Salesforce developers working with LWC. It speeds up common tasks and tightly integrates with your editor and org, helping you iterate faster on components and Apex.
- Create or update Apex, LWC, and other classes quickly.
- Quickly find code inside LWC files and Apex classes.
- Rapidly save (deploy) changes using
CTRL+Sshortcuts to push updates directly to your org. - Provides many LWC development snippets and shortcut keys to scaffold components faster.
- Useful for both beginners and advanced developers who want a faster feedback loop when working with Salesforce.