Jump to content

Visual Studio Code for ProcessWire Developers


kongondo

Recommended Posts

  • 4 months later...

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

  • 2 months later...

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?

Link to comment
Share on other sites

  • 2 months later...
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
Link to comment
Share on other sites

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

2H3EjJj.gif

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

Using these settings:

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

😎

  • Like 2
Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 6 months later...
  • 3 weeks later...

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?

Link to comment
Share on other sites

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

  • 3 weeks later...
  • 3 weeks later...

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

×
×
  • Create New...