Jump to content

Visual Studio Code for ProcessWire Developers

kongondo

By kongondo
in Dev Talk

 Share

Recommended Posts

bernhard Hero Member

bernhard

Posted
Posted

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

Before:

OYkPsOT.png

After:

aZpbcAJ.png

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

AO9uw72.png

  • Like 6
kongondo Hero Member

kongondo

Posted
  • Author
Posted
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!

  • Like 2
FrancisChung Sr. Member

FrancisChung

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

bernhard Hero Member

bernhard

Posted
Posted

@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 Hero Member

AndZyk

Posted
Posted

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

  • Like 1
bernhard Hero Member

bernhard

Posted
Posted

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"
  },

snippet.gif.e4d1e9c20aa23736b00c8788fbdf9e3a.gif

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 ?

  • Like 4
  • 2 months later...
  • 2 weeks later...
  • 1 month later...
bernhard Hero Member

bernhard

Posted
Posted

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"
  },

 

snippets.gif.12c798e943df02be232884b559ddbd0d.gif

  • Like 7
bernhard Hero Member

bernhard

Posted
Posted

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

  • 1 month later...
bernhard Hero Member

bernhard

Posted
Posted

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)

8vCOlMW.png

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.

  • Like 3
bernhard Hero Member

bernhard

Posted
Posted

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"
  },

Lqg5a07.gif

  • Like 4
  • 1 month later...
gebeer Hero Member

gebeer

Posted
Posted

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

  • Like 5
  • 2 months later...
  • 1 month later...
  • 1 month later...
gebeer Hero Member

gebeer

Posted
Posted

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

1937865171_2020-05-06-114443.png.21870f838d89176b204f7f654a304abd.png

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 Hero Member

kongondo

Posted
  • Author
Posted
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 Hero Member

gebeer

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

  • Like 1
kongondo Hero Member

kongondo

Posted
  • Author
Posted
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. 

  • Like 1
  • 4 weeks later...
bernhard Hero Member

bernhard

Posted
Posted

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() {}
}

 

 Share
Go to topic listing
×
×
  • Create New...