Auto indenting issues in php files #39142

amc123-glitch · 2017-11-26T03:15:25Z

_ Posted an issue about this which was geared more towards just blade syntax (laravel/php project): [ https://github.com//issues/38101 ]. However, I am seeing the same issue on any php related file. I tried making a page with test.blade.php and test.php and after i click tab to expand the emmet abrevations, I tried to click enter, the div is not formatted nor

On a normal html page if you click enter with the cursor between the open and closing tag you get open tag, next line indented, and then a third line with the closing tag.

Below is all the emmet configuration my install has:

"emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html",
        "blade": "html"
    },
    "emmet.includeLanguages": {
        "vue-html": "html",
        "vue": "html",
        "blade": "html"
    },
    "emmet.triggerExpansionOnTab": true,
    "emmet.showAbbreviationSuggestions": true,
    "emmet.showExpandedAbbreviation": "always",

VSCode Version: 1.18.1
OS Version: macOS High Sierra 10.13.1

Steps to Reproduce:

Create a .php or *.blade.php
type div/h1/p/li/ul
click tab or enter to expand
cursor between the open and close click enter

The text was updated successfully, but these errors were encountered:

amc123-glitch · 2017-11-26T03:21:37Z

I would like to add that I thought at first it could be the laravel blade extension but after talking to all the creators and testing all of the extensions and then seeing it do the same issue with a plain php file, it seems to me that the issue is stemming from maybe a mishandling of php with the built in emmet or a new settings configuration with the latest release that may need to be explained...

jens1o · 2017-11-26T07:59:25Z

In fact, this is part of @ramya-rao-a 's area

amc123-glitch · 2017-11-26T14:35:57Z

@jens1o Should I be messaging her directly or were you trying to get it reassigned to her? This issue is the only thing stopping me from using vscode, since I have been recently doing more php/laravel work than javascript.

jens1o · 2017-11-26T15:08:13Z

I tried to get it reassigned to her. :)

amc123-glitch · 2017-11-26T15:15:36Z

@jens1o thanks. Yeah I have tested every laravel blade extension all together and separately. Then tried just using plain php files and was still getting the same issue. as I said in m original post the expected outlook should be:

<div>
      (indented content)
</div>

But when clicking enter between the open and closing tag I only get:

<div>
</div>

In addition, when I click enter after lets say the open body tag, it does not indent the line it makes the cursor stay against the wall making code line up like:

<body>
<div></div>
</body>

ramya-rao-a · 2017-11-27T03:37:35Z

@AnthonyMichaelc Below is what I get when I expand emmet abbreviations and hit enter after the expansion. Below is on a blank php file on VS Code 1.18.1 with no extensions. As you can see pressing ENTER gives me indented new line.

Can you run code --disable-extensions and see if you can still repro the issue?

amc123-glitch · 2017-11-27T07:18:05Z

@ramya-rao-a tried running code --disable-extensions and wasn't disabling but I ended up just clicking cmd+shift+x and choosing disable all extensions from there.

I then tried it creating a plain php file with the same elements you have. Then tried putting a full template and added divs and still gave me the same issue.

Lastly, I tried quitting vscode and reopening it to see if it needed to be restarted again and got the same result. No matter, how I try it I am still getting the same result. It is late at the moment but I can try later to uninstall all the extensions and slowly try to install until it breaks.

Also, is there any other config for emmet in the settings required. I listed what I currently have, above.

ramya-rao-a · 2017-11-27T07:26:08Z

Do you see the issue only in php files and not in html files?
You dont need any other emmet related settings.
Note that enabling emmet in new file types in now done using emmet.includeLanguages and not emmet.syntaxProfiles, so you can remove the latter

amc123-glitch · 2017-11-27T07:51:51Z

It does this in a test.php file and also in test.blade.php file as well. I tried deleting vscode and redownloading it and then seeing if I can uninstall any extensions related to php/laravel

amc123-glitch · 2017-11-27T14:51:59Z

I even just completely wiped vscode off my mac and made sure no hidden files and then downloaded it from the market site and tried empty settings and also just adding the emmet settings, and created a blank php file, still the same result.

This only started happening for me once the 1.18.1 release, and only happens with php related frameworks and files, mean stack applications work fine for me.

amc123-glitch · 2017-11-27T16:30:32Z

@ramya-rao-a in addition, only way I can get the same function you showed in the gif is by adding this to the settings:

"files.associations": {
        "*.html": "html",
        "*.blade.php": "html"
    },

But by doing that I lose the laravel blade syntax support/labels it as a plain html file.

amc123-glitch · 2017-11-27T16:47:21Z

Try this:

type div
enter or tab on the first suggestion that pops up and then ctrl or cmd z
tab again and then enter.( with divs vscode seems to be using intellisence to expand the divs so this shows on my install as not working still)

It sometimes expands the divs but if I try to put a small,p,a,li,etc tag and try to click enter when the cursor is in the middle of the open and closing tag, it gives me the same issue every time. And this is on plain php and blade files.

I have also tested this on the vscode insiders install as well.

ramya-rao-a · 2017-11-28T06:36:00Z

@AnthonyMichaelc I don't think this is an emmet related issue. This is about auto-indenting. Copy <div></div> to a html file, php file and a blade file. Place cursor between the open and close tag and press enter. I get the below in html and php file

<div>
        |
</div>

And the below in the blade file after installing the larval-blade extension

<div>
|</div>

where | is the cursor.

What do you get? Please try with only the larval-blade extension enabled.

amc123-glitch · 2017-11-29T00:16:57Z

@ramya-rao-a
Tested it on both the insider and the stable version of vscode. there are two laravel-blade extensions (one is version 1.1.1 and the other is 0.0.1)

I tested both extensions separately on both versions of vscode in a fresh laravel project. I also tried them in a php file and Was given the same result.

I places the cursor in between the open and closing tag as you did. First I have to add that opening any php file or blade file requires I wait 5 to 10 seconds as the intellisence and emmet will not show. If I try to expand an element before waiting it'll show up delayed and mixed with anything else I typed.

So if I typed

<div>
   hello World
</div>

It will end up coming out like:
<divhelloWorld></divhelloWorld>

Lastly, at least on the downloaded versions currently on Microsoft's domains have given me these issues. Because I completely wiped my installs and redownloaded the stable and the insider vscode from the official website.

I did not see the same result on Windows or Ubuntu.

ramya-rao-a · 2017-11-29T00:59:48Z

@AnthonyMichaelc In plain php files

I cannot repro with no extensions installed
I cannot repro with the larval-blade (0.0.1) extension is installed
I can repro when both the larval-blade extensions are installed
After this point, I continue to repro even after disabling both extensions and uninstalling and installing code

This is not related to emmet
This is related to auto-indenting

@rebornix should be able to help here, he can repro as well.

amc123-glitch · 2017-11-29T01:03:30Z

Thank you @ramya-rao-a and hopefully @rebornix can help resolve this because vscode is definitely one of my favorite editors.

amc123-glitch · 2017-11-29T23:51:49Z

@rebornix Have you made any discoveries?

amc123-glitch · 2017-11-30T23:43:32Z

@roblourens Have you had any progress on this issue? @rebornix was assigned this after some testing but was not reachable for a day or so I think that is why you are now assigned.

I would like to continue using VSCode (stable or insiders) but if I can't get this fixed I won't be able to continue, and I am sure others building with php or laravel will have to do the same.

ramya-rao-a · 2017-12-01T03:11:13Z

@roblourens was co-assigned this issue as he usually looks at php issues. Together they can help in setting the indentation rules for php

amc123-glitch · 2017-12-01T21:22:53Z

To add I have completely wiped the insiders install and reinstalled it. I was able to get it to expand if I added this line and not extensions:

"editor.autoIndent": true,
    "emmet.includeLanguages": {
        "php": "html",
        "*.php": "html",
        "blade": "html",
        "*.blade.php": "html"
    },

But I am not able to successfully install any of the blade syntax plugins. If i install any of them all php and blade files lose the ability to add the indented line. It seems there is some possible setting requirement for it to allow this functionality.

ramya-rao-a · 2017-12-02T01:42:56Z

@AnthonyMichaelc Again, to re-iterate, the issue is not with emmet. Its with auto-indentation on pressing ENTER between open and close tags.

amc123-glitch · 2017-12-03T06:42:08Z

@ramya-rao-a I understand. I am simply adding more detail to the issue to help the people you have passed this issue on to but since none of the people you tagged in seem to care about the issue, this will be the reason I and I am sure other will not be able to use vscode and abandon the editor.

Not to be rude, but I always try to help out and its been two new people and a couple days, with not even a word from either.

ramya-rao-a · 2017-12-04T06:20:46Z

@AnthonyMichaelc The reason for my re-iteration that this is not emmet related is to ensure that whoever picks this issue doesn't spend time chasing down emmet and instead can look into auto-indenting rules.

We appreciate you adding as much details here.

I have submitted a PR with a suggested fix for php files. @roblourens / @rebornix, please take a look at the PR. If that fix helps, then we can suggest the same for the blade syntax

Copy OnEnter rules from html to php #39142

ramya-rao-a · 2017-12-04T19:36:04Z

@AnthonyMichaelc Please try the Insiders build on Dec 5th, 2017 and let us know if the issue is resolved in php files

amc123-glitch · 2017-12-05T19:34:30Z

@ramya-rao-a I just opened vscode insider build updated to the latest version and with php files I am still not able to. I tested the insider build with all the blade entensions and also without them, and even tried just a plain php file.

I also used the same settings in both builds and tried removing some lines to see if there was anything interfering.

However, in the stable build, I am expand with the indent a div with no class or id by clicking enter while clicking enter or tab and then enter with the cursor in between the open and closing. If I add a class: div.container and try to do the same it does the same behavior as before. It will only add the indented line if I dont have the class or id and also if i expand from intellisence suggestion by clicking enter. If I type div and click enter it will expand but then when I click enter it does not add the indent.

If there a way I could show you guys from my screen, maybe that could help a little easier..

In addition, blade.php files still not working, regardless of which extension I use.

Was there any settings changes needed to further test this out for you?

ramya-rao-a · 2017-12-05T23:30:26Z

@AnthonyMichaelc I found that the issue does not occur if I open a HTML file atleast once in the span of the session of the current VS Code window.

The html onEnter rules are supposed to kick in and provide the new empty line with indentation.
If no html file is ever opened, then the html extension doesnt get activated and so its onEnter rules doesnt come into affect.

Can you try opening an html file and then open your php file (you can close the html file now) and try to repro the issue?

…ied in a php block #39142

amc123-glitch · 2017-12-05T23:48:44Z

That seems to be working now on *.php files, have to try blade.php files now.

I tested both stable and insider. Result being that the plain php file does in fact give the indent I was looking for but unfortuntely with all of the blade extensions, it does not work. I opened an html file each time I installed a different blade extension and it does not indent

ramya-rao-a · 2017-12-06T00:14:43Z

Result being that the plain php file does in fact give the indent I was looking for but unfortuntely with all of the blade extensions, it does not work.

That is because the blade extension syntax treats the html tokens as "laravel" instead of "html".
In the below image, I have used the same file contents in the 2 files. On the left is test.php, on the right is test.php.blade using one of the blade extensions. Then keeping cursor on the h2 tag, run the command Developer: Inspect TM Scopes

So the blade extension treats everything as a new language "laravel". None of the rules of html can be applied to it. This needs to be fixed in the extension.

php files on the other hand define the html parts of the file as "html" and script parts of the file as "php". So VS Code can apply the html rules on the html parts.

amc123-glitch · 2017-12-06T00:25:44Z

So this would apply to all of the current extensions for blade need to change this in order for that to work?

I know I can add the "files.associations" line but that would remove all blade syntax highlighting.

ramya-rao-a · 2017-12-06T01:45:06Z

That's right.

The out of the box support of VS Code for html can only work on new syntax if the new syntax mark the html parts of the file as html. If they dont, then the extensions have to do the work for indentation, bracket matchine, onEnterRules etc.

vscodebot bot assigned roblourens Nov 26, 2017

vscodebot bot added the php PHP support issues label Nov 26, 2017

roblourens assigned ramya-rao-a and unassigned roblourens Nov 27, 2017

ramya-rao-a changed the title ~~PHP emmet not expanding~~ Auto indenting issues in php files Nov 29, 2017

ramya-rao-a assigned rebornix and unassigned ramya-rao-a Nov 29, 2017

ramya-rao-a added the editor-autoindent Editor auto indentation issues label Nov 29, 2017

ramya-rao-a assigned roblourens Nov 30, 2017

ramya-rao-a added a commit that referenced this issue Dec 4, 2017

Copy OnEnter rules from html to php #39142

e13cc67

ramya-rao-a mentioned this issue Dec 4, 2017

Copy OnEnter rules from html to php #39142 #39523

Merged

roblourens closed this as completed in #39523 Dec 4, 2017

roblourens added a commit that referenced this issue Dec 4, 2017

Merge pull request #39523 from Microsoft/php-auto-indent

f2e4231

Copy OnEnter rules from html to php #39142

roblourens mentioned this issue Dec 4, 2017

HTML indentation inside PHP files #34178

Closed

ramya-rao-a added a commit that referenced this issue Dec 5, 2017

Remove the onEnter rules from html in php as they will never get appl…

6aa6f0d

…ied in a php block #39142

ramya-rao-a added a commit that referenced this issue Dec 5, 2017

Use html on enter rules in php #39142

9668397

ramya-rao-a mentioned this issue Dec 5, 2017

Use html on enter rules in php #39741

Closed

This was referenced Dec 11, 2017

Problem for auto indent onecentlin/laravel-blade-snippets-vscode#35

Closed

You need to look at how your handling php/html Link Below onecentlin/laravel-blade-snippets-vscode#37

Open

Formatting error cjhowedev/laravel-blade-vscode#1

Open

vscodebot bot locked and limited conversation to collaborators Jan 18, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Auto indenting issues in php files #39142

Auto indenting issues in php files #39142

amc123-glitch commented Nov 26, 2017 •

edited

amc123-glitch commented Nov 26, 2017

jens1o commented Nov 26, 2017

amc123-glitch commented Nov 26, 2017

jens1o commented Nov 26, 2017

amc123-glitch commented Nov 26, 2017

ramya-rao-a commented Nov 27, 2017

amc123-glitch commented Nov 27, 2017

ramya-rao-a commented Nov 27, 2017

amc123-glitch commented Nov 27, 2017

amc123-glitch commented Nov 27, 2017

amc123-glitch commented Nov 27, 2017

amc123-glitch commented Nov 27, 2017

ramya-rao-a commented Nov 28, 2017 •

edited

amc123-glitch commented Nov 29, 2017

ramya-rao-a commented Nov 29, 2017

amc123-glitch commented Nov 29, 2017

amc123-glitch commented Nov 29, 2017

amc123-glitch commented Nov 30, 2017

ramya-rao-a commented Dec 1, 2017 •

edited

amc123-glitch commented Dec 1, 2017

ramya-rao-a commented Dec 2, 2017

amc123-glitch commented Dec 3, 2017

ramya-rao-a commented Dec 4, 2017

ramya-rao-a commented Dec 4, 2017

amc123-glitch commented Dec 5, 2017 •

edited

ramya-rao-a commented Dec 5, 2017

amc123-glitch commented Dec 5, 2017

ramya-rao-a commented Dec 6, 2017

amc123-glitch commented Dec 6, 2017

ramya-rao-a commented Dec 6, 2017

Auto indenting issues in php files #39142

Auto indenting issues in php files #39142

Comments

amc123-glitch commented Nov 26, 2017 • edited

amc123-glitch commented Nov 26, 2017

jens1o commented Nov 26, 2017

amc123-glitch commented Nov 26, 2017

jens1o commented Nov 26, 2017

amc123-glitch commented Nov 26, 2017

ramya-rao-a commented Nov 27, 2017

amc123-glitch commented Nov 27, 2017

ramya-rao-a commented Nov 27, 2017

amc123-glitch commented Nov 27, 2017

amc123-glitch commented Nov 27, 2017

amc123-glitch commented Nov 27, 2017

amc123-glitch commented Nov 27, 2017

ramya-rao-a commented Nov 28, 2017 • edited

amc123-glitch commented Nov 29, 2017

ramya-rao-a commented Nov 29, 2017

amc123-glitch commented Nov 29, 2017

amc123-glitch commented Nov 29, 2017

amc123-glitch commented Nov 30, 2017

ramya-rao-a commented Dec 1, 2017 • edited

amc123-glitch commented Dec 1, 2017

ramya-rao-a commented Dec 2, 2017

amc123-glitch commented Dec 3, 2017

ramya-rao-a commented Dec 4, 2017

ramya-rao-a commented Dec 4, 2017

amc123-glitch commented Dec 5, 2017 • edited

ramya-rao-a commented Dec 5, 2017

amc123-glitch commented Dec 5, 2017

ramya-rao-a commented Dec 6, 2017

amc123-glitch commented Dec 6, 2017

ramya-rao-a commented Dec 6, 2017

amc123-glitch commented Nov 26, 2017 •

edited

ramya-rao-a commented Nov 28, 2017 •

edited

ramya-rao-a commented Dec 1, 2017 •

edited

amc123-glitch commented Dec 5, 2017 •

edited