I’m curious if anyone has a set of best practices for using VS Code with Pinegrow through the extension. I’ve looked through here, the docs, and did a bit of searching online but really haven’t come up with much beyond the obvious of making sure sync is checked in PG’s settings & making sure your localhost is setup correctly. Is there anything else I can do to make it a smoother experience? I’m continually running into a situation where Pinegrow says the files are saved, yet VS Code thinks they’re not and then wants to compare & overwrite the files which ends up causing some issues.
I’m super comfortable with VS Code so I’d prefer to continue using that for managing my code(y) bits. I tried using the built in edtor in PG and could probably live with it’s limited feature set but having it flash there & not due to using it out of the main interface on a second monitor drives me a bit crazy.
Background basics, I’m on MacOS 12.5.1 using PG 6.8 & VS Code 1.72, working on straight HTML & CSS files eventually headed towards a WordPress theme.
Thank! in advance for any direction and/or advice.
Hi there, as You i was frustrated by that notification " compare overwrite " and in pg “reload etc” so my rudimental solution at this moment of my life is simply to keep in mind that when i workwith both i just forget to save within Vs Code and all i do is saving in pg - that’s just fine as mainly pg 8s the one that write the files. But I might be wrong, anyway, for me it works.
Hi! Yeah… basically, that’s what I was doing as well but unfortunately in that scenario, I typically have to quit VS Code without saving otherwise it changes the file which isn’t really a workable situation.
For now, I’m just going to drop using VS Code and deal with the code editor in PG and focus on learning the interface of the app as opposed to leaning on VS for making edits when I get frustrated digging for a setting in the interface.
in the end you ll find out that working on html / css in pg only it’s also pretty smart and quick. ctrl h brings up the code for html and when you have the class name in the visual panel you can simply add .anotherclass and it will nest it in the class you work with. i also discovered that if for instance you have like 10 img you can select them all and then add an alement on top of it and pg will automatically create on top of each of the 10 imgs one element, and then you simply click the arrow pointing right to nest the img [hope i make sense…I speak and write spaghetti english…].
Anyway, PG is cool, at least from my point of view and it brings a good hand in the workflow. Hope you’ll enjoy it
Thanks! I’m sure I’ll learn to love it. I can plainly see the advantages of it but it’s just taking the time to actually learn it, and not becoming frustrated, which has been the biggest thing for me to get over. I’ve had the license for five years now () and I’ve made several attempts at using it as my primary build tool in the past but have always gone back to hand coding or using some kind of page builder in WordPress depending on the project. This time I’ve made the decision that there’s no turning back so I’ll figure it out come hell or high water.
Hi @chipriggs , just be careful of the old CMD+Z for undo… Hopefully someone here might update me and prove me wrong, but if you have multiple files open in PG (totally normal, ie, html content, css styles… something else…* ) and hit CMD +Z for the undo… your experience might be less than optimal!
IT sometimes undoes the work in the other file instead or such like.
There is also the History tab, which you could use instead, where you can roll back back, but…years of CMD Z muscle memory is automatic , works in most everything (Not sure about Photoshop…it may paint Rabbit ears on things in that) but I didnt get to grips with the history undo thing.
Lets see who says what about his feature here now to update me.
ok good luck.
PS
Personally, I really liked the PG Editor, except for that and it didnt use to have a find … replace… It now does have find but misses things like project wide search etc.
Still, I like it for basic stuff.
Howdy @schpengle Yep, I’ve noticed the weird “CMD + Z” behavior myself so it still exists.
Being someone whose used Photoshop since v2 (I’m kinda old), even today it “mostly” follows common UX keyboard shortcut paradigms. There’s something to be said about UX & UI following well-used industry patterns to help new (and existing) users gain mastery in apps & interface experiences that seems to get lost quite a bit with smaller, indie developers. Figma for one makes me pull my hair out on the regular when it uses different keyboard shortcuts for what appears to be just for the sake of being different. We’ll see how that goes in the future in the light of current events.
I’m hoping that the VS code plug development continues to get better & more robust but I’m not holding my breath since the WP plugin version of PG seems to be absorbing a lot of the attention these days which is why I’m trying to come to grips with using the built-in editor now along with forcing myself to use it as my daily driver for web development.
I love Pinegrow and use it all the time, and almost always edit everything with PG. Sometimes i change something with VS Code without any issue. But didn’t know there was a plugin, so i never used the live sync.
The only problem (and super annoying) is that VS codes and PG does not play nice when it comes to auto html/css structural changes. I keep getting “changes” on white space in a document even if I only change a single letter. It’s like PG has an internal conflict on how some things should be formatted and every other time it changes rows back and forth.
So i have had to turn off all “auto format html” in both PG and VSC.
yeah I don’t see them working to much on other features lately and with the new plugin for WordPress its highly unlikely. I would love to see some plugin for JetBrains IDEs although I love vs code JetBrains products just work out the box. I also hope that there Vue js integration come to fruition. The team are awesome though and its there vision. I am just along for the ride and they haven’t let me down yet.
I may add here as a kind of “report” to @matjaz that i have sometimes problems with ending tag get lost.
Specially the "</ html>"gets lost a few times. I think it sometimes happens when I use the same project with git & vs code on different devices, but I’m not completely sure about that yet… It definitely has something to do with VSCode
