Easy way to format XHTML5?

How can I format my XHTML5 documents? You know, basic indention and line wrap at a given line width? And I want a shortcut key (such as Ctrl+Shift+F in Eclipse).

I installed the Beautifyjs extension, but I don’t see how I can get it to work. I select Tools > Beautify js > Beautify HTML and it tells me, “Beautify js: Please make a selection first.”

Surely I’m not the first one wanting to format my HTML… What’s the easy thing I’m missing?

@garretwilson currently the addon only works on selections, that’s why you get this notification

To trigger the command on a keybinding, you can set up a macro and trigger this on the keybinding you want.

currently the addon only works on selections, that’s why you get this notification

This is not viable for real work.

  • I need an option to format the entire document—out of the box.
  • I need a shortcut key to format the entire document—out of the box.
  • I need a way to format-on-save—and this option needs to be easily accessible in the settings.

I know I can muck around under the hood to create macros and keybindings. But I shouldn’t have to. And I don’t expect my translators to know how to muck around with low-level details. I need to just give them the editor, and it should have a formatting option easily accessible.

Plus js-beautify (what you use under the hood) hiccups on XHTML5.

@garretwilson currently this is not available in komodo edit, in ide you got some more formatting options but i think not all above features are present. For the things missing you can always file a enhancement request.
But still, you can adapt komodo to fit your needs, you will have to set one or two userscripts, but in my opinion this is something you will have to set up once, and it’s not that hard to do.

This one was on my wishlist to,
updated addon to fall back to entire document if no selection is made

Fixed this problem in the latest release

Currently not available in addon can be done by macro
Right click in your toolbox add > new userscript
paste the code below:

if (extensions.beautifyjs) {
    extensions.beautifyjs.beautify();
}

and in the tab key binding choose the key binding you want.

Currently not possible but can be done with a usercript,
Right click in your toolbox add > new userscript
paste the code below:

(function() {
    if (extensions.beautifyjs) {
        var view    = ko.views.manager.currentView;
        var scimoz  = view.scimoz;
        var notify    = require("notify/notify");
    
        // if no current view is open
        if (view === null){
            return false;
        }
    
        // if file isn't saved we cant get it's extension
        var file = view.koDoc.file;
        if (file === null) {
            return false;
        }
        
        
        switch (file.ext) {
            case '.html':
            case '.xhtml':
                try {
                    extensions.beautifyjs.beautify_HTML();
                } catch(e) {
                    notify.send('Error: ' + e.message, 'tools');
                }
                break;
            case '.css':
                try {
                    extensions.beautifyjs.beautify_CSS();
                } catch(e) {
                    notify.send('Error: ' + e.message, 'tools');
                }
                break;
            case '.js':
                try {
                    extensions.beautifyjs.beautify_JS();
                } catch(e) {
                    notify.send('Error: ' + e.message, 'tools');
                }
                break;
            default:
                return;
                break;
        }
        
        try {
            ko.commands.doCommand('cmd_save');
        } catch(e) {
            notify.send('Error: ' + e.message, 'tools');
        }
        
    }
    
}).apply();

Can be adapted to your needs, need to be triggered after file save (macro will format the code and save the file)
The formatting menu is also available if you right click on your file content.

1 Like

Please understand that sure, these little things are easy for you and me. But for my translators who are not computer developers—after I teach them to use Git and explain to them semantic HTML5, imagine that in order to simply install and use they editor they have to do all these “simple-to-set-up-not-hard-to-do” things for each plugin in the editor! So far each add-on author is saying, “yes, we know the limitations, just muck around with the low-level settings, add some JavaScript here, add a key mapping here…” My translators will be completely lost. Look, just getting them to be able to install plugins to begin with is pushing them limit.

We want to make a user-friendly editor out of the box. I appreciate the workarounds—for me and other developers. But for mainstream users, this can only be a temporary solution

How can I tell Komodo to go out and update all the add-ons so that I can pull down your latest release?

I understand what you want, but currently there are some limitations.
The only thing i can do is give you some advice how to achieve this. I know this is not the most user-friendly way, but it will achieve what you want.

Because this currently is not a part of the editor you can file a enhancement request to komodo (or for the key binding at my address)

Komodo will look for updates for packages on start up, or you can update the addon manually

What do you mean by “update the addon manually”? I go to the add-ons section, and I see no option to update the plugin.

I just restarted Komodo, but it didn’t indicate a new version of the plugin was available. Plus Beautify js still asks me for a selection; and moreover doesn’t recognize the XML declaration, indenting the entire body of the document. What am I doing wrong?

i know komodo tells on start up if a packages update is available, i don’t now how long it takes before i publish an update it becomes available in komodo, maybe @nathanr can tell you that?

Manually i mean download the latest release from github, uninstall the old one, drag and drop the new release in komodo and you should be up and running with the new version.
I ran into a bug that when i installed the new version it ask me if i want to update form 1.3 > 1.0 and that is incorrect, filed an issue on that.

WIth all due respect you also need to understand that this software is explicitly designed for software developers. You can surely use it for different purposes but you are bound to be swimming up river a bit. I think given your situation what you would want to do is develop some userscripts and/or addons that would be auto installed for your translators.

It should take at most 6 hours. I’ll double check to see if the build process is still running.

I don’t know where you’re trying to go with that argument. Are you trying to say that this should be excuse for doing a half-way job and not making the functionality comprehensive an user-friendly, because software developers are more forgiving?

I’m a very experienced software developer, but when I install Eclipse I want to program my own software—I don’t want to have to rewrite Eclipse just to get code formatting. That’s why it’s nice that I can just hit Ctrl+Shift+F in Eclipse and it formats everything. I don’t have to select the entire file. I don’t have to write a script in JavaScript in some special location just to map a key. The only difference between me and a non-developer is that I might know how to add the workarounds if I had the time.

This is a text editor. The specified functionality is most useful for software developers, true, but if it does what it is supposed to do, then others can use it to. Let’s just fix the bugs and make it user-friendly—for whoever wants to use it. And I’m happy to help if I can—I’m reading books on XUL just so I can pitch in. But I completely don’t buy this line of thinking that we can do it halfway because it’s for developers after all.

Sorry—I have a few little soap boxes. :wink:

P.S. Please excuse the rants. I’m actually really positive about Komodo, it looks slick, the people are nice, and I plan on helping! :smiley:

Of course not, and to be clear your feedback is very helpful for improving our UX, as it gives new perspective. I simply mean that this software was designed by developer for developers, so regardless of what the ideals are there will be a bias towards those users. At some points there may be considerations where the needs and wants of the developers would obviously outweight the needs and wants of users that use Komodo for different purposes. I’m simply saying that you ought to be aware of this if you intend to use Komodo for a purpose other than its intended purpose.

It sounds like you are using Komodo Edit. IDE has formatting build in, so if you want to make a comparison to another IDE you should take our IDE as the basis, not the editor :slight_smile:

Komodo was designed to be customizable, to let you dictate your own workflows whatever that may mean. Often that means writing some simple userscripts, macros or snippet, and Komodo facilitates you in doing that.

Again, you appear to be using Komodo Edit rather than Komodo IDE. Fair of course but that version is explicitly intended to be less feature full and more basic. We will never be adding a formatter to it for example, if you want that you can use the IDE or rely on community contributions.

Not at all what I was saying, but I hope I properly explained this above :slight_smile:

2 Likes

You took my example and ran with it. :wink: OK, so let’s talk about Atom editor, which is not an IDE—it is a direct analog to Komodo Edit. It also has a plugin that talks to Beautify. The plugin does not make you manually select the entire document. It automatically gets a hotkey by virtue of it being added as an add-on, but this is customizable. And it has an option to automatically format whenever the file is saved.

I understand what you were saying about Komodo Edit vs Komodo IDE, but I consider line wrap and indent (which is basically what format does) to be firmly in the “edit” camp.

Anyway, I really don’t want to make this in a big argument.

  • As I mentioned, I’m going to learn how to write add-ins so I can fix the bugs in other add-ons, or just write my own.
  • I have contacted your company separately to ask about Komodo IDE licensing.

P.S. I do hope your API allows an add-on to automatically assign a hot key. Some of the comments by the add-on authors have made me suspicious that it might not. This would be a huge oversight—perhaps even a deal breaker. At the very least the add-on API should have a way for an add-ons to show up in the key bindings so that the user can easily assign a key to it.

Sure, but now we’re talking plugins, that’s third party stuff and while you can certainly talk about ideals it would at the end of the day be up to the plugin maintainer whether he wants to go with that or not.

I’m not sure if this is apparent, but @babobski is not a Komodo developer. He is a community member that graciously dedicated his time to create and maintain the beautify addon. You can tell what forum members are Komodo developers by their title, next to my name it should say “Komodo Developer”…

It does indeed, see http://docs.komodoide.com/SDK/api/commonjs/commands

1 Like

Hey, @babobski, I see that you prevented js-beautify from indenting the body of an XHTML file. That’s cool—thanks. But it appears that js-beautify (that is, the publicly available version) still does that (see https://github.com/beautify-web/js-beautify/issues/828). What did you do to fix the problem? Did you add some workaround on the Komodo side, or did you use some secret setting for js-beautify? Just curious, as this problem also appears in e.g. atom-beautify.

@garretwilson To fix this i added the xml declaration to the single tags(like br, link etc.) in the beatify html function, so beautify js understand it’s not a opening tag, but a single tag.

Oh, nice—so I could probably use this workaround in other environments as long as I provide a beautify configuration. Thanks—I’ll look into that.

(I’m wavering between Atom and Komodo. The moment I work around a bug in one, another pops up so I switch, and another bug pops up in that one and I run out of workarounds, and so I switch again. Bugs, bugs, at every step of the way. Exhausting it is.)

For example, you might look into Komodo indent preventing Beautify js tabs .

@babobski, what do you mean exactly? js-beautify has an unformatted option. Is that the one you used? What string did you add to this list — "?xml" or some other identifier?