Magento 2 Snippets

Magento 2 Snippets for Zed

Magento 2 and Hyvä snippets for the Zed editor.

Covers the boilerplate you write every day, from phtml headers and CSP script tags to layout XML, di.xml, and system.xml.

Installation

Via Zed Extensions

Open Zed and go to the Extensions panel (cmd+shift+x).
Search for "Magento 2 Snippets" and click "Install".

Via Developer install

Requires rustup (Rust must be installed via rustup specifically, not Homebrew or other package managers).

Clone this repository to your local machine.
Open Zed and go to the Extensions panel (cmd+shift+x).
Click "Install Dev Extension" at the top of the panel.
Select the folder where you cloned this repository.

Zed will load the extension directly from that folder. Any changes you make to the snippet files are picked up after reloading the extension from the Extensions panel.

Recommended setting

To show snippets at the top of the autocomplete list, add this to your Zed settings:

{
    "snippet_sort_order": "top"
}

This can also be scoped per language if you only want it for PHP and XML:

{
    "languages": {
        "PHP": { "snippet_sort_order": "top" },
        "XML": { "snippet_sort_order": "top" }
    }
}

Complementary extensions

This extension focuses on Magento 2 and Hyvä specific snippets.

For generic PHP and Alpine.js snippets useful in day to day development, install these extensions alongside it:

PHP Snippets for general PHP snippets
Alpine.js Snippets for Alpine.js directives and patterns

Available Snippets

PHP

Magento

Prefix	Description
`escapeHtml.magento`	Escape a string for safe HTML output
`escapeUrl.magento`	Escape a string for safe use in URLs
`escapeHtmlAttr.magento`	Escape a string for safe use in HTML attributes
`escapeJs.magento`	Escape a string for safe inline JavaScript output
`__.magento`	Wrap a string in Magento's translation function
`getUrl.magento`	Generate a store URL from a route path
`getChildHtml.magento`	Render a child block by name
`getData.magento`	Get a data value from the current block
`header.magento`	Standard phtml file header
`registration.magento`	Module registration.php
`script.magento`	Inline script block using SecureHtmlRenderer
`style.magento`	Inline style tag using SecureHtmlRenderer
`argumentClass.magento`	Base class implementing ArgumentInterface

Hyvä

Prefix	Description
`header.hyva`	Standard phtml file header with Hyvä imports
`icon.hyva`	Render a custom SVG icon via the svgicons ViewModel
`lucideIcon.hyva`	Render a Lucide SVG icon via the lucideIcons ViewModel
`viewModel.hyva`	Require a ViewModel from the ViewModelRegistry
`dispatchMessage.hyva.js`	Show a UI message via dispatchMessages
`privateContent.hyva.js`	Listen for the private-content-loaded event
`reloadCustomerSection.hyva.js`	Dispatch reload-customer-section-data event
`formatPrice.hyva.js`	Format a number as a store price string
`script.hyva`	CSP inline script block with Alpine component

XML

Layout

Prefix	Description
`page.layout.magento`	Base page layout XML structure
`block.layout.magento`	Declare a block with class, name and template
`container.layout.magento`	Declare a layout container
`referenceBlock.layout.magento`	Reference an existing block
`referenceContainer.layout.magento`	Reference an existing container
`move.layout.magento`	Move a block or container
`remove.layout.magento`	Remove an existing block
`update.layout.magento`	Include another layout handle
`arg.layout.magento`	Pass a string argument to a block
`argBool.layout.magento`	Pass a boolean argument to a block
`argArray.layout.magento`	Pass an array argument to a block
`item.layout.magento`	A single item inside an array argument
`viewModel.layout.magento`	Inject a ViewModel into a block
`css.layout.magento`	Include a CSS file from a module
`js.layout.magento`	Include a JS file from a module
`font.layout.magento`	Preload a font file from a module

System (system.xml)

Prefix	Description
`config.system.magento`	Root system.xml config wrapper
`tab.system.magento`	Declare a system config tab
`section.system.magento`	Declare a system config section
`group.system.magento`	Declare a system config group
`field.system.magento`	Declare a system config field
`depends.system.magento`	Add a depends block to a field

Dependency Injection (di.xml)

Prefix	Description
`config.di.magento`	Root di.xml config wrapper
`type.di.magento`	Declare a type for plugins or arguments
`plugin.di.magento`	Declare a plugin for a type
`preference.di.magento`	Override a class with a preference
`virtualType.di.magento`	Declare a virtual type

Module (module.xml)

Prefix	Description
`config.module.magento`	Root module.xml with module declaration and sequence

LESS

Magento

Prefix	Description
`@mq.mobile.magento`	Magento LESS media query for mobile styles
`@mq.desktop.magento`	Magento LESS media query for desktop styles

Contributing

Contributions are welcome. For larger changes, open an issue first to discuss what you have in mind.

Fork the repository.
Clone your fork.
Make your changes.
Test in Zed using the developer install steps.
Submit a pull request.