Visual Studio Code for ProcessWire Developers

[kongondo]

1 hour ago, bernhard said:

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

If the methods are still empty as in your example or populated?

[bernhard]

Good point! Populated ? 

[kongondo]

2 hours ago, bernhard said:

Good point! Populated ? 

No idea then, in that case, sorry ? 

[bernhard]

Another question: Any ideas how I can transform this:

into that:

? ? 

[gmclelland]

@bernhard, maybe something like https://marketplace.visualstudio.com/items?itemName=wwm.better-align ?

[Jonathan Lahijani]

Tip: Giving Folders Custom Display Names

I created a workspace where I wanted to add the "site" folder from various ProcessWire sites that I'm working on to do some updates across all the projects, as opposed to opening each workspace independently, one after another.

VSCode can handle this, however because the folder name is always "site", it's impossible to differentiate which "site" folder belongs to which project in the sidebar.

But, there's a way to set up a custom name override which I thought was very useful.  Simply edit the .code-workspace file and add a "name" property to each root folder, so it looks like this:

{
	"folders": [
		{
			"path": "."
		},
		{
			"name": "website 1 /site/",
			"path": "../website-1.com/site/"
		},
		{
			"name": "website 2 /site/",
			"path": "../website-2.com/site/"
		},
...

While I could have added "website-1.com" and "website-2.com" which would have resulted in unique folder names anyway, my specific use case was a bit more involved than what I demonstrated above, so hopefully you find this tip helpful!

Link: https://github.com/Microsoft/vscode/issues/45227#issuecomment-371380617

[millipedia]

I've just switched to using PHP Intelephense in VSCode which is definitely a step up from the old PHP IntelliSense module.

One issue I have now though is because I generally don't keep core PW files in my projects then Intelephense is showing lots 'undefined method' errors:

I've tried pointing the Intelephense stubs settings at a folder containing a copy of the core PW files which kind of works but doesn't seem to pull in module methods (as in that screenshot).

I can add methods indiviudally to a stubs file so I've got most of the methods covered but does anyone have a complete stubs file or is there some other better solution?

[gebeer]

On 1/13/2021 at 4:35 PM, millipedia said:

I've just switched to using PHP Intelephense in VSCode which is definitely a step up from the old PHP IntelliSense module.

One issue I have now though is because I generally don't keep core PW files in my projects then Intelephense is showing lots 'undefined method' errors:

I've tried pointing the Intelephense stubs settings at a folder containing a copy of the core PW files which kind of works but doesn't seem to pull in module methods (as in that screenshot).

I can add methods indiviudally to a stubs file so I've got most of the methods covered but does anyone have a complete stubs file or is there some other better solution?

A workaround is defining the type in an @var comment like

/** @var ProcessWire\MarkupAdminDataTable $table */
$table = $this->modules->get("MarkupAdminDataTable");
$table->headerRow($header);

This will give you nice type hinting

[bernhard]

I got tired of looking up fontawesome icon codes all the time...

https://marketplace.visualstudio.com/items?itemName=Janne252.fontawesome-autocomplete

Using these settings:

  "fontAwesomeAutocomplete.patterns": ["**/*.php"],
  "fontAwesomeAutocomplete.insertionTemplate": {"**/*.php": "{name}"},
  "fontAwesomeAutocomplete.version": "4"

?

[rick]

Ensure this setting is present

"fontAwesomeAutocomplete.disableTriggerWordAutoClearPatterns": ["**/*.php"],

[bernhard]

Why?

[rick]

Because when you use the trigger "fa-" and select the desired icon, the trigger gets replaced with the icon name. For example: fa- (select cube) then entry becomes "cube" rather than "fa-cube". The setting I posted prevents that replacement.

 

[bernhard]

Ok, got you, but that's exactly what I want in the PW backend - that's why I'm also using FA4 and not 5 ? 

I'm talking about module development or adding Inputfields to an InputfieldForm:

$form->add([
  'type' => 'text',
  'label' => 'My foo field',
  'icon' => 'envelope-o', // icon without fa- prefix
]);

For frontend I have a css class autocomplete plugin that also knows about all the uikit classes like uk-text-center etc:

[kongondo]

Thunder Client — lightweight alternative to Postman

Thunder Client is a lightweight Rest API Client Extension for Visual Studio Code (it is not open-source). 

• Launch article
• Quick demo

[kongondo]

Visual Studio Code for the Web

Visual Studio Code for the Web provides a free, zero-install Microsoft Visual Studio Code experience running entirely in your browser, allowing you to quickly and safely browse source code repositories and make lightweight code changes. To get started, go to https://vscode.dev in your browser.

 

Hmm. Not sure about this one...

Thoughts, anyone?

[kongondo]

I have been experiencing this issue for a while: Built-in PHP functions marked as undefined when using the extension PHP Intelephense. It has been driving me nuts! Solution, anyone please? Thanks.

Edit: OK, resetting Intelephense: Stubs seems to have solved it. Problem now is that I cannot use my custom ProcessWire stubs. Anyone knows how to use both Intelephense's stubs and custom ones? Thanks.

Edited October 27, 2021 by kongondo
edit

[Pixrael]

What if… Visual Studio Code became the editor of in-browser Developer Tools?
www.youtube.com/watch?v=77qEmDlFtzg
https://www.youtube.com/watch?v=g_TpkkmYzXs

 

[BrendonKoz]

Going through this topic, I am hopeful the Intellisense after setting up VSCode will help me discover more in the core that's difficult to learn from external documentation. As much as I loved Atom and its graphical project viewer extension, the IDE capabilities are unfortunately problematic in my experiences. So here I am, giving VSCode another shot. Oh yes, since going through this topic, some have added extensions to their projects that VSCode has since added to the core editor, so some of you might be able to reduce the count of some of your extensions. Thanks to everyone for providing their findings (and snippets) so far!

• Color-coded bracket matching: Now in a core setting called Editor > Bracket Pair Colorization
• Renaming of matching HTML tags is part of the core via the rename ability (place cursor in/on tag name, press F2), though it currently doesn't work in PHP files (work in progress, I guess?) - alternatively, for simple matching replacements, you can double-click on the element name and press CTRL+D (or CMD+D on Mac) for automatic multi-select, then type the new tag name. These all have issues, so tag-rename or auto-rename-tag might still be preferred.
• Reformatting/Beautifying: SHIFT+ALT+F will automatically reformat the code of the file in focus, or currently highlighted code; also available from the right-click context menu (not yet sure how to define different formatting rules).
• URLs typed in the editor will be openable by default via CTRL+Click via Editor > Links.

Not sure if people know, but it also offers code folding: CTRL+SHIFT+[ to fold/collapse, CTRL+SHIFT+] to unfold/open...or just use the caret symbols next to the text editor's line numbers.

I think everything else (questioned raised) has been covered, or not yet able to be solved.

[BrendonKoz]

Nevermind! ?

Edited December 2, 2021 by BrendonKoz
Assumed editor error was actually my error.

[kongondo]

GistPad

Manage your code snippets and developer notes using GitHub Gists and repositories.

https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs

Stumbled upon this today. I have watched the demo below by the creator. This is a really awesome tool! Other features include creating code documentation/notes, create code playgrounds right within VSC, interoperates with codepen, etc. Watch the video below, right to the end. Quality is not the best (it was a live stream) but it is worth it.

 

[bernhard]

Thx to @gebeer I have now set up my VSCode to format my code in PSR12 on save ? 

It's very easy to get if you know how and if you have Intelephense installed (which I'd highly recommend). Simply copy that to your user settings.json:

  // code formatting on save
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[php]": {
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
  },

 

[Laikmosh]

On 1/13/2021 at 9:35 AM, millipedia said:

I've just switched to using PHP Intelephense in VSCode which is definitely a step up from the old PHP IntelliSense module.

One issue I have now though is because I generally don't keep core PW files in my projects then Intelephense is showing lots 'undefined method' errors:

I've tried pointing the Intelephense stubs settings at a folder containing a copy of the core PW files which kind of works but doesn't seem to pull in module methods (as in that screenshot).

I can add methods indiviudally to a stubs file so I've got most of the methods covered but does anyone have a complete stubs file or is there some other better solution?

I just stumbled into this thread with the same problem you describe here, the solution for me was having a copy of the core folder inside my project, I put it inside the assets folder since I already have it configured to not show up in searchs or anything, as long as viscose has access to the files, it can parse the suggestions

[millipedia]

11 hours ago, Laikmosh said:

I just stumbled into this thread with the same problem you describe here, the solution for me was having a copy of the core folder inside my project, I put it inside the assets folder since I already have it configured to not show up in searchs or anything, as long as viscose has access to the files, it can parse the suggestions

Because I have dozens of PW projects on the go (I really must tidy up my code folder) I didn't want to include the core files for each projects.

The best solution I managed was to have a single copy of the core files in a folder which I then add to the intelephense environment path settings:

    "intelephense.environment.includePaths": [
        "/Users/stephen/code/stubs/",
        "/home/stephen/code/stubs/"
    ],

 

It would be great to have PW stubs in the core Intelephense list but I have no idea how to even start going about that.

[AndZyk]

On 10/27/2022 at 12:06 PM, millipedia said:

Because I have dozens of PW projects on the go (I really must tidy up my code folder) I didn't want to include the core files for each projects.

I can recommend the VSCode extension "Project Manager": https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

I have every project as own workspace with all root folders (site and wire) included and can easily switch with the project manager. The wire folder is excluded for opening files via the command palette. This way Intelephense knows everything, but I don't get suggested files in the wire folder. 😉

[bernhard]

Thx for sharing!

Not sure I totally understand what it is doing but I'm always opening projects via spotlight + terminal:

• "cmd + space" to open spotlight search
• enter "iterm" and hit enter to open iterm terminal
• type "code myprojects/project.com" and hit enter --> vscode opens that folder/project 🙂