Change:
_ Posted an issue about this which was geared more towards just blade syntax (laravel/php project): [ ]. However, I am seeing the same issue on any php related file. I tried making a page with and 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: VSCode Version: 1.18.1 OS Version: macOS High Sierra 10.13.1 Steps to Reproduce: a .php or * div/h1/p/li/ul tab or enter to expand between the open and close click enter
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...
In fact, this is part of 's area
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.
I tried to get it reassigned to her. :)
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: But when clicking enter between the open and closing tag I only get: 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:
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 and see if you can still repro the issue?
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 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.
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 and not , so you can remove the latter
It does this in a file and also in file as well. I tried deleting vscode and redownloading it and then seeing if I can uninstall any extensions related to php/laravel
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.
in addition, only way I can get the same function you showed in the gif is by adding this to the settings: But by doing that I lose the laravel blade syntax support/labels it as a plain html file.
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.
I don't think this is an emmet related issue. This is about auto-indenting. Copy 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 And the below in the blade file after installing the larval-blade extension where is the cursor. What do you get? Please try with only the larval-blade extension enabled.
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 It will end up coming out like: 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.
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 should be able to help here, he can repro as well.
Thank you and hopefully can help resolve this because vscode is definitely one of my favorite editors.
Have you made any discoveries?
Have you had any progress on this issue? 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.
was co-assigned this issue as he usually looks at php issues. Together they can help in setting the indentation rules for php
To add I have completely wiped the insiders install and reinstalled it. I was able to get it to expand if I this line and not extensions: 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.
Again, to re-iterate, the issue is not with emmet. Its with auto-indentation on pressing ENTER between open and close tags.
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.
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. / please take a look at the PR. If that fix helps, then we can suggest the same for the blade syntax
Please try the Insiders build on Dec 5th, 2017 and let us know if the issue is resolved in php files
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, files still not working, regardless of which extension I use. Was there any settings changes needed to further test this out for you?
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?
That seems to be working now on *.php files, have to try 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 <img width="280" alt="screen shot 2017-12-05 at 6 48 13 pm" src="https://user-"<img width="553" alt="screen shot 2017-12-05 at 6 46 36 pm" src="https://user-"
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 , on the right is using one of the blade extensions. Then keeping cursor on the h2 tag, run the command ! 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.
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.
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.

Discussion:
import PHPSignatureHelpProvider from './features/signatureHelpProvider'; import PHPValidationProvider from './features/validationProvider'; <ins> const EMPTY_ELEMENTS: string[] = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'menuitem', 'meta', 'param', 'source', 'track', 'wbr']; </ins> export function activate(context: vscode.ExtensionContext): any { let validator = new PHPValidationProvider(context.workspaceState);

context.subscriptions.push(vscode.languages.registerHoverProvider('php', new PHPHoverProvider())); context.subscriptions.push(vscode.languages.registerSignatureHelpProvider('php', new PHPSignatureHelpProvider(), '(', ',')); // need to set in the extension host as well as the completion provider uses it. vscode.languages.setLanguageConfiguration('php', { wordPattern: /(-?d*.dw*)|([^-`~!@#%^&*()=+[{]}|;:'",.<>/?s]+)/g,

// e.g.  *-----*/| beforeText: /^(t|(  ))* *[^/]**/s*$/, action: { indentAction: vscode.IndentAction.None, removeText: 1 } <ins> }, { beforeText: new RegExp(`<(?!(?:${EMPTY_ELEMENTS.join('|')}))([_:w][_:w-.d]*)([^/>]*(?!/)>)[^<]*$`, 'i'), afterText: /^</([_:w][_:w-.d]*)s*>/i, action: { indentAction: vscode.IndentAction.IndentOutdent } }, { beforeText: new RegExp(`<(?!(?:${EMPTY_ELEMENTS.join('|')}))(w[wd]*)([^/>]*(?!/)>)[^<]*$`, 'i'), action: { indentAction: vscode.IndentAction.Indent } </ins> } ] });