Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue #14: Adds rudimentary twig indentation #18

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Issue #14: Adds rudimentary twig indentation #18

wants to merge 1 commit into from

Conversation

dustinleblanc
Copy link

@dustinleblanc dustinleblanc commented Jan 16, 2025 •
edited
Loading

Extends basic html indentation so that at least HTML code in twig templates will indent correctly.

You get results like this:

{% extends "base.html.twig" %}

{% block content %}
{% if true %}
<div>
    <p>Hello World</p>
</div>
{% else %}
<div>
    <p>Goodbye World</p>
</div>
{% endif %}
{% endblock content %}

And for a more HTML heavy file, the referenced base:

<!DOCTYPE html>
<html class="h-full">
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
        {% block stylesheets %}
        {% endblock %}

        {% block javascripts %}
        {% block importmap %}{{ importmap('app') }}{% endblock %}
        {% endblock %}
    </head>
    <body class="h-full">
        <div>
            <div>Some sidebar...</div>
            <main class="py-10">
                <div class="px-4 sm:px-6 lg:px-8">
                    {% block content %}{% endblock %}
                </div>
            </main>
        </div>
    </body>
</html>

Prior to this change, re-indenting the file would collapse all tags to the left side, so while this isn't great, its better.

This could possible close #14 but I would love to get better indentation for the actual Twig tags themselves. With this change the HTML at least indents when using =, but the twig it self (blocks, for loops, if statements, etc) don't get any indentation.

I started adding things like

[
 (for_statement)
 (if_statement)
 ] @indent.begin

to the file, inspired by looking at other examples:
https://github.com/nvim-treesitter/nvim-treesitter/blob/master/queries/scss/indents.scm
https://github.com/nvim-treesitter/nvim-treesitter/blob/master/queries/ruby/indents.scm

I am still playing with it to see if I can get typical twig grammar parts to indent, but I wanted to get the ball rolling as this appears to be a way to get treesitter to start indenting the files.

@dustinleblanc
Issue gbprod#14: Adds rudimentary twig indentation
16a1191 
Extends basic html indentation so that at least HTML code in twig templates will indent correctly.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
1 participant
@dustinleblanc