Visual Studio Code for ProcessWire Developers

[bernhard]

Boom! Finally I've got Intelephense working as expected ? 

Before:

After:

Turns out that it is already available as setting in settings.json:

[bernhard]

VSCode introduces Remote Development in the new Insiders Release!

https://code.visualstudio.com/docs/remote/remote-overview

Seems like they were watching our thread here closely ?

 

[kongondo]

On 5/1/2019 at 2:10 PM, bernhard said:

Turns out that it is already available as setting in settings.json:

Great find buddy! Thanks.

8 hours ago, bernhard said:

VSCode introduces Remote Development in the new Insiders Release!

Wow! This is massive!

[FrancisChung]

10 hours ago, bernhard said:

Seems like they were watching our thread here closely

They're pretty good at watching what you do. They had plenty of practice with Windows 10 ?
FYI, OS/X can be just as intrusive, but try telling that to a fanboi .... 

[AndZyk]

Microsoft announced Visual Studio Online:

https://devblogs.microsoft.com/visualstudio/intelligent-productivity-and-collaboration-from-anywhere/

@bernhard Could be what you are looking for. ?

[bernhard]

@AndZyk not sure, but that seems to be the same thing that I posted earlier just not for vscode but for visual studio?

Quote

Last week, the Visual Studio Code team released the Remote Development extensions (for Visual Studio Code Insiders) to enable connecting your local tools to a WSL, Docker container, or SSH environment, while retaining the full-fidelity, editing experience in Visual Studio Code (e.g. extensions, themes, debugging). Today, we’re excited to share an early look at Visual Studio Remote Development, which will enable Visual Studio users to achieve the same benefits, and go beyond the limits of their local dev machines.

 

[AndZyk]

I meant the browser based Visual Studio Online, mentioned at the end of the article, that will be coming in the future.

Although it might be not be for you, that was the real news. ?

[bernhard]

Snippet to easily add Inputfields with intellisense support ? 

  "Get PW Inputfield": {
    "prefix": "field",
    "body": [
      "/** @var Inputfield$1 \\$${2:f} */",
      "\\$${2:f} = \\$this->modules->get('Inputfield$1');"
    ],
    "description": "Get PW Inputfiel"
  },

PS: Turns out that the chaining syntax as shown in the demo does not properly work with intellisense, so I'll use single line method calls in the future ?

[bernhard]

https://devblogs.microsoft.com/commandline/take-your-linux-development-experience-in-windows-to-the-next-level-with-wsl-and-visual-studio-code-remote/

[Jonathan Lahijani]

https://blog.theodo.com/2019/07/vscode-php-development/

[bernhard]

Building lots of process modules? This snippet might be something for you (hit ctrl+shift+p and type "snippets" and create/edit php.json):

Spoiler

  "Process Module Boilerplate": {
    "prefix": "processModule",
    "body": [
      "${0:// info snippet}",
      "class Process$1 extends Process {",
      "  public static function getModuleInfo() {",
      "    return [",
      "      'title' => '$2',",
      "      'version' => '${3:0.0.1}',",
      "      'summary' => '$4',",
      "      'icon' => '$5',",
      "      'requires' => [],",
      "      'installs' => [],",
      "      ",
      "      ",
      "      // name of permission required of users to execute this Process (optional)",
      "      'permission' => 'foo',",
      "      // permissions that you want automatically installed/uninstalled with this module (name => description)",
      "      'permissions' => ['foo' => 'May run the foo module'],",
      "      ",
      "      // page that you want created to execute this module",
      "      'page' => [",
      "        'name' => 'helloworld',",
      "        'parent' => 'setup', ",
      "        'title' => 'Hello World'",
      "      ],",
      "",
      "      // optional extra navigation that appears in admin",
      "      // if you change this, you'll need to a Modules > Refresh to see changes",
      "      'nav' => [",
      "        [",
      "          'url' => '', ",
      "          'label' => 'Hello', ",
      "          'icon' => 'smile-o', ",
      "        ],[",
      "          'url' => 'something/', ",
      "          'label' => 'Something', ",
      "          'icon' => 'beer', ",
      "        ],",
      "      ]",
      "    ];",
      "  }",
      "",
      "  public function init() {",
      "    parent::init(); // always remember to call the parent init",
      "  }",
      "",
      "  // executeXYZ",
      "}",
    ],
    "description": "Process Module Boilerplate"
  },

 

And one for creating the execute methods. I'm almost always rendering forms in those methods, no standard html, so this makes me more efficient:

Spoiler

  "Process Module Execute Method Boilerplate": {
    "prefix": "executeXYZ",
    "body": [
      "/**",
      " * $0",
      " */",
      "public function execute$1() {",
      "  \\$this->headline('$2');",
      "  \\$this->browserTitle('$2');",
      "  /** @var InputfieldForm \\$form */",
      "  \\$form = \\$this->modules->get('InputfieldForm');",
      "  ",
      "  \\$form->add([",
      "    'type' => 'markup',",
      "    'label' => 'foo',",
      "    'value' => 'bar',",
      "  ]);",
      "  ",
      "  return \\$form->render();",
      "}",
    ],
    "description": "Process Module Execute Method Boilerplate"
  },

 

[dotnetic]

@bernhard You still rock ? Thanks for this tip, this is also possible for PHPStorm, snippets are called Live Templates there. This is a great timesaver.

[bernhard]

Does anybody of you know if/how it is possible to get intellisense support for methods that are added via hook?

$wire->addHook("Page::foo", function() { ... });

So when I type "$page->" in my editor it should list "foo" as suggestion...

[bernhard]

I've opened an issue in the intelephense extension repo: https://github.com/bmewburn/vscode-intelephense/issues/652

Maybe you want to add your thoughts or give a thumb there ? 

[bernhard]

That's not only for PW development but if you've never tried the remote development feature of vscode you should definitely check it out!

I'm using it for all SSH related stuff now (server administration) and it's been an awesome experience so far. Compared to the console you get a lot of benefits:

• open any file directly in vscode for editing ( "code foo.txt" will open foo.txt in vscode )
• upload files via drag&drop, download via right click
• add different folders to your workspace (eg you can attach /var/www/vhosts and /etc/apache2)
• use ctrl+p to quickly search for files
• use the GUI to quickly search for any text in any files/folders
• get a full and awesome GIT integration (+GUI)
• extremely easy setup, just download the extension, add a host (host + user) and it works (using ssh keys)

In the left bottom corner you can see that I'm connected to a remote host. Working on it is just as if it was your local machine ? Intelephense does not work, but I develop locally anyhow and for all server administration stuff there is really everything I need.

[Ivan Gretsky]

2 hours ago, bernhard said:

Intelephense does not work...

I think it can. You need to install the extension on the remote to make it work.

[bernhard]

Snippet for adding a module config class:

  "Module Config Class": {
    "prefix": "moduleConfig",
    "body": [
      "class ${YourModule}Config extends ModuleConfig {",
      "  public function getDefaults() {",
      "    return [",
      "      'fullname' => '',",
      "    ];",
      "  }",
      "  public function getInputfields() {",
      "    \\$inputfields = parent::getInputfields();",
      "    ",
      "    \\$f = \\$this->modules->get('InputfieldText');",
      "    \\$f->attr('name', 'fullname');",
      "    \\$f->label = 'Full Name';",
      "    \\$f->required = true;",
      "    \\$inputfields->add(\\$f);",
      "    ",
      "    return \\$inputfields;",
      "  }",
      "}",
      "",
    ],
    "description": "Module Config Class"
  },

[gebeer]

@szabesz had already mentioned it in this thread. But I think it is worth picking up again.

I recently switched to https://vscodium.com/ and it is working absolutely great. It removes Microsofts branding and, more importantly usage telemetry. It is available for all platforms. Only drawback I could see is not having automated one-click updates.

I'm all for open source and privacy. Microsoft's VS Code is based on the same codebase as VSCodium only MS adds their branding and collects lots of data because, well, that is just what they love to do.

Being a Linux user for more than 15 years now, I really appreciate MS releasing this phantastic editor to the community. At least they are giving back a fraction of what they earned over the last decades with their half baked software which they make their beta testers pay a lot of money for. Ingenious concept, though...  

[Pixrael]

Interesting Tool => Code Snippets Manager { https://masscode.io/ }

[bernhard]

 

[gebeer]

VSCode with intelephense, in the Problems tab I always get this error for __() language string function

Anyone knows how to get rid of this?

Just found out that it was a namespace problem. When namespace ProcessWire is not declared, intelephense will throw this error.

[kongondo]

2 hours ago, gebeer said:

Anyone knows how to get rid of this?

I would also love to know if it is possible to get rid of on the 'intelephense' side of things. Other than that, it should go away if you add wire as a folder in the workspace.

[gebeer]

1 hour ago, kongondo said:

Other than that, it should go away if you add wire as a folder in the workspace.

The wire folder is already in my workspace. Or do you mean I have to add it in VSCode in the workspace settings?

After adding namespace ProcessWire to my template files, I got rid of these errors.

[kongondo]

3 minutes ago, gebeer said:

Or do you mean I have to add it in VSCode in the workspace settings?

I meant File > Add Folder to Workspace but it seems you had this setup already.

4 minutes ago, gebeer said:

After adding namespace ProcessWire to my template files, I got rid of these errors.

Ah. I see. In my case I always namespace my template files as well. In your case, it was looking for the function definitions in the global namespace, hence the error. 

[bernhard]

Do you guys have a recommendation how to sort method names of a class by their name alphabetically? Thx ? 

// turn this
Class Foo {
  public function foo() {}
  public function bar() {}
}

// into that
Class Foo {
  public function bar() {}
  public function foo() {}
}