The code looks bad after formatting

[kanlukasz]

Description:

If we have a bit more code, the code looks bad after formatting.
Maybe it's related with #171

Disclaimer:

My example is the custom Wordpress template - I know that the code style in Wordpress is the worst horror possible and it's hard to keep it with some systematic logic. However, the formatting with bmewburn add-on is correct. (you can check how it works there)

Video gif screen below:

Code snippet for tests:

<section class="container text-center component-team-slider mt-5 mt-md-7 mb-7">
    <h2 class="mt-6 mb-5 mb-md-7 component-team-slider__spec-display">
        <?php echo in_category(11) ? 'Poznan' : 'Nie'; ?>
    </h2>
    <?php
    $post_id = 214;
    $post_object = get_post($post_id);
    echo $post_object->post_content;
    ?>
</section>

<div id="card-slider" class="splide mx-2 mx-md-5 mx-lg-9 component-team-slider">
    <div class="splide__arrows">
        <button class="splide__arrow splide__arrow--prev"></button>
        <button class="splide__arrow splide__arrow--next"></button>
    </div>
    <div class="container">
        <div class="splide__track">
            <ul class="splide__list">
                <?php
                $query_team_slider = new WP_Query(array(
                    'cat' => 11,
                    'meta_key'     => 'post_zespol_prior',
                    'orderby'      => 'meta_value',
                    'order'        => 'DESC',
                    'post__not_in' => array($post->ID)
                ));
                ?>
                <?php if ($query_team_slider->have_posts()) : ?>
                    <?php while ($query_team_slider->have_posts()) : $query_team_slider->the_post(); ?>
                        <li class="splide__slide text-center">
                            <div class="splide__slide__container">
                                <a class="text-stms" href="<?php esc_url(the_permalink()); ?>"><?php the_post_thumbnail('thumbnail', array('class' => 'component-team-slider__image mb-4')); ?></a>
                            </div>
                            <h2 class="mb-3 mt-2 component-team-slider__heading2"><a class="text-stms" href="<?php esc_url(the_permalink()); ?>"><?php the_title(); ?></a></h2>
                            <?php the_field('post_zespol_zajawka'); ?>
                            <div class="mt-4">
                                <?php
                                $social = get_field('post_zespol_socialmedia');
                                if ($social) {
                                    print $social['facebook'] ? '<span href="' . esc_url($social['facebook']) . '"></span>' : null;
                                }
                                ?>
                            </div>
                        </li>
                    <?php endwhile; ?>
                    <?php $query_team_slider->reset_postdata(); ?>
                <?php else : ?>
                    <?php _e('No data', 'theme'); ?>
                <?php endif; ?>
            </ul>
        </div>
    </div>
</div>

Environment for tests:

• VsCode Version: 1.72.2
• PHP Tools v1.18.10878 Pre-Release
• OS Name: Microsoft Windows 11 Pro
• OS Version: 10.0.22621 N/A Build 22621

VSCode settings:

{
    "workbench.colorTheme": "Darcula",
    "php.suggest.basic": false,
    "php.validate.enable": false,
    "emmet.excludeLanguages": [
        "markdown",
        "php"
    ],
    "php.problems.exclude": {
        "wp-admin/": true,
        "wp-includes/": true,
        "wp-content/plugins/": true,
        "vendor/": true,
    },
    "php.codeLens.enabled": false
}

[Miloslav]

Hi Lukasz,

This one is related to Indent code in PHP tags formatter setting which we have internally(cannot be configured by the user now). And it's turned off in PSR-2. Please try a different code style, it should indent the code according to <?php tag position.

I actually think it doesn't make sense to turn this off for any code-style. Or we will just expose the settings, so user can decide.

[kanlukasz]

Thank you for the explanation.

---

Or we will just expose the settings, so user can decide.

This is good idea

---

I changed this option to PHP Tools, but I still see bugs.

E.g.

Before formatting:

<h2 class="mb-3 mt-2 component-team-slider__heading2"><a class="text-stms" href="<?php esc_url(the_permalink()); ?>"><?php the_title(); ?></a></h2>

After formatting:

<h2 class="mb-3 mt-2 component-team-slider__heading2"><a class="text-stms" href="<?php esc_url(the_permalink()); ?>">
        <?php the_title(); ?>
    </a></h2>

[kanlukasz]

Another example (with previous code snippet)

Before formatting:

After formatting:

[Miloslav]

Thanks!

There are multiple issues here:

1. from the next release we will indent PHP tags content for every code style
2. fixed in the pre-release now - weird new lines in PHP code shown at The code looks bad after formatting #173 (comment)
3. weird new lines in HTML code - to be fixed
4. Incorrect indentation when using alternate php syntax #171

[Miloslav]

1. fixed now, although there is still one related issue. When it's necessary to call formatting twice to indent correctly ( will be fixed)
2. weird new lines in PHP code should be fixed
3. This HTML wrapping behavior is actually a feature. It can be altered by html.format.wrapAttributes and html.format.wrapLineLength or html.format.wrapAttributesIndentSize
4. still to be addressed

I think this one can be closed since all mentioned issues are either fixed or they have their own ticket. Please feel free to reopen if it's not true.

Thanks

[kanlukasz]

Ok, what about this case?

Before formatting:

<h2 class="mb-3 mt-2 component-team-slider__heading2"><a class="text-stms" href="<?php esc_url(the_permalink()); ?>"><?php the_title(); ?></a></h2>

After formatting:

<h2 class="mb-3 mt-2 component-team-slider__heading2"><a class="text-stms" href="<?php esc_url(the_permalink()); ?>">
        <?php the_title(); ?>
    </a></h2>

(Tested with Pre-Release 1.25.11540)

Is it related to the html.format.* options?

[kanlukasz]

Another example (unless it's a different bug):

Before formatting (correct indentation here):

<div class="container">
    <div class="splide__track">
        <ul class="splide__list">
            <?php if ($query_team_slider->have_posts()) : ?>
                <?php while ($query_team_slider->have_posts()): ?>
                    <?php $query_team_slider->the_post(); ?>
                <?php endwhile; ?>
                <?php $query_team_slider->reset_postdata(); ?>
            <?php else: ?>
                <?php _e('No data', 'theme'); ?>
            <?php endif; ?>
        </ul>
    </div>
</div>

After formatting (wrong indentation):

<div class="container">
    <div class="splide__track">
        <ul class="splide__list">
            <?php if ($query_team_slider->have_posts()): ?>
            <?php while ($query_team_slider->have_posts()): ?>
            <?php $query_team_slider->the_post(); ?>
            <?php endwhile; ?>
            <?php $query_team_slider->reset_postdata(); ?>
            <?php else: ?>
            <?php _e('No data', 'theme'); ?>
            <?php endif; ?>
        </ul>
    </div>
</div>

[Miloslav]

Ok, what about this case?

Before formatting:

<h2 class="mb-3 mt-2 component-team-slider__heading2"><a class="text-stms" href="<?php esc_url(the_permalink()); ?>"><?php the_title(); ?></a></h2>

After formatting:

<h2 class="mb-3 mt-2 component-team-slider__heading2"><a class="text-stms" href="<?php esc_url(the_permalink()); ?>">
        <?php the_title(); ?>
    </a></h2>

(Tested with Pre-Release 1.25.11540)

Is it related to the html.format.* options?

Yes, we try to respect these HTML settings. Try to set this:
"html.format.wrapLineLength": 0

[Miloslav]

Another example (unless it's a different bug):

Before formatting (correct indentation here):

<div class="container">
    <div class="splide__track">
        <ul class="splide__list">
            <?php if ($query_team_slider->have_posts()) : ?>
                <?php while ($query_team_slider->have_posts()): ?>
                    <?php $query_team_slider->the_post(); ?>
                <?php endwhile; ?>
                <?php $query_team_slider->reset_postdata(); ?>
            <?php else: ?>
                <?php _e('No data', 'theme'); ?>
            <?php endif; ?>
        </ul>
    </div>
</div>

After formatting (wrong indentation):

<div class="container">
    <div class="splide__track">
        <ul class="splide__list">
            <?php if ($query_team_slider->have_posts()): ?>
            <?php while ($query_team_slider->have_posts()): ?>
            <?php $query_team_slider->the_post(); ?>
            <?php endwhile; ?>
            <?php $query_team_slider->reset_postdata(); ?>
            <?php else: ?>
            <?php _e('No data', 'theme'); ?>
            <?php endif; ?>
        </ul>
    </div>
</div>

This is still an issue, but we track it here #171

[kanlukasz]

Yes, we try to respect these HTML settings. Try to set this: "html.format.wrapLineLength": 0

Now it's fine until we use the formatting twice. But you mentioned it will be fixed, right?

[Miloslav]

Yes, please feel free to open a github issue for that one - just to make sure, it's the same as we have internally