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:
- Apex Code Snippets
- HTML Code Snippets for LWC development
- JavaScript 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:
@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.
Here’s what code completion looks like for @salesforce/schema.
Here’s an example of code completion for an Apex controller.
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 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.
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.
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
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 @api onpress;.
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.
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.
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.
