Jump to content

Visual Studio Code for ProcessWire Developers


kongondo

Recommended Posts

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:

Open_in_VSCode_workflow__Quick_Action.thumb.jpg.2b2fa56bedb13329611d42c4a7f98479.jpg

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.

 

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...
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

Link to comment
Share on other sites

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

image.png.d7a720dd8da9a1db30f50dd2f1200159.png

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

  • Like 6
Link to comment
Share on other sites

  • 7 months later...
  • 1 month later...

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 by kongondo
Added warning about potential loss
Link to comment
Share on other sites

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

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

v6gMmbC.png

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:

ddGhOx8.png imI1gH8.png

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

  • Like 1
Link to comment
Share on other sites

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

EgclZOJ.png

After

nj1yQVz.png

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 ? 

  • Like 1
Link to comment
Share on other sites

  • 5 months later...
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?

yMfg9uU.png

  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...

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:
cl-before.png.8da7f220647476c34287a55de5d2ac49.png

after with log statement:
cl-after.png.5545630a0a556f06ca002da0d5592fa3.png

Hope someone will find this useful ?

  • Like 3
Link to comment
Share on other sites

  • 1 month later...

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:

8mUQ3No.png

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?

Link to comment
Share on other sites

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:

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

  • Like 1
Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

×
×
  • Create New...