Jump to content

Visual Studio Code for ProcessWire Developers


kongondo

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
Link to comment
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 3
Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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 ?

Link to comment
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
Link to comment
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.

Link to comment
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! ? 

  • Like 1
Link to comment
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?

Link to comment
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
Link to comment
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
Link to comment
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 ?

Link to comment
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.

Link to comment
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
Link to comment
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
Link to comment
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 

 

Link to comment
Share on other sites

×
×
  • Create New...