Jump to content
kongondo

Visual Studio Code for ProcessWire Developers

Recommended Posts

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 4

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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 .... 

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 5

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 2

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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 1

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