Jump to content

Visual Studio Code for ProcessWire Developers

kongondo

By kongondo
in Dev Talk

 Share

Recommended Posts

kongondo Hero Member

kongondo

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

  • 4 months later...
Jonathan Lahijani Hero Member

Jonathan Lahijani

Posted
Posted

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

  • Like 4
  • 2 months later...
millipedia Sr. Member

millipedia

Posted
Posted

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:

383515864_CrestStats_module__crest_research.png.49a8fd9883b3baf1adae604cc08da2a2.png

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?

  • 2 months later...
gebeer Hero Member

gebeer

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

383515864_CrestStats_module__crest_research.png.49a8fd9883b3baf1adae604cc08da2a2.png

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

1434904306_2021-03-31-124549.png.e72cf2f430eb8492d9c0ffee52e07118.png

  • Like 1
rick Hero Member

rick

Posted
Posted

Ensure this setting is present

"fontAwesomeAutocomplete.disableTriggerWordAutoClearPatterns": ["**/*.php"],
rick Hero Member

rick

Posted
Posted

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

bernhard

Posted
Posted

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:

YbQgq3s.png

  • 6 months later...
  • 3 weeks later...
kongondo Hero Member

kongondo

Posted
  • Author
Posted

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

kongondo

Posted
  • Author
Posted (edited)

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 by kongondo
edit
  • 3 weeks later...
  • 3 weeks later...
BrendonKoz Sr. Member

BrendonKoz

Posted
Posted

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.

  • Like 1
  • 4 months later...
kongondo Hero Member

kongondo

Posted
  • Author
Posted

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.

 

  • Like 5
  • 5 months later...
bernhard Hero Member

bernhard

Posted
Posted

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

 

  • Like 2
  • 1 month later...
Laikmosh Jr. Member

Laikmosh

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

383515864_CrestStats_module__crest_research.png.49a8fd9883b3baf1adae604cc08da2a2.png

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

millipedia

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

  • Like 2
AndZyk Hero Member

AndZyk

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

  • Like 3
bernhard Hero Member

bernhard

Posted
Posted

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 ? 
 Share
Go to topic listing
×
×
  • Create New...