Visual Studio Code for ProcessWire Developers

[kongondo]

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 September 29, 2018 by kongondo

[bernhard]

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

 

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 September 30, 2018 by bernhard
changed snippet a little bit (behaves a little differently to the screencast, even better code completion now)

[bernhard]

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

 

[kongondo]

13 hours ago, bernhard said:

What do you think?

Looks good! ?

[bernhard]

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

 

[elabx]

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 ?

[bernhard]

Do you have the wire folder in your project?

[bernhard]

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

 

[kongondo]

4 minutes ago, bernhard said:

snippet mania continues

Clever trick with the double cursor/placeholder ?

[bernhard]

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:

[adrian]

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

[bernhard]

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 ? 

 

[kongondo]

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\(.*\);$

 

[adrian]

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.

[bernhard]

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:

Or via the GUI:

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

[kongondo]

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?

[bernhard]

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:

 
 

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):

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.

[elabx]

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.

[bernhard]

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 ?

[elabx]

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.

[AndZyk]

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

[adrian]

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 ?

 

[bernhard]

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

 

[kongondo]

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?

[bernhard]

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:

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: