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
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
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!
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.
- Trailhead: Set Up Your Workspace and Install Developer Tools
- Overview: Lightning Web Components Extension for VS Code
- GitHub: LWC HTML Code Snippets Source
- GitHub: LWC JS Code Snippets Source
- GitHub: Apex Code Snippets Source
- Snippets in Visual Studio Code
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.