The Lightning Web Components Extension for VS Code leverages the editor’s built-in code navigation and language features so that you can efficiently build Lightning web components.
Take advantage of the following Lightning Web Components Extension for VS Code features:
Code snippets are available for scaffolding class and interface definitions, and a variety of statements such as loops and conditional statements, and so on. When you’re working in an LWC HTML file, run
Insert Snippet from the Command Palette to view the available snippets. You can also view these code snippets as code completion suggestions by typing the component name (e.g.,
Out of the box snippets for Salesforce development are available in these repositories:
- Apex Code Snippets
- HTML Code Snippets for LWC development
@salesforce Scoped Modules
Lightning components access Salesforce values via scoped modules. The Lightning Web Components Extension provides code completion for the following scoped modules:
To learn more about
@salesforce modules, see
@salesforce Modules in the Lightning Web Components Developer Guide for more information.
In this example, VS Code displays the possible static resource names to choose from when completing the
Here’s what code completion looks like for
Here’s an example of code completion for an Apex controller.
VS Code also completes Lightning API resources, such as
lightning/uiObjectInfoApi. See the
lightning/ui*Api Wire Adapters and Functions in the Lighting Web Components Developer Guide for more information.
Lightning Web Components Syntax
VS Code completes the Lightning Web Components framework’s reactive properties and wire service. See Reactive Properties and Use the Wire Service to Get Data in the Lightning Web Components Developer Guide for more information.
Here is an example of code completion for including the Apex function
getContactList in the
Namespace Completion in HTML Attributes and Tags
Code completion is also provided for HTML tags and attributes for components in the
c namespaces. Here, with
c-view-source, VS Code completes its
View Documentation on Hover
VS Code displays documentation when you hover over a standard Lightning web component in the
lightning namespace as well as the
c namespace, if you provide documentation for your custom components. Here is the documentation that displays for
lightning-layout. The dropdown also provides a link to view the component in the Component Library.
Linting provides errors about malformed or suspicious-looking code while you edit. VS Code enforces Salesforce’s ESLint rules. To activate ESLint, install it from the command line. See the Lightning Web Components ESLint Plugin and Lightning Web Components ESLint Config repositories for instructions.
In this example, when hovering over
onpress, the linter reports that you cannot name an API property starting with “on.”
Peek Problem and Quick Fix
VS Code has a range of actions to quickly address problems and refactor code, including Quick Fix and Peek Problem. To learn more, see Refactoring in the VS Code documentation.
Clicking Peek Problem on the error message highlights the line where the linter found the error. If the message says there is more than one error, click the down arrow in the message’s upper right corner to see the others.
Clicking Quick Fix provides options to disable the warning on valid API names in the line or in the file, and links to the documentation. You can see these same options by clicking on the yellow lightbulb icon next to
Errors and Warnings
File and compiler errors display on hover. Here, when
@track is hovered over, the error message says that it must be declared.
VS Code provides shortcuts to preview or jump to definitions within your code without losing track of the code you’re currently working on. Learn more in the Code Navigation section of the VS Code documentation.
To preview a definition, hold down Ctrl (Windows or Linux) or Command (macOS) and hover over the item whose definition you want to see. This example shows a preview of the source of a
c namespace component.
To view a definition, right-click the item and select Peek Definition, or press Alt+F12.
To jump to the location of a definition, right-click the item and select Go to Definition, or press F12.
VS Code provides IntelliSense support through integrating an XML VSCode extension by Red Hat for js-meta.xml. It supports features that comes out-of-the-box by the extension, such as but not limited to auto suggestion, syntax error reporting, renaming support, automatic code generation, and more.