Shopify / Shopify/theme-tools

Shortcut enhancements + emmet like functionality

Open
#920 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement good first issue
Dominant language
TypeScript
Stars
234
Forks
92
Avg merge
1d 3h
Merged PRs (30d)
6

Description

Is your feature request related to a problem? Please describe.

  • It's annoying to have to write {% to get the full {% %}. Especially when you need an open and closing tag.
  • It's annoying to get the full {% comment %} {% endcomment %} when doing CMD+/ when you're inside a {% liquid %} tag. I would expect a # instead.

Describe the solution you'd like

  • Keep the same shortcut for comment, but use # instead inside liquid tag
  • CMD + { for {% ${0} %}
  • CMD + SHIFT + { for
{% ${1} %}
  ${0}
{% end${1} %}
  • Maybe some other nice feature to automatically get the - in the syntax as well to control the whitespacing.

Describe alternatives you've considered
Emmet like syntax. I've already opened that discussion before, but it would be even handier if you just could type rend and then hit tab to print {% render '${0}' %}. Like I do in my extension. I think that that is also the main reason why people install my extension, but to be honest, I want to mark that one as deprecated if all of the above points could be implemented. The Shopify owned extension became so powerfull without bloating anything, but having this emmet functionality really is a must for me.

Checklist

  • I have checked and made sure that the proposal adheres to this plugin's principles

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The request targets shortcut and Emmet-like behavior in the Shopify theme VS Code extension; start by reviewing docs/prettier-plugin-liquid/principles/index.md and locating the extension's existing comment-shortcut handling. Done means the requested Liquid comment behavior, brace shortcuts, and proposed Emmet-like expansion are implemented consistently with the plugin principles.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript, vscode
Domain
developer-experience, tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.