Build Lightning Web Components Faster with Code Snippets

Implementing Salesforce Base Lightning Web Components just got easier with the addition of HTML Code Snippets in the Salesforce Extension Pack for Visual Studio Code (v58.6.2). This update complements JavaScript and Apex Code Snippets which have been a part of the VS Code extension since 2018. The introduction of HTML Code Snippets allows developers to produce the boilerplate markup required for an LWC and fill in the property values without having to pivot between their editor and documentation. By using Code Snippets, developers will no longer forget a property, misspell a component name, or leave out ARIA elements.

This post will explain what Code Snippets are, how to use them, and how you can build your own for your project.

What are Code Snippets?

While this blog focuses on Code Snippets for HTML, they can be written and scoped to any language. Code Snippets leverage IntelliSense to offer robust code-completion options directly in VS Code. What makes Code Snippets different from traditional code completion/hinting tools is their ability to contain large blocks of code or markup with designated points for customization. When a code snippet is inserted into your file, pre-defined sections are made available to enter variable names, adjust properties, or pick from a list of values — all while keeping your hands on the keyboard. The blocks of code provide handy default values as you might find in developer documentation, further allowing you to speed along in the development process. Default implementations serve as a way to encourage best practices and reduce needless back and forth during code review. With Code Snippets, developers spend less time writing boilerplate code and more time adjusting the settings that matter most.

Code Snippets really demonstrate their power when you see them in action. Take for example a custom component that displays a Lightning Button Menu. To produce this functionality, the developer creates a parent Lightning Button Menu, nests a template, and iterates over the list of Menu Items which produces this code.

Contrast that with our screen recording video below in which the developer uses Code Snippets to quickly produce the same block of code. With a few quick keystrokes, the outer Lightning Button Menu, for-loop, and corresponding Menu Item tags are created.

Using Code Snippets

HTML Code Snippets were introduced in version 58.6.2 of the Salesforce Extension Pack for VS Code and cover Salesforce Base Lightning Web Components. With your desired file open in the editor, you can search for code snippets in two ways:

Open the VS Code command palette and run the Insert Snippet command
Open an HTML file in VS Code and begin typing the component name, for example pill

In this example, type the component name, pill. A menu appears showing multiple lwc-pill components that offer implementation variations that coincide with component library examples. Select lwc-pill-avatar by clicking the name or highlighting the option and hitting the tab on the keyboard. Immediately, the markup will paste into the editor and the cursor will land on the first element requiring input. Upon entering the label value, press the tab to go to the src property. You can choose to use the variable reference as is or update it to match the variable name in your JavaScript file. Reaching the variant property, two options will be presented as a drop-down menu, allowing you to pick either of the two valid options. Pressing the tab after entering the alternative text will move your cursor to the end of the component.
A dark-themed code editor suggesting various implementations of the lightning pill component to be inserted as HTML markup Dark-themed code editor implementing a Lightning Pill Avatar component. The cursor is displaying pre-defined options for the variant attribute

Can I create my own?

Absolutely! Code Snippets are a great resource for project teams who build custom components or leverage repetitive code throughout their application and want to make it easy for team members to implement patterns. Some quick examples include:

Commented file headers to include your company name, license, etc.; in fact, Salesforce includes such a snippet in the VS Code Extension Pack to ensure the correct copyright notices are included
Custom LWC component implementations
API call constructors
Automated test scaffolding; just having the curly braces and parents filled out is a plus

Projects can create their own sets of snippets by creating a snippets.code-snippets file in the .vscode/ directory of their project. Since it is a part of the project’s repository, all team members will benefit from updates throughout the dev lifecycle. This allows teams to make opinionated decisions about the structure of code and how it is implemented. If components have a lot of properties or implementation patterns, multiple versions of a code snippet can be created to accommodate different use cases.

Contributing to VS Code Extension Snippets

Salesforce Extensions for VS Code is an open-source project and is open to external contributions. Be sure to follow the repo’s contributing instructions which specify how to set up your environment, structure your commits, and sign a Contributor’s License Agreement. To test your updates, save changes locally, open Run and Debug from the sidebar, select Launch Extension, and click Play. This will compile the extension and open a new VS Code window, allowing you to test updates. Once confirmed, commit your changes and submit a Pull Request!

Conclusion

Adopting LWC Code Snippets can be a boon for developers by helping them produce error-free code in a timely fashion. What’s more, teams can build code snippets to meet project needs and spread best practices.

Further resources

About the author

Mark Vogelgesang is a Principal ISV Platform Expert at Salesforce, where he focuses on Lightning Web Components and Flows. Outside of work, Mark enjoys cycling, running, and Formula 1.