Jump to content

Visual Studio Code for ProcessWire Developers

kongondo

By kongondo
in Dev Talk

 Share

Recommended Posts

millipedia Sr. Member

millipedia

Posted
Posted
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
  • 2 weeks later...
Laikmosh Jr. Member

Laikmosh

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

Jan Romero

Posted
Posted

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
  • 7 months later...
  • 1 month later...
  • 3 months later...
  • 3 weeks later...
bernhard Hero Member

bernhard

Posted
Posted

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

bernhard

Posted
Posted

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
  • 5 months later...
bernhard Hero Member

bernhard

Posted
Posted
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
  • 3 weeks later...
gebeer Hero Member

gebeer

Posted
Posted

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
  • 1 month later...
bernhard Hero Member

bernhard

Posted
Posted

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?

gebeer Hero Member

gebeer

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

  • Like 1
gebeer Hero Member

gebeer

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

bernhard

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

  • 7 months later...
AndZyk Hero Member

AndZyk

Posted
Posted

Maybe I am late to the party, because everybody is using AI for coding already, but I just wanted to mention:

If you have a GitHub account and use VSCode for developing, try out the GitHub Copilot extension. 😀

https://code.visualstudio.com/docs/copilot/getting-started

I have installed it a while ago and thought that I would not really use it, but recently I find it quiet handy.

So far I only used the AI-powered suggestions, but its scary that the suggestions are mostly like I would code it. 😅

  • Like 1
dotnetic Hero Member

dotnetic

Posted
Posted

Instead of switching the whole editor, I recommend to checkout the extensions from

https://www.augmentcode.com/ which indexes your codebase, has a memory and your data will never be used to improve the LLM

https://roocode.com/ great and free Open Source extension, with custom modes like architect, code and ask or debug. Supports all Providers and even Openrouter. Bring your own keys.
RooCode is a fork of https://cline.bot/ which is superior in adding MCP servers, because it has an own marketplace for discovery and installation.

My extensions of choice are augementcode and roo. I switch between the two.

  • Like 3
 Share
Go to topic listing
×
×
  • Create New...