Jump to content
kongondo

Visual Studio Code for ProcessWire Developers

Recommended Posts

1 hour ago, bernhard said:

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

I'm not sure I follow. Doesn't that mean that every time the snippet is used, it will add the type hints? Doesn't that mean, if I use the variable again within the same code, the type hint will be printed out again? I'm sure am missing something here, please clarify/show me an example pseudo code 🙂

Edited by kongondo

Share this post


Link to post
Share on other sites

hi @kongondo sorry for being unclear. I played around a little and came up with this solution:

VgxVswK.gif 

I think that's a quite good solution. It's easy to type, easy to read and it is efficient, multi-instance ready and supports code completion (and is always in sync with your current pw version)... What do you think?

  // php.json

  "Import PW Module": {
    "prefix": "mod",
    "body": [
      "$$1 = \\$this->wire->modules('$2'); /** @var $2 $$1 */",
      "$$1$0"
    ],
    "description": "Import PW Module"
  },
  
  "Get Wire Instance": {
    "prefix": "wire",
    "body": "$$this->wire->$0",
    "description": "Get Wire Instance"
  },

 

Edited by bernhard
changed snippet a little bit (behaves a little differently to the screencast, even better code completion now)
  • Like 2

Share this post


Link to post
Share on other sites

created another useful snippet to reset the admin password:


  "Reset Admin Password": {
    "prefix": "reset",
    "body": [
      "\\$admin = \\$users->get(41);",
      "\\$admin->setAndSave('pass', '$1');",
      "die(\"admin url = {\\$pages->get(2)->httpUrl}, admin username = {\\$admin->name}\");",
    ],
    "description": "Reset Admin Password"
  },

 

  • Like 2

Share this post


Link to post
Share on other sites
13 hours ago, bernhard said:

What do you think?

Looks good! 🙂

  • Like 1

Share this post


Link to post
Share on other sites

snippets are awesome! thx @kongondo, 2 more 😉 


  "Input get Variable": {
    "prefix": "get",
    "body": "\\$this->wire->input->get->$0",
    "description": "Input get Variable"
  },
  
  "Input post Variable": {
    "prefix": "post",
    "body": "\\$this->wire->input->post->$0",
    "description": "Input post Variable"
  },

dHDkf59.gif 

  • Like 2

Share this post


Link to post
Share on other sites

Hi! Is there any configuration to get Intelephense autocompletion to work?? Or does it just need to bee installed and that's it?? Sorry, tried to figure out from the thread but just couldn't 😞

Share this post


Link to post
Share on other sites

snippet mania continues 😄


  "Add hook with separate method": {
    "prefix": "hook",
    "body": [
      "\\$this->wire->addHook$1('$2', \\$this, '$3');$0",
      "/**",
      " * $4",
      " */",
      "public function $3(HookEvent \\$event) {",
      "  $5",
      "}",
    ],
    "description": "Add hook with separate method"
  },
  
  "Add hook with closure": {
    "prefix": "hook",
    "body": [
      "\\$this->wire->addHook$1('$2', function(HookEvent \\$event) {",
      "  $0",
      "});",
    ],
    "description": "Add hook with closure"
  },

J3uf5la.gif 

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites
4 minutes ago, bernhard said:

snippet mania continues

Clever trick with the double cursor/placeholder 🙂

  • Like 1

Share this post


Link to post
Share on other sites
6 minutes ago, kongondo said:

Clever trick with the double cursor/placeholder 🙂

Yes, that's handy 🙂 If you add the "HookEvent" type definition to the parameter you even get intellisense:

zVLW10o.png

Share this post


Link to post
Share on other sites

@bernhard - you've got me thinking that many of these could be great additions to the Tracy Console and File Editor panels using ACE Editor's snippets functionality.

Just to clarify - I am talking about code completion features of ACE and not the snippets list panel that I have added to the Console panel. Two totally different things 🙂

Share this post


Link to post
Share on other sites
3 minutes ago, adrian said:

@bernhard - you've got me thinking that many of these could be great additions to the Tracy Console and File Editor panels using ACE Editor's snippets functionality.

Not sure. Didn't know ACE even supports snippets! Crazy 🙂 Personally I don't use the file editor at all (yet?). I use the console a lot, but would have never needed one of those snippets inside the console (for example the module snippet here https://processwire.com/talk/topic/17550-visual-studio-code-for-processwire-developers/?do=findComment&comment=173964 is mainly because of the intellisense hint, but we don't have that in ace, do we?).

What I do a lot in the console is looping over pagearrays, so that could be a nice first testsnippet 🙂 

 

  • Like 1

Share this post


Link to post
Share on other sites

Anyone use Regex search/replace in VSC code?

This little guy will cleanup after you are done with your Tracy bd dumps (I'm no Regex guru, so test carefully first!).

bd\(.*\);$

 

  • Like 1

Share this post


Link to post
Share on other sites
6 minutes ago, bernhard said:

intellisense hint, but we don't have that in ace, do we?

We have PHP function completion, but not completion for PW objects / functions etc. I could create a file to handle this but would need to script something up so that the completion file is built automatically from the PW codebase.

8 minutes ago, bernhard said:

What I do a lot in the console is looping over pagearrays, so that could be a nice first testsnippet

Sounds good. I have actually been thinking about including a few default "code snippets" in the Snippets panel. Maybe this would actually be better as a "completion snippet". Sorry, trying to distinguish the two different things 🙂

Obviously getting OT, so let's continue this in the Tracy thread, but I'd certainly like your input on this if you're interested. I don't have completion snippets turned on in the Console panel at the moment, but I'll take a look at this later and figure out the format required for snippets and then maybe you could put together a few useful ones.

Share this post


Link to post
Share on other sites
28 minutes ago, adrian said:

I'll take a look at this later and figure out the format required for snippets and then maybe you could put together a few useful ones.

Sure! I think we just have to start with one. All the others will come up automatically while we are developing. At least it is like this for me while working with vscode 🙂 Knowing about the snippets I just create one whenever I come over something that I need over and over again.

--- Back to VSCode ---

Thx to @elabx I installed https://marketplace.visualstudio.com/items?itemName=Kelvin.vscode-sshfs#overview and it's absolutely brilliant. Just configure your remote servers and login easily from the command panel:

oo6kWFl.png

Or via the GUI:

ixI6VPY.png

I also installed this extension to open the terminal of my remote servers directly in vscode: https://marketplace.visualstudio.com/items?itemName=seanchann.sshlogin

All those little tweaks of the last days makes me a lot more productive. And it's a lot more fun. Thx to everybody for the fruitful discussion! 🙂 

Share this post


Link to post
Share on other sites

I need to try these two.

Somebody complained that they were having problems with SSH FS working in windows. @bernhard, @elabx, is either of you in windows? Issues?

29 minutes ago, bernhard said:

I also installed this extension to open the terminal of my remote servers directly in vscode: https://marketplace.visualstudio.com/items?itemName=seanchann.sshlogin

👍 Do you still find you need both extensions? How do you login if using SSH FS alone then?

Share this post


Link to post
Share on other sites
20 minutes ago, kongondo said:

Somebody complained that they were having problems with SSH FS working in windows. @bernhard, @elabx, is either of you in windows? Issues?

Everything works great here so far. I'm doing authentication with ssh keyfiles generated via git bash: https://git-scm.com/book/en/v2/Git-on-the-Server-Generating-Your-SSH-Public-Key

These are my settings:

Nob25jV.png 
 

The extensions do different things (as far as I understood)! FFHFS includes the file system of the remote server into your workspace. This is great to edit remote files on the fly. I just open the connection to my remote server, browse the tree down from the initial start at /var/www/vhosts, edit the file and save it. Perfect!

The other extension is nice to connect to the server in the terminal. That can be handy to do a htop or to watch logfiles (tail -f /your/file):

ANWIthI.gif

Left = vscode connected to my server, right = tracy console on a remote website using the file log function l(). That is great for monitoring resource intensive tasks like huge imports.

  • Like 1

Share this post


Link to post
Share on other sites
4 hours ago, kongondo said:

Somebody complained that they were having problems with SSH FS working in windows. @bernhard, @elabx, is either of you in windows? Issues?

4 hours ago, bernhard said:

No issues for the moment, except can't get autocompletion to work :D. And yes @bernhard, it is a ProcessWire website with the wire folder and all but I'm guessing it might be the context in which i'm editing (SSH FS) and I'm actually loading as root a public_html with a lot of websites underneath it.

  • Like 1

Share this post


Link to post
Share on other sites
5 minutes ago, elabx said:

except can't get autocompletion to work 😄

It does not work in general or when using SSH FS? I guess it is not possible to work via SSH FS at all, because the extension indexes all LOCAL workspace files on startup and then creates the intellisense. Thats the same with things like the "find in folder" feature. That's why I prefer to develop locally and not remotely over FTP/SSH like I did some months ago. Combining it with all the great git support of VSCode it's a great environment 🙂

Share this post


Link to post
Share on other sites
1 minute ago, bernhard said:

It does not work in general or when using SSH FS? I guess it is not possible to work via SSH FS at all, because the extension indexes all LOCAL workspace files on startup and then creates the intellisense.

Thanks for the heads up!I haven't tried locally but will soon.

Share this post


Link to post
Share on other sites

That extensions looks interesting. Currently I am using the extension sftp. So far I like it. It is like the commercial Sublime SFTP for Sublime Text. But I only use it for syncing up and down. For everything else I use Git. 😉

Share this post


Link to post
Share on other sites
16 hours ago, adrian said:

@bernhard - you've got me thinking that many of these could be great additions to the Tracy Console and File Editor panels using ACE Editor's snippets functionality.

OT again!

just in case anyone is interested, I have started working on this: https://processwire.com/talk/topic/12208-tracy-debugger/?do=findComment&comment=174121

Would appreciate any and all input of those of you who love autocompletion snippets 🙂

 

  • Like 2

Share this post


Link to post
Share on other sites

another one:


  "Module Boilerplate": {
    "prefix": "module",
    "body": [
      "${0:// info snippet}",
      "class ${1:Classname} extends WireData implements Module {",
      "",
      "  public static function getModuleInfo() {",
      "    return [",
      "      'title' => '${2:Hello World}',",
      "      'version' => '0.0.1',",
      "      'summary' => '${3:Your module description}',",
      "      'singular' => true,",
      "      'autoload' => true,",
      "      'icon' => '${4:smile-o}',",
      "      'requires' => [],",
      "      'installs' => [],",
      "    ];",
      "  }",
      "",
      "  public function init() {",
      "  }",
      "}",
    ],
    "description": "Module Boilerplate"
  },

3JcMBvZ.gif 

  • Like 2

Share this post


Link to post
Share on other sites
8 minutes ago, bernhard said:

another one:

Nice. Needed something like this recently but didn't have the time to make one.

Are you planning to collate these somewhere gists?

Share this post


Link to post
Share on other sites
12 minutes ago, kongondo said:

Are you planning to collate these somewhere gists?

no, but i can of course share my php.json file 🙂 but I want to wait until it does not change on an hourly rate 😄 

Just found another nice extension that is especially handy if you are using intelephense: https://marketplace.visualstudio.com/items?itemName=vincentkos.php-docblock-generator

It creates docblocks for your methods or properties, which will tell intellisense the type of the variable.

I've also created one new snippet that let's you add those typehints inline:


  "Add variable declaration comment": {
    "prefix": "var",
    "body": [
      "/** @var $1 $$2 */",
    ],
    "description": "Add variable declaration comment"
  },

Both in action:

ApW0RdZ.gif

PS: I created a keyboard shortcut CTRL+ALT+D for the docs extension. Just go to your keyboard shortcut settings and look for the command "generate a documentation block".

PPS: you can even combine snippets:

bMnJoGP.gif 

 

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • 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?
    • By benbyf
      HELLO! Anyone happen to be using Atom the open source IDE from github? I've been using it for about a year now and other than the occassional crash it's been great.
      I was wondering if anyone out there has proccesswire specific snippets, syntax hightlighting or autocomplete package they've created to add their PW work? If not would anyone be interested if I made one, and what would be most useful?
×
×
  • Create New...