Jump to content
kongondo

Visual Studio Code for ProcessWire Developers

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!

Share this post


Link to post
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

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

Here is an example:

623716625_VSCProcessWire.gif.9b900dd19df709be9e5a8102ac5ff759.gif

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

image.png.daccb2cb6cb42b536f83f0f35c49eff9.png

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
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 

 

Share this post


Link to post
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. 🙂

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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 
 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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 1

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Robin S
      This module is inspired by and similar to the Template Stubs module. The author of that module has not been active in the PW community for several years now and parts of the code for that module didn't make sense to me, so I decided to create my own module. Auto Template Stubs has only been tested with PhpStorm because that is the IDE that I use.
      Auto Template Stubs
      Automatically creates stub files for templates when fields or fieldgroups are saved.
      Stub files are useful if you are using an IDE (e.g. PhpStorm) that provides code assistance - the stub files let the IDE know what fields exist in each template and what data type each field returns. Depending on your IDE's features you get benefits such as code completion for field names as you type, type inference, inspection, documentation, etc.
      Installation
      Install the Auto Template Stubs module.
      Configuration
      You can change the class name prefix setting in the module config if you like. It's good to use a class name prefix because it reduces the chance that the class name will clash with an existing class name.
      The directory path used to store the stub files is configurable.
      There is a checkbox to manually trigger the regeneration of all stub files if needed.
      Usage
      Add a line near the top of each of your template files to tell your IDE what stub class name to associate with the $page variable within the template file. For example, with the default class name prefix you would add the following line at the top of the home.php template file:
      /** @var tpl_home $page */ Now enjoy code completion, etc, in your IDE.

      Adding data types for non-core Fieldtype modules
      The module includes the data types returned by all the core Fieldtype modules. If you want to add data types returned by one or more non-core Fieldtype modules then you can hook the AutoTemplateStubs::getReturnTypes() method. For example, in /site/ready.php:
      // Add data types for some non-core Fieldtype modules $wire->addHookAfter('AutoTemplateStubs::getReturnTypes', function(HookEvent $event) { $extra_types = [ 'FieldtypeDecimal' => 'string', 'FieldtypeLeafletMapMarker' => 'LeafletMapMarker', 'FieldtypeRepeaterMatrix' => 'RepeaterMatrixPageArray', 'FieldtypeTable' => 'TableRows', ]; $event->return = $event->return + $extra_types; }); Credits
      Inspired by and much credit to the Template Stubs module by mindplay.dk.
       
      https://github.com/Toutouwai/AutoTemplateStubs
      https://modules.processwire.com/modules/auto-template-stubs/
    • By FrancisChung
      PHPStorm for PW Devs
      This thread is a place for ProcessWire developers who use PHPStorm to share their experience, tips, frustrations, solutions, code snippets and generally discuss all things PHPStorm.
      From Wikipedia:
       
      Thanks @kongondo for the Visual Studio Code post earlier.
    • By szabesz
      CodeRunner 2 is on sale at MacUpdate: https://www.macupdate.com/app/mac/38362/coderunner
      Mostly I use it for writing shell scripts, mocking up algorithms in PHP, JavaScript/jQuery. But is also supports other programming languages as well.
      https://coderunnerapp.com/
      "An advanced, highly flexible, and easy-to-use programming editor for your Mac. CodeRunner supports a large number of languages, and delivers big IDE features while remaining lightweight and clutter-free."
    • By pwFoo
      I moved from netbeans to atom. Tested lighttable, brackets and visual studio code, but at the moment I take a look into web based IDEs. Most are based on ACE editor (alternative could be codemirror) like chrome apps caret or super neutron drive (both with chrome dependency at the moment). 
      Recently I looked into cloud9, codetasty, ... and codiad.
      Codiad is open source. php / js based and works fine. Autocomplete feature and suggestions should be improved, but it's ok. Because it's open source you can download it from github repo or test it as a docker container (wernight/codiad image for example). 
      Codytasty is a cloud hosted solution with a really awesome autocomplete / suggestions for php, js and html! But it isn't open source (there is a free to use hosted version with limited workspaces and features).
      At the moment I testing codiad@docker, but use still atom for coding and searching for the best IDE out there *g*
       
      What do you think about IDEs and the new trend to web based IDEs?
×
×
  • Create New...