Lightning Web Components Developer Tools

Install Development Tools

Install the recommended developer tools for creating and working with Lightning Web Components. Create a Lightning web component. Fix errors in your code using the provided developer tools. Configure a record layout to display your Lightning web component.

  • Lightning Web Components were released in December 2018.
  • Lightning web components can be created with any text editor, but its best to use the tooling described below.
  • Salesforce CLI is a “swiss army knife” that lets you do a lot from the command line
  • Any production or developer edition org can function as a Dev Hub
    • Dev Hubs let you create scratch orgs, which are lightweight orgs that are built to be fast for the most iterative parts of development

  • Lightning Web Components are based on modern web standards, so tooling used to develop them are currently popular tools among web developers
  • Includes a command-line interface (Salesforce CLI) that consists of several plugins that provide specific functionality.
    • salesforcedx provides the ability to interact with Salesforce orgs and their data
  • Visual Studio Code is the code editor for Salesforce developers. Free, available on Windows, Linux, MacOS, and well-established among web developers
    • Need to install the Salesforce Extension Pack - provides tooling for developing on the Lightning Platform including tools for working with Apex, Visualforce, and a Replay Debugger
  • A Scratch org is a dedicated, configurable, and short-term Salesforce environment that can be quickly spun up when starting a new project, feature branch, or feature test.
  • A Developer Hub (Dev Hub) is aa main Salesforce org that your team uses to create and manage scratch orgs
    • Enable via: Setup > Quick Find > “Dev Hub” > Dev Hub > Enable

Create a Lightning Web Component

  • A Salesforce DX Project, at its simplest, is a folder on your local machine that helps you organize what you’re working with at a given time
    • It contains metadata, configuration files, and code

  • Create a Salesforce DX Project within Visual Studio Code: Ctrl + Shift + P, then SFDX: Create Project. Then Standard, then Enter.
    • A folder will be created on your local computer.
  • Authorize Your Dev Hub within Visual Studio Code via Ctrl + Shift + P, then SFDX: Authorize a Dev Hub. A browser opens. Log in with credentials.
    • Authenticating Dev Hub is required before creating a scratch org
  • Create a Scratch Org via Visual Studio Code command SFDX: Create a Default Scratch Org. Generally, accepting the defaults is okay.
  • To learn more about Salesforce DX, try App Development with Salesforce DX
  • Project just created has a special folder, force-app/main/default, that contains all the metadata of the current Salesforce DX project. Lightning web components are also metadata - they are included in a subfolder named lwc
  • Ctrl-Shift-P then focus terminal focuses the view on the terminal. Entering sfdx force:lightning:component:create -n myFirstWebComponent -d force-app/main/default/lwc --type lwc creates the needed files for your first Lightning web component.
    • -n: defines the name of the Lightning web component and its files
    • -d: defines the target directory where the Lightning webb component should be created. It must be named lwc
    • --type: specifies that you want to create a Lightning Web Component.
    • Right-clicking the lwc folder provides quick access to the SFDX: Create Lightning Web Component command, which does the same thing

  • Lightning web components consists of three files:
    1. .xml file: metadata definition file. Contains several configuration elements that control where you can add it to the Salesforce user interface using Lightning App Builder.
    2. .js file: javascript file
    3. .html file: HTML file

Example Files


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="">

myFirstWebComponent.js - note errors are intentionally included in the following. Visual Studio Code highlights syntax errors with a red squiggly line.

import { LightningElement } from 'lwc';
export default class MyFirstWebComponent extends LightningElement {
    contacts = [
            Id: 1,
            Name: 'Amy Taylor',
            Title: 'VP of Engineering',
            Id: 2,
            Name: 'Michael Jones',
            Title: 'VP of Sales',
            Id: 3,
            Name: 'Jennifer Wu',
            Title: 'CEO',

myFirstWebComponent.html - note errors are intentionally included in the following. Visual Studio Code highlights syntax errors with a red squiggly line.

  <lightning-card title="ContactInformation" icon-name="custom:custom14">
     <div class="slds-m-around_medium">
        <template for:each={} for:item="contact">
              {contact.Name}, {contact.Title}

Analyze Your Code and Deploy It to Your Org

  • Salesforce Extensions provide built-in debugging:
    • “ESLint,” a common javascript linting tool. Linting is a type of static analysis that shows areas where your code may not adhere to commonly-accepted guidelines
    • Language services support for Apex and Lightning Web Components which provides autocompletion and code hinting as you type

  • From the terminal in Visual Studio Code, sfdx force:source:push deploys metadata to your scratch org
  • From the terminal in Visual Studio Code, sfdx force:org:open opens the default scratch org

  • Other references: