Visual Studio Code for ProcessWire Developers

[millipedia]

1 hour ago, AndZyk said:

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

I do use Project Manager already and it's definitely a must have extension.

44 minutes ago, bernhard said:

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

Cool. Whilst we're sharing tips though -  on a Mac you can set up a Quick Action in Automater to open a folder in VS Code:

the command I've got in that Quick Action is

open -n -b "com.microsoft.VSCode" --args "$*"

On my Linux box I'm using Dolphin on KDE and  get offered the option to 'Open with VSCode' when I right click on a folder ... I think thats just happens by default; I don't remember ever setting that up.

 

[Laikmosh]

On 10/27/2022 at 5:06 AM, 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.

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.

Well for me it has to be more automated because I have to share my environment with a team, so I just created this code and put it in the config-dev.php file

$dest = "./site/assets/wire";
// Get canonicalized absolute pathname
$path = realpath($dest);
// If it exist, check if it's a directory
if (!$path and !is_dir($path)) {
  $src = "/var/www/html/wire";
  shell_exec("cp -r $src $dest");
}

But just yesterday I uploaded a docker compose configuration that has all this configured by default, maybe it works for you:

Processwire docker image

[Jan Romero]

This is apparently a really old hat and common in many editors, but it’s the first I’ve heard of it and it just blew my mind. Did you know you can name heredoc strings “HTML” to get HTML syntax highlighting?!

I kind of try to avoid heredoc, but this seems pretty neat.

[kongondo]

Code GPT

Visual Studio Code extension that lets you generate code from plain text within the editor using the official OpenAI API or other AI providers such as Google PaLM 2.

https://marketplace.visualstudio.com/items?itemName=DanielSanMedium.dscodegpt

https://codegpt.co/

[kongondo]

Floating Windows

Long standing open request

https://github.com/microsoft/vscode/issues/10121

Workarounds:

Duplicate Workspace 

WARNING: CAREFUL WITH THIS ONE! CAN EASILY WIPE YOUR CHANGES IF YOU ARE EDITING ON BOTH WINDOWS!

Autosave onFocusChange

 

Edited September 9, 2023 by kongondo
Added warning about potential loss

[kongondo]

November 2023 (version 1.85)

Floating editor windows

Finally this ?!

[bernhard]

If you are working with Git I highly recommend installing the "git graph" extension:

This extension truly helped me understand everything around git way better (What is this origin? What is this HEAD? What is a rebase actually doing? etc...).

It also has great right-click-menus with helpful actions:

 

Unfortunately the author of the extension seems to be not available any more and the license seems to be quite restrictive so that forking is not allowed, but it's an interesting read: https://github.com/mhutchie/vscode-git-graph/issues/715

I didn't find a good alternative. If anyone knows one please let us know ? 

https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

[gebeer]

Have you tried https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory ?

This seems to be the most popular one. Latest commits last year. The graph looks similar to git graph. There is a number of actions you can take on  commits, like revert, create branch, cherry pick etc.

[bernhard]

I've recently started using https://marketplace.visualstudio.com/items?itemName=SergeLamikhov.aligntokens to align my code for better readability (especially when having lots of field constants or lots of hooks):

Before

After

What I find nice is that it does not do that stuff automatically and it lets you decide which token to use for alignment. On top we align by "=" and in _init() we align by $this ? 

[BrendonKoz]

Is that able to handle multiple alignments within a single line?

[bernhard]

1 hour ago, BrendonKoz said:

Is that able to handle multiple alignments within a single line?

Not at once, but in 3 rounds, first by = then ? then :

But I guess you are hitting 80 chars limit anyhow, so maybe something like this would be better?

[gebeer]

Ever so often when working with JS, we need the good old console.log(). It is really tedious and time consuming having to type that out manually. Also, I like descriptive logs.

Here's a little keybinding which addresses that and saved me a tons of time. I have it in the User keybindings.json

  {
    "key": "ctrl+shift+m",
    "command": "runCommands",
    "args": {
      "commands": [
        {
          "command": "editor.action.clipboardCopyAction"
        },
        {
          "command": "cursorLineEnd"
        },
        {
          "command": "lineBreakInsert"
        },
        {
          "command": "cursorDown"
        },
        {
          "command": "editor.action.insertSnippet",
          "args": {
            "snippet": "console.log(\"${CLIPBOARD}\", ${CLIPBOARD});"
          }
        }
      ]
    },
    "when": "editorTextFocus && editorHasSelection"
  }

What it does:
You select the var you want to log, press Ctrl+Shift+m (or any combination you prefer). This will go to the end of the current line, insert a line break, move down to the new line and insert the console.log() statement.

Example:

before with marked var:

after with log statement:

Hope someone will find this useful ?

[bernhard]

Real programmers write tailwindcss classes right from their brain.

For the rest of us there are extensions like https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Today this extension stopped working for me and that was quite a bummer 🤯 I really can't work without suggestions like this:

It seems that newer version of VSCode / Cursor don't work with this extension any more if you are using SCSS/SASS/LESS...

I found this and got it back working: https://marketplace.visualstudio.com/items?itemName=TailwindCSSIntelliSenseplus.vscode-tailwindcss-plus Not sure if that is a trustworthy extension, see comment of @gebeer below

It's very new and unpopular, so I'm wondering if there are better solutions of anybody of you has experienced something similar and has better solutions?

[gebeer]

37 minutes ago, bernhard said:

Real programmers write tailwindcss classes right from their brain.

Then I'm not a real programmer :-)

For me the extension is still working on Cursor
Version: 0.40.1
VSCode Version: 1.91.1
Commit: 58b91712431381a1b75817cd3437cee35dddcb30
Date: 2024-08-24T02:52:24.035Z
Electron: 29.4.0
ElectronBuildId: undefined
Chromium: 122.0.6261.156
Node.js: 20.9.0
V8: 12.2.281.27-electron.0
OS: Linux x64 6.10.6-zen1-1-zen

But that is on Linux. I tried it on a project that I setup with your TW/UIKit profile, so there is LESS involved.

37 minutes ago, bernhard said:

I found this and got it back working: https://marketplace.visualstudio.com/items?itemName=TailwindCSSIntelliSenseplus.vscode-tailwindcss-plus

Since this extension comes from tailwindlabs, the creators of Tailwind, I would go with it.

[gebeer]

7 minutes ago, gebeer said:

Since this extension comes from tailwindlabs, the creators of Tailwind, I would go with it.

Not so sure about that. But the GH repo on the extension page links to tailwndlabs.
EDIT: Actually I would not trust that extension since they are clearly not linking to their own GH repo and therefore pretending to come from tailwindlabs. 

[bernhard]

2 hours ago, gebeer said:

Version: 0.40.1

I'm on 0.39.x and I tried but didn't find a way to get the 0.40 update. Have you been lucky or do you know how I can force the upgrade somehow to the rolling release of 40.1?

2 hours ago, gebeer said:

EDIT: Actually I would not trust that extension since they are clearly not linking to their own GH repo and therefore pretending to come from tailwindlabs. 

Yeah I was hesitant as well.

[bernhard]

Oh, i see I'm on 40.1 as well but the extension doesn't work 😞 

[bernhard]

Got it working again! v0.12.6 works and 0.12.7 has an issue, see https://github.com/tailwindlabs/tailwindcss-intellisense/issues/1039