Skip to content

feat(prettier-plugin-liquid): support prettier-ignore-start / prettier-ignore-end ranges#1183

Open
SinhSinhAn wants to merge 1 commit intoShopify:mainfrom
SinhSinhAn:feat/prettier-ignore-range
Open

feat(prettier-plugin-liquid): support prettier-ignore-start / prettier-ignore-end ranges#1183
SinhSinhAn wants to merge 1 commit intoShopify:mainfrom
SinhSinhAn:feat/prettier-ignore-range

Conversation

@SinhSinhAn
Copy link
Copy Markdown

What is this PR?

This PR adds support for range-based formatting ignores (prettier-ignore-start / prettier-ignore-end) to the Liquid prettier plugin. Currently, the plugin only supports single-node ignores with <!-- prettier-ignore --> or {% # prettier-ignore %}, which means if you want to preserve the formatting of a multi-node block, you have to add a separate ignore comment before every single node. That gets noisy fast, especially in larger templates with intentional whitespace or layout.

What was the issue?

Issue #1150 describes the problem well: there's no way to tell the formatter "leave this entire section alone." The only workarounds are per-node prettier-ignore comments (verbose) or .prettierignore for the whole file (too coarse).

Standard Prettier supports prettier-ignore-start / prettier-ignore-end for HTML, but the Liquid plugin didn't implement it.

How does this PR address it?

The implementation builds on the existing prettier-ignore infrastructure. The plugin already has functions that detect ignore comments and a code path in printChild that outputs raw source text for ignored nodes. I extended this with three changes:

  1. Detection functions in printer/utils/node.ts: Added isPrettierIgnoreRangeStartNode and isPrettierIgnoreRangeEndNode that recognize both HTML comments (<!-- prettier-ignore-start -->) and Liquid inline comments ({% # prettier-ignore-start %}), following the same dual-format pattern as the existing single-node ignore.

  2. Range resolution via isInsidePrettierIgnoreRange: When the printer asks "should this node be printed raw?", this function walks backward through the node's siblings looking for an unmatched prettier-ignore-start. If it finds one before finding a prettier-ignore-end (or running out of siblings), the node is inside a range and gets printed as raw source text. The start and end comment nodes themselves are also printed raw.

  3. Test fixtures covering the key scenarios: HTML comment ranges, Liquid comment ranges, nodes outside the range still being formatted, multiple ranges in the same parent, and ranges spanning several different node types.

Both syntaxes are supported:

<!-- prettier-ignore-start -->
<div class="custom-layout">
  {{ some_variable | complicated_filter: foo: bar }}
  {% render 'component', foo: bar %}
</div>
<!-- prettier-ignore-end -->
{% # prettier-ignore-start %}
<div class="custom-layout">
  {{ some_variable | complicated_filter: foo: bar }}
  {% render 'component', foo: bar %}
</div>
{% # prettier-ignore-end %}

Test plan

  • New test suite (prettier-ignore-range) passes with 5 test cases
  • Existing liquid-prettier-ignore tests still pass (single-node ignores unaffected)
  • Both HTML comment and Liquid comment syntax work
  • Nodes outside the range are formatted normally
  • Multiple ranges in the same parent work independently

Closes #1150

…r-ignore-end ranges

Add range-based ignoring to the Liquid prettier plugin, allowing users
to preserve formatting across multiple nodes without needing to add
a prettier-ignore comment before each one.

Supports both HTML and Liquid comment syntax:
  <!-- prettier-ignore-start --> / <!-- prettier-ignore-end -->
  {% # prettier-ignore-start %} / {% # prettier-ignore-end %}

Nodes between the start and end markers are printed as raw source text,
while nodes outside the range continue to be formatted normally.

Closes Shopify#1150
@SinhSinhAn SinhSinhAn requested a review from a team as a code owner April 18, 2026 18:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support prettier-ignore-start / prettier-ignore-end in Liquid templates

1 participant