See attached images:
The code editor available in Pinegrow is a very basic version. While it makes source code editing easy, it doesn’t have all the features of modern code editors. For developers who need more, one option is to turn off the auto-formatting feature for HTML code in the settings (and do the same for CSS if you prefer).
And use an external editor like VSCODE (where you can activate the Pinegrow extension), which will then allow you to install other extensions that match your preferences.
Actually, I am having the opposite problem, the formatting out the box does not work at all, I have to manually right click to format.
Also, I am more concerned about this other issue - the code suggestions are 100% more important - they feel very delayed when typing - I have to wait 2-3 seconds to get a lis of css properties, if I do not wait - its literally faster to type it and not wait for the suggestion pop up to come.
and tag closing - when I type </ I want the tag to close, not > or <.
I hate vs code and will not be using it, its a worse experience than this for front enders who also code. Having to shop 1000x extensions, and set up json for formatting with no ui, a command pallet with 10000 commands, no standard naming convention, they don’t even call live preview view or live preview, its called something else, it is disgusting to me and I’m not spending 1000x hours learning that dogwater. I quit web design in 2015, when VS code launched, but I have not been happy with the industry ever since adobe bought Dreamweaver, div tags were introduced and other companies dropped smart phones - killing photoshop, dw, fw, flash workflows, etc.
The implementation of Pinegrow’s internal editor is based on Monaco (GitHub - microsoft/monaco-editor: A browser based code editor) but in a very stripped-down, simplified version. It’s a fact that some advanced features, even if they are “available,” might not work as smoothly as they would in a dedicated external editor.
We are aware of this, which is why we recommend using an EXTERNAL editor for demanding users who absolutely need these features.
If you don’t like VSCODE, since Pinegrow edits standard files, you can use ANY external editor alongside Pinegrow. You might miss out on some cool features available through our extension, but you can precisely decide what you want.
NOTE: If I’m not mistaken, the auto format (Pinegrow’s option) happens when you save the file, not while you’re live editing it.
What do you mean external editor? Are you suggesting I use vs code to design my css3 properties or to format code and then copy it back? or is there a way to link vs code features inside pinegrow?
Oh, the format on save doesn’t work at all, which I am fine with because when working with well formatted code, it often gets screwed up with external formatters. I’ve seen the strangest things from html extensions lol, like I’ve seen them do this:
<input type="text"
name="name"
id="name"
class="blue"
value="your name"
/>
Which is absolute lunacy and traditionally a JS way or json way of formatting, lol. I’ve also seen code, that goes back to this weird thing where it will put the closing > on a new line like:
It is the cmd+k and cmd+f that was not work, though, I left the computer on and program running all day and it started working, all except cmd+a and cmd+k. cmd+a and cmd+f works, which I am fine with.
Just dunno what to do about auto-suggest, it has a 3 second delay and its faster to just type the whole property than wait for it to populate.
Take a look at the video I just added to my previous response.
As for Visual Studio Code (and the Pinegrow extension which is FREE), I recommend checking out the documentation that describes its features with Pinegrow, which I provided a link to in my earlier reply.
Thanks
This video was not in the reply earlier, I edited my reply too before I saw it.
Oh, I have this setting on already, it didn’t help :S
Sorry, I noticed we were heading into a discussion where we weren’t understanding each other, so I did indeed record the video AFTER posting the response, and then added it afterwards.
Thanks
I believe its a mac m1 problem, not sure.
I’ll look more today, I won’t be able to do the VS code thing unless I am on my PC, screen realestate is limited on my mac, unless I am at a coffee shop or something and have a tablet on the side.
Any way to have inline editing by pressing cmd+e like dreamweaver and phoenix code has?
Thanks,
Kyle
Just so you know, I’m using a Mac M2 for all my tests, and the video I just posted was recorded on the Mac M2.
Okay, thank you, can you disable the default code editor within pinegrow if you install the VS Code extension and dock the VS Code extension underneath the pinegrow preview?
No, what you’re looking to do (“docking” Visual Studio Code into the Pinegrow interface instead of using the internal editor) isn’t possible.
Using Visual Studio Code should be seen as using a companion application, and it operates in a separate window. You’ll need to arrange the windows in your workspace on your screen(s).
Ok, this is not going to work, but thank you. Everything is 100% well with pinegrow, if it had instant auto suggest like Dreamweaver and ctrl+e inline functions, I would use it!
I don’t even need any other features really.
Trying some other programs right now, thank you for your help.
I am not touching VS code with 10’ pole, it is way too complicated to setup for a pure html/css workflow, maybe its fine if you work in nodejs and multiple other languages. For pure html/css/js, its a crap shoot.
Anyways, everything I’ve tried, phcode, hbuilderx and many more, they all do weird things with formatting out of the box.
Dreamweaver got it best, but its still wrong:
<a href="img/with-franklin-car.jpg" data-caption="me with Franklin Car" class="gallery-item">
<div class="image-frame"> <img src="img/me-with-franklin-car.jpg" alt="me with Franklin Car"/> </div>
<div class="caption"> with Franklin Car</div>
</a>
It should be and used to be this in DW:
<a href="img/with-franklin-car.jpg" data-caption="me with Franklin Car" class="gallery-item">
<div class="image-frame"> <img src="img/me-with-franklin-car.jpg" alt="me with Franklin Car"/> </div>
<div class="caption"> with Franklin Car</div>
</a>
I used to be able to change the indents in the a tags using edit>preferences>code formatting, but Dreamweaver seems to be buggy in that regards on the 2021 LTS version. Also, CC killed format on save, and you now have to keybind or map an action in a 3rd party software so both execute.
Pinegrow got it very close, I am impressed, but its still wrong:
<a href="img/with-franklin-car.jpg" data-caption="me with Franklin Car" class="gallery-item"> <div class="image-frame">
<img src="img/me-with-franklin-car.jpg" alt="me with Franklin Car"/>
</div> <div class="caption"> with Franklin Car</div></a>
VScode, beautify, etc all generate an error when trying to format this code:
<a
href="img/with-franklin-car.jpg"
data-caption="me with Franklin Car"
class="gallery-item">
<div class="image-frame">
<img
src="img/me-with-franklin-car.jpg"
alt="me with Franklin Car"
/>
</div>
<div class="caption"> with Franklin Car</div>
</a>
Actually, it was originally ai code, but I’ve seen extensions do this type of formatting too, but at least pinegrow gets it close. Who is making these semantic design changes at the top? There is no way this is a standard now.
Also, how is it so hard to get formatting workout out of the box anymore? Did companies really say - you have to manage all of this on your own now, and let the community handle the development? I have no idea what is going on, or why the landscape has turned to this. It is crazy to me. Hbuilderx and others did not do a great job either. I would try wappler but it doesn’t have wordpress snippets and $56.25/mo is insane to me.
Still struggling here after a 10 year break, I quit soon as VS code came out. Even refused to use photoshop or tables anymore when smart phones came out in 2005/6ish, which was a real struggle for me. I hated that the web introduced divs and no longer allowed us to paint our websites pixel perfect in photoshop. Just following the big 72px hero sections everyone else does, with no content above the fold. Heh. My design has suffered from it, so much, to the point, where it’s best for me to just have someone else handle it. While I wait for other programs/frameworks/etc to find solutions, clearly the new one of doing things is not clear or best. Phones have ruined our landscape as designers and ai could be next on the list to make it worse.
I’ve met people who have spent 1000s of hours customizing their VS code - something I am not looking to do. Especially for a pure html/css/js workflow - 5 page sites with occasional wordpress.
Any help will be greatly appreciated,
APB // Fungames
ps -
I just wanna say, if DW had proper table insertion, good formatting, a wordpress extension like pinegrow with all the snippets, and still had the ability to quickly attach CSS Stylesheets using keyboard or just press 1 button - that was not so hard to find(you have to click 3 times now and its easier to just type <link href=“” etc.) - it would be game over.
This is so insane and hyper useful coming from pinegrow:
That and if photoshop had an css3/animations/transition panel like figma/anima does, instead of timeline gifs, that would take me back or even a fireworks that exported pure JS/Divs no canvas, but I am asking for way too much at this point.
Just thinking - Pinegrow is pretty good, it just needs instant intellisense, inline editing(cmd+e), horizontal(top - preview editable panel)/vertical(bottom - code panel) stacking that can be toggled, tabs like DW for attached files and their source, and better formatting.
Would these be feasible without VS code, with the default text editor in Pinegrow, maybe if I had a programmer develop an extension? Or no? Is it hard coded/not open sourced for us to make changes to the built in code editor window?
I am just going back to dreamweaver, but I will manually bind the code format key, and deal with tags not auto completing formatting and other things while writing code. Also, would love to switch to tables, but for some reason best practices call for to be inserted now days, even browsers inject them by default. Dreamweaver no longer handles well at all, especially from the insert>table function which is a table designers dream, to have both that and ability to type them from head to toe and close with </ not >. Just my thoughts. Or if they do close with > then put the cursor on the outside of the follow tag for instance:
here the cursor would land after typing> so you could continue with . But yea, I can't remember if that is how I liked my code workflow to go for tables anyways, because I've not used tables since 2005, I just heard some people still do with tailwind.css and other systems. Which I would much prefer if code editors made it beautiful code for them and easy to manage for layouts like they were in 2005. They were so beautiful, and easy to follow, edit, change. Divs are a nightmare and impossible to work with. I hate them. Especially flexbox and having to google that still, even though its been out a while.I might be willing to pay $30/mo for wappler if it had wordpress snippets, but I also have not tried it - it might be buggy as well, and not have a pure html/css mode like DW does.
Edit: I have someone helping me customize VS code proper formatting, docked live preview, inline editing, etc. Thank god.
Well, since you are using Monaco. Monaco has an internal debounce delay, is there any way the team can open source this side of the project, so I can edit it to my liking? 200ms is too much by default.
Completion Delay (Debounce)
Monaco uses a small internal debounce (~200ms) when typing before it fires provideCompletionItems.
You can’t directly set this to 0 via props, but you can override the default debounce behavior by:
Using triggerCharacters
So its fast and snappy like DW?
Thanks again,
Fungames // Apoliticalboy
