feat(prettier-plugin-liquid): support prettier-ignore-start / prettier-ignore-end ranges#1183
Open
SinhSinhAn wants to merge 1 commit intoShopify:mainfrom
Open
feat(prettier-plugin-liquid): support prettier-ignore-start / prettier-ignore-end ranges#1183SinhSinhAn wants to merge 1 commit intoShopify:mainfrom
SinhSinhAn wants to merge 1 commit intoShopify:mainfrom
Conversation
…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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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-ignorecomments (verbose) or.prettierignorefor the whole file (too coarse).Standard Prettier supports
prettier-ignore-start/prettier-ignore-endfor HTML, but the Liquid plugin didn't implement it.How does this PR address it?
The implementation builds on the existing
prettier-ignoreinfrastructure. The plugin already has functions that detect ignore comments and a code path inprintChildthat outputs raw source text for ignored nodes. I extended this with three changes:Detection functions in
printer/utils/node.ts: AddedisPrettierIgnoreRangeStartNodeandisPrettierIgnoreRangeEndNodethat 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.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 unmatchedprettier-ignore-start. If it finds one before finding aprettier-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.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 %}Test plan
prettier-ignore-range) passes with 5 test casesliquid-prettier-ignoretests still pass (single-node ignores unaffected)Closes #1150