Overview

Overview

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 Completion

The Lightning Web Components Extension builds on VS Code’s language features for HTML and JavaScript, including syntax highlighting, bracket matching, and language-specific code completions with IntelliSense. The extension provides code completion for the following Lightning Web Components resources.

Code Snippets

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., accordion).

Out of the box snippets for Salesforce development are available in these repositories:

@salesforce Scoped Modules

Lightning components access Salesforce values via scoped modules. The Lightning Web Components Extension provides code completion for the following scoped modules:

  • @salesforce/resourceUrl
  • @salesforce/contentAssetUrl
  • @salesforce/apex
  • @salesforce/user

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 import statement.

Static Resource Completion

Here’s what code completion looks like for @salesforce/schema.

Schema Completion

Here’s an example of code completion for an Apex controller.

Apex Completion

Lightning API

VS Code also completes Lightning API resources, such as lightning/uiRecordApi and lightning/uiObjectInfoApi. See the lightning/ui*Api Wire Adapters and Functions in the Lighting Web Components Developer Guide for more information.

Lightning UI Completion

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 @wire decorator.

Lightning @wire Completion

Namespace Completion in HTML Attributes and Tags

Code completion is also provided for HTML tags and attributes for components in the lightning and c namespaces. Here, with c-view-source, VS Code completes its source attribute.

HTML Attribute Completion

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.

Documentation on Hover

Linting

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.”

Linter Example with Hover

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.

Linter Example with Peek

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 @api onpress;.

Linter Example with Quick Fix

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.

Documentation on Hover

Code Navigation

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.

View 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.

Supporting js-meta.xml

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.

View suggestions for target in js-meta.xml

Feedback or Bugs | Edit this Article