Jump to content

Visual Studio Code for ProcessWire Developers


kongondo

Recommended Posts

@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.

 

26 minutes ago, 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?

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!

Link to comment
Share on other sites

@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.

10 minutes ago, 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?

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.

  • Like 2
Link to comment
Share on other sites

12 minutes ago, 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.

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?

Link to comment
Share on other sites

You mean the $cookie etc. suggestions?

This is what I get:

image.png.35e5fce8748a8d2c783b1c17307d0e88.png

image.png.a40a0f5cad3ba974566b1c2287a237ad.png

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.

image.png.29bd2ddc586245cd0f6bf3d174d92ac3.png

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

9 hours ago, adrian said:

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

Great!

9 hours ago, adrian said:

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

Any thoughts?

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\")"

 

9 hours ago, adrian said:

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

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:

vsc_html_expander.thumb.gif.5cebcf82b71417abc9de38bf10725218.gif

 

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 ?

  • Like 1
  • Thanks 2
Link to comment
Share on other sites

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

13 hours ago, 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

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?

cBjpS6m.png

2VyT5bI.png 

 

Link to comment
Share on other sites

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

23 hours ago, 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

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. ?

Link to comment
Share on other sites

8 minutes ago, AndZyk said:

Only thing missing for me was expansion on tab

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.

RTFM ?

  • Haha 1
Link to comment
Share on other sites

3 hours ago, 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?

 

3 hours ago, 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.

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 ?

 

3 hours ago, bernhard said:

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

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 by kongondo
  • Like 1
Link to comment
Share on other sites

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.

php-intellisense-peek-1.thumb.png.b98dadc3590fa2fe33a83122c6ed4f9a.png

 

php-intellisense-peek-2.thumb.png.fa70f408c1fee5ce43fd1fffda9d3797.png

Link to comment
Share on other sites

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")

PzTd81Y.png 

  • Like 1
Link to comment
Share on other sites

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:

GFVKLCq.png

And what I get is this:

ZOrFf2u.png 
 

Link to comment
Share on other sites

On 9/19/2018 at 7: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

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...

  • Like 1
Link to comment
Share on other sites

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 9:11 AM, bernhard said:

"emmet.triggerExpansionOnTab": true

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

  • Like 1
Link to comment
Share on other sites

22 minutes ago, 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>?

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

24 minutes ago, 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.

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.

  • Like 3
Link to comment
Share on other sites

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 12:08 PM, bernhard said:

Can I do something like this somehow?


/* @var $form ProcessWire\InputfieldForm */

The correct syntax is this:

/** @var InputfieldButton $button */

Viu069a.png

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:

IcgcGfP.png

  • Like 2
Link to comment
Share on other sites

×
×
  • Create New...