Visual Studio Code for ProcessWire Developers

[kongondo]

A similar question regarding comparisons of the 3 main PHP intellisense extensions

https://github.com/bmewburn/vscode-intelephense/issues/128

[bernhard]

@AndZyk do you have any settings for us?

  Quote

Configuring

1. Turn off the php.suggest.basic setting for best results. It is recommended to keep the vscode built-in php linter enabled for the time being as the Intelephense parser does not identify all compile time errors.
2. Add files you do not require intelligence on to the files.exclude setting. Reducing the number of unecessary files read will improve user experience through increased performance and more appropriate intelligence.
3. Add any non-standard php file extensions in use to the files.associations setting.

Expand  

 

  On 9/18/2018 at 12:43 PM, kongondo said:

If I called something similar to $blog = $modules->get("MarkupBlog"), they will pick up on the methods and properties in MarkupBlog! Do you get that with intelephense or it isn't that advanced?

Expand  

I think there are some techniques to tell the ide which class the variable is. @AndZyk I'd be interested in that as well. Maybe you already know how to do that? Thx!

[AndZyk]

@kongondo and @bernhard

I am happy, that you like Intelephense. I just installed it, because it was recommended in the plugins list and has many installations. ?

It does indeed find many of the ProcessWire functions if you use the Functions API. Only thing confusing for me is, that it also lists every other PHP functions, which I don't need most of the time.

  On 9/18/2018 at 1:11 PM, bernhard said:

I think there are some techniques to tell the ide which class the variable is. @AndZyk I'd be interested in that as well. Maybe you already know how to do that?

Expand  

I haven't made any configuration to this plugin yet or read the description. ?

But I would be interested as well, if it would be possible to configure it to make it more specific for development with ProcessWire.

[bernhard]

  On 9/18/2018 at 1:23 PM, AndZyk said:

Only thing confusing for me is, that it also lists every other PHP functions, which I don't need most of the time.

Expand  

can you please provide an example where this is annoying for you?

other question: do you have an extension that brings you right to the php docs, for example when using "file_get_contents()"? or that shows e preview of that?

[AndZyk]

Here is an example:

My installed extensions are:

• advanced-new-file
• Apache Conf
• Dash
• fish-vscode
• German Language Pack
• Material Theme
• PHP Debug
• PHP Intelephense
• Project Manager
• sftp
• Trailing Spaces
• vscode-pdf

[bernhard]

You mean the $cookie etc. suggestions?

This is what I get:

I guess that's the setting mentioned in the extensions docs:

  Quote

Turn off the php.suggest.basic setting for best results. It is recommended to keep the vscode built-in php linter enabled for the time being as the Intelephense parser does not identify all compile time errors.

Expand  

[AndZyk]

Thank you very much for the hint. This is the reason why you should always RTFM. ?

[kongondo]

I've tried intelephense and it's not working for me. Only PHP functions show up. Anything I might be missing? I'm on windows 7

[adrian]

Hey @kongondo - you tempted me to give VSCode another shot and using it now, but it looks like there is some weird matching going on. This popped up when I typed the closing ">" at the end of </div>

Any thoughts?

Thanks

[kongondo]

  On 9/18/2018 at 8:56 PM, adrian said:

you tempted me to give VSCode another shot and using it now,

Expand  

Great!

  On 9/18/2018 at 8:56 PM, adrian said:

This popped up when I typed the closing ">" at the end of </div>

Any thoughts?

Expand  

Oh no! That's because it is matching the > in the prefix value in the snippet. So, I should change this:

"prefix": "pages->find(\"selector\")"

to this:

"prefix": "pagesfind(\"selector\")"

 

  On 9/18/2018 at 8:56 PM, adrian said:

when I typed the closing ">" at the end of </div>

Expand  

Thanks for catching this, but hey, you shouldn't be typing HTML closing tags! ? VSC extensions should do that for you. See Auto Close Tag. It can do this:

 

Have a look at Auto Rename Tag as well (it acts up sometimes though).

Regarding ProcessWire variables, first check out intelephense (as per previous discussions earlier today). If it works for you, then no need for my snippets :-). I've gone back to my snippets atm since intelephense is not working for me ?

[bernhard]

Hey @kongondo, not sure why you need auto close tag as an extension, I don't see any difference to the built in emmet support: https://code.visualstudio.com/docs/editor/emmet

  On 9/18/2018 at 5:42 PM, kongondo said:

I've tried intelephense and it's not working for me. Only PHP functions show up. Anything I might be missing? I'm on windows 7

Expand  

I'm on Win10 and after startup it just works. Do you see that it is indexing when you startup vsc with a project that has a wire folder?

 

 

[AndZyk]

Thank you for recommending Auto Close Tag and Auto Rename Tag. Especially closing tags drove me nuts the last weeks. ?

  On 9/18/2018 at 5:42 PM, kongondo said:

I've tried intelephense and it's not working for me. Only PHP functions show up. Anything I might be missing? I'm on windows 7

Expand  

For me it only works with ProcessWire functions, if I have added a folder with a ProcessWire installation to my workspace and saved the file somewhere in this folder before.

 

Edit:

As @bernhard mentioned, the built in Emmet does the same. Only thing missing for me was expansion on tab. So I don't need the Auto Close Tag extension. ?

[bernhard]

  On 9/19/2018 at 7:01 AM, AndZyk said:

Only thing missing for me was expansion on tab

Expand  

  Quote

Using Tab for Emmet expansions

If you want to use the Tab key for expanding the Emmet abbreviations, add the following setting:

"emmet.triggerExpansionOnTab": true

This setting allows using the Tab key for indentation when text is not an Emmet abbreviation.

Expand  

RTFM ?

[kongondo]

  On 9/19/2018 at 6:58 AM, bernhard said:

I'm on Win10 and after startup it just works. Do you see that it is indexing when you startup vsc with a project that has a wire folder?

Expand  

 

  On 9/19/2018 at 7:01 AM, AndZyk said:

For me it only works with ProcessWire functions, if I have added a folder with a ProcessWire installation to my workspace and saved the file somewhere in this folder before.

Expand  

Facepalm! ?. I was testing in a workspace where wire folder was not part of the workspace!!! Thanks guys. It works. After further testing, I think I'll stick with my snippets though due to the following reasons:

1. Intelephense requires that I type the -> i.e.. First, I type pages, then I type ->, then I select the property/method I want. Meaning, to get $pages->find('selector'), I need to type 3 times! And it doesn't give me the "" around the string 'selector'. Using the snippets, I only need to type once; e.g., pagesfind, hit tab and bam, I get the whole thing, $pages->find("selector");
2. With the snippets, I get the closing semicolon at the end of the statement. Not with intelephense
3. With the snippets, I can use normal variable syntax; I don't use the Functions API ?

 

  On 9/19/2018 at 6:58 AM, bernhard said:

I don't see any difference to the built in emmet support: https://code.visualstudio.com/docs/editor/emmet

Expand  

Aah. This is because I had Auto Close Tag before support was included in VSC 1.16. Also, one has to enable it on editor.quickSuggestions > strings:true :-).

 

Edited September 19, 2018 by kongondo

[kongondo]

I have updated the original snippet (variables API) in the  Gist.  This addresses the > issue reported by @adrian. Typing doesn't change. E.g.g pagesfind vs pages find will return the same suggestion.

 

[kongondo]

Hmm. More Intelephense quirks. This extension just doesn't want to work on my system. If I hover over a variable, I expect it to show me (peek preview) the value of that variable as initially set. It doesn't do this. At times it shows the variable type at times it shows nothing. With PHP IntelliSense, it works every time. I get these on hover.

 

[bernhard]

Thx @AndZyk for the Intelephense hint! Really awesome tool I was looking for for quite a long time ?

Ever needed the correct collapsed state for one of your inputfields? No need to head over to the api docs any more ? and even with smart search (note that I typed "colloc")

 

[AndZyk]

Looks like a interesting extension:

Getting hints from Visual Studio Code

?

[bernhard]

I really like the code suggestions of inteliphense even though they are not perfect and I'm not sure if the extension is still maintained well (https://github.com/bmewburn/vscode-intelephense/issues/135)

 

One thing I'd have / know is how to tell intelephense that one variable represents a special class, like here in my hook where the form is retrieved via $event->arguments(0) and so vscode does not know that is is an InputfieldForm class.

Can I do something like this somehow?

/* @var $form ProcessWire\InputfieldForm */

What I want to have is something like this:

And what I get is this:

 
 

[kongondo]

  On 9/19/2018 at 6:58 AM, bernhard said:

Hey @kongondo, not sure why you need auto close tag as an extension, I don't see any difference to the built in emmet support: https://code.visualstudio.com/docs/editor/emmet

Expand  

I've gone back to using Auto Close tag extension as emmet only works with HTML files. It doesn't work with HTML inside PHP files. It's not auto-closing for me...

[AndZyk]

Emmet defnitely works with PHP files too. How do you expand with Emmet? I recommend using tab for the expansions:

  On 9/19/2018 at 7:11 AM, bernhard said:

"emmet.triggerExpansionOnTab": true

Expand  

Inside your PHP file you write for example div, then press tab and it opens and closes the HTML tag <div></div>. ?

[kongondo]

  On 9/28/2018 at 4:41 PM, AndZyk said:

Emmet defnitely works with PHP files too. How do you expand with Emmet? I recommend using tab for the expansions:

Inside your PHP file you write for example div, then press tab and it opens and closes the HTML tag <div></div>. ?

Expand  

Aah. Thanks. I'm too lazy though. Auto close doesn't require me to press tab :-). Btw, auto close changes the matching tag if the opening tag is edited. If I have a <span> and want to change it to a div, I just type over/edit the span and the matching closing span tag will be changed to a </div> (but it fails sometimes). Not sure emmet can do that.

[gmclelland]

Emmet works in php files with "emmet.triggerExpansionOnTab": true, but the built in Auto Close tags feature stops working in php files for some reason.

I'm not sure, but I think I also had to add the following as well to my settings.json:

// from https://caffeinecreations.ca/blog/craft-twig-cheatsheet-for-visual-studio-code/
// from https://code.visualstudio.com/docs/editor/emmet
"emmet.includeLanguages": {
    "twig": "html",
    "php": "html",
    "javascript": "javascriptreact",
    "vue-html": "html"
},

You can see the VSCode Auto Close tags feature by typing in an .html file <div>tab tab which expands it to <div></div>.  In a php file this won't work in my setup at least.

[AndZyk]

  On 9/28/2018 at 5:11 PM, kongondo said:

Aah. Thanks. I'm too lazy though. Auto close doesn't require me to press tab ?. Btw, auto close changes the matching tag if the opening tag is edited. If I have a <span> and want to change it to a div, I just type over/edit the span and the matching closing span tag will be changed to a </div> (but it fails sometimes). Not sure emmet can do that.

Expand  

I think most of the developers are lazy. That is the reason why I like Emmet. ?

But Emmet can't rename the matching closing element, as far as I know. For that I use CMD + D or CTRL + Left Click on macOS for selecting the closing element. Thats a cool feature of the Auto Close extension.

By the way, if you are not familiar with Emmet, I would recommend you to checkout the introduction. Especially for CSS it is a real time saver and easy to learn. Just type a few letters + tab. For example: bgc + tab = background-color. You can find all on the cheatsheet.

[bernhard]

I did some more testing and got one step further. You might also be interested in this thread regarding intellisense: 

I can now answer my question of the day before yesterday:

  On 9/27/2018 at 10:08 AM, bernhard said:

Can I do something like this somehow?

/* @var $form ProcessWire\InputfieldForm */

Expand  

The correct syntax is this:

/** @var InputfieldButton $button */

This way you get proper code completion even for your very own variables.

@kongondo do you think you could do (or guide me how to do it) a snippet that adds the IDE variable type hints automatically?

This could improve the workflow and code completion even more. For example here I define a RockGrid as variable $f and with the /** @var ... */ comment I get the suggestion of "setData()" method for my grid: