User to user discussion and support for UltraEdit, UEStudio, UltraCompare, and other IDM applications.

Syntax highlighting, code folding, brace matching, code indenting, and function list
9 posts Page 1 of 1
Hi folks!

Long time UE user. Not necessarily a power user, just a user.

I have been doing a lot of JavaScript development lately. I keep trying to use UltraEdit but find it is missing some obvious stuff - wondering if UE is missing the functions or I am missing it but it is already in there somewhere. Should I be making a feature request?

JavaScript code indentation: the "Re-indent selected code" does not indent properly. The artistic style tool just wrecks my javascript code no matter what I choose. The only power-tip regarding JavaScript i've found in the UltraEdit archive is regarding JSLint which is also not about formatting the code, just looking for proper code structure. I *could* write a script I guess, but it just seems like it is such a basic component for any modern web development IDE. I realize UE is not technically an IDE, but it has so many other web development oriented tools in it... it feels like JavaScript is getting short-shrift. Is there any way to integrate tools like JSBeautifier, JavaScript Beautifier, JSPretty, etc. into UltraEdit?

JSON code folding and validation: it seems like any web development system I look at uses JSON for communication and serialization. Even non-JavaScript ones. But JSON in UltraEdit has no special support. It seems like some built-in support for folding JSON in the same way we can fold XML would be really useful. Likewise, validating JSON would be really useful. Right now I have to use JSONLint.org to format and validate my JSON. Being able to switch a chunk of JSON from human-readable-indentation to compressed (i.e., no spaces, tabs, etc.), back-and-forth, quickly, would be great. --EDIT-- To be clear, I mean that regular code folding for JSON works, but the XML manager is a special tool for working with the heavily nested XML data structures... extending it to support JSON in some way would be helpful.

This next thing is not specifically JavaScript specific...
Code library/Framework hinting: Auto-complete and pop-up function/method help for various languages, libraries, and frameworks is really useful. Some editors have-built in language lookups for core-language stuff, and in other cases can have custom add-ons or plugins or extensions to add further support for 3rd party libraries and frameworks. If am using jQuery or Angular or Require or any of the bzillion JavaScript libraries and frameworks, can UltraEdit be customized to support these? I don't mean for IDM to add-in support for specific libraries/frameworks, but how can users affect such support? Other than customizing the syntax highlighting in UE, I really am not aware of other options.

CSS/SASS/LESS: Is there any better support for using SASS or LESS type CSS systems/syntax?

CSS to HTML to CSS: Furthermore, what about better integration between the HTML and CSS files? If an HTML file references a CSS file, is there any way for UE to lookup a list of existing classes defined in the CSS file so that when I start typing "Class='..." it comes up with a list of guesses based on the CSS file? Or if I am in the CSS file and start defining a new class can UE hint at names of classes referred to in the project's HTML files that are not yet defined?

I've been trying other editors as a consequence of UE not having obvious support for these functions... recently tried Brackets. Lots of things I don't like about the program, but at _least_ it can handle the above stuff pretty well (minus code folding of any kind). Brackets' CSS support is way more advanced than UE. Aptana's code completion can be customized for 3rd part libraries. And Visual Studio does just about everything listed above I think except maybe the JSON validation (?).

A bunch of tools for validation and beautification are available as web sites with APIs ... how can UltraEdit easily tie-in to such web-based tools?

This list of thoughts could be seen as a complaint list, but really, it is a "let me double check I am not missing something before I complain" list :)

Thanks for insight!

Nick
As support for my case that "re-indent selection" does not handle JavaScript well... consider this chunk of JS code.

Code: Select all
define ( 
[
'vtswcalcApp'
],
function ( vtswcalcApp )
{
vtswcalcApp.directive ( 'contentStep', ['ConfigurationService', function ( vtswcalcAppConfiguration )
{
return
{
restrict: 'AE',
replace: 'true',
transclude: true,
scope:
{
config: '=info'
},
templateUrl: '/views/directives/mainContentStep.html',
link:
function ( scope, elem, attrs )
{
scope.$watch (
function ( scope )
{
return vtswcalcAppConfiguration.getConfig().mainContentConfig.stepButtonHeight;
},
function ( newValue )
{
elem[0].style["height"] = newValue;
}
);

elem.bind ( 'mouseover', function()
{
elem.css ( 'cursor', 'pointer' );
}
);
}
};
}
]
);
}
);

The UE "re-indent selection" _does_ make it more readable...

Code: Select all
define ( 
[
'vtswcalcApp'
],
function ( vtswcalcApp )
{
   vtswcalcApp.directive ( 'contentStep', ['ConfigurationService', function ( vtswcalcAppConfiguration )
   {
      return
      {
         restrict: 'AE',
         replace: 'true',
         transclude: true,
         scope:
         {
            config: '=info'
         },
         templateUrl: '/views/directives/mainContentStep.html',
         link:
         function ( scope, elem, attrs )
         {
            scope.$watch (
            function ( scope )
            {
               return vtswcalcAppConfiguration.getConfig().mainContentConfig.stepButtonHeight;
            },
            function ( newValue )
            {
               elem[0].style["height"] = newValue;
            }
            );

            elem.bind ( 'mouseover', function()
            {
               elem.css ( 'cursor', 'pointer' );
            }
            );
         }
      };
   }
   ]
   );
}
);

But then what if I run it through JSBeautifier.org?

Code: Select all
define(
    [
        'vtswcalcApp'
    ],
    function(vtswcalcApp) {
        vtswcalcApp.directive('contentStep', ['ConfigurationService',
            function(vtswcalcAppConfiguration) {
                return {
                    restrict: 'AE',
                    replace: 'true',
                    transclude: true,
                    scope: {
                        config: '=info'
                    },
                    templateUrl: '/views/directives/mainContentStep.html',
                    link: function(scope, elem, attrs) {
                        scope.$watch(
                            function(scope) {
                                return vtswcalcAppConfiguration.getConfig().mainContentConfig.stepButtonHeight;
                            },
                            function(newValue) {
                                elem[0].style["height"] = newValue;
                            }
                        );

                        elem.bind('mouseover', function() {
                            elem.css('cursor', 'pointer');
                        });
                    }
                };
            }
        ]);
    }
);

I realize that code-beauty is like all beauty... so maybe some prefer UE's version of the formatting. The way I see it, the JSBeautifier has a better in-built understanding of the structure of the code and uses that understanding to make it more readable. UE does not seem to understand how to handle the "define" block at the start of the code, or how to nest anonymous functions well. Is there some other option than "Re-indent selection" in UE to get a similar result to the JSBeautifier? Also - just out of curiosity - why does the "re-indent selection" need a "selection" at all? What about just re-indenting the whole document?

Thanks for the insight!
JavaScript code indentation

The command ReIndent Selection does exactly what the name states - it reindents the lines of a selection. It does not reformat the block. ReIndent Selection works for any file syntax highlighted by a wordfile which contains /Indent Strings =, /Unindent Strings =, /Ignore Strings SOL =. This command has no language intellisense required for reformatting a block.

Ctrl+A must be pressed first to select all to reindent an entire file. But this command is most likely rarely used to reindent an entire file. I use it nearly always just on a block. But perhaps other users use it nearly always on an entire file, I don't know. It is also possible that the user has to make always a selection first to avoid a reindent of entire file by mistake, for example if a hotkey is assigned to this command and by mistake the wrong key is pressed.

Artistic Style reformats a block or an entire file. It inserts line breaks or removes them. It inserts spaces around brackets or removes them. There are lots of options to control this reformatting. But Artistic Style supports only C/C++, C# and Java. JavaScript is not supported. It can be used also for JavaScript, but only if nothing JavaScript specific is used in the block.

It is of course possible to use installed third-party tools to reformat a JavaScript block. Under Advanced - User Tools it is possible to configure up to 25 tools called from within UltraEdit to do something with active file or current single-line selection. Up to 25 project tools can be additionally configured if a project is loaded.

A multi-line selection cannot be passed to a tool as this is not possible via command line on Windows. A workaround for passing a multi-line selection to a tool is the usage of a macro or script which copies the current selection to a new file, saves the file with a specified name into a specified folder, runs the appropriate user/project tool which reads in the file and outputs the result also to a file, opens this output file, selects everything and replaces the original selection. That is easier to achieve as it reads.


JSON code folding and validation

UltraEdit can be customized in many ways. There is a user-contributed wordfile for JSON at Downloads - Extras - Wordfiles. I don't know how good this wordfile is as I'm not editing JSON code. The wordfile is very small.

Further, there is an UltraEdit script to reformat JSON code to human readable code at Downloads - Extras - Macros & Scripts. Again, I don't know how good this user-contributed script is as I have never used it myself.

But I have expert knowledge on writing UltraEdit scripts and wordfiles for syntax highlighting and can help on improving both if it is posted what is not working fine and what is expected for a posted code block or an attached file (as ZIP or RAR archive).

As I don't know anything at all about JSON, I don't know if XML manager designed for XML files according to XML standard can be used also for JSON files. Are JSON files XML files according to XML standard?

UltraEdit supports also a hierarchical function list based on regular expression searches in a file. This is a very powerful and highly customizable feature. With the right Perl regular expressions it is very often possible to get a function list which is more a structural overview of a file than a simple list of functions.


Code library/Framework hinting

It is possible to add *.hlp or *.chm files to help system of UltraEdit via Help - Add Help Files. I have done this for CSS and HTML. After doing this it is possible with a key hit to get help on a tag or CSS property on which caret is currently positioned. If there is no CHM (Compiled HTML) file available for libraries or frameworks, but there is a HTML documentation available, it would be possible to convert the HTML documentation into a CHM documentation for this purpose.

And there is the web search toolbar with customizable search URLs to get a quick help on a symbol using an online help system or search engine. Again user/project tools can be also used to call for example your favorite browser with an URL and the selected word inserted in the URL for online help.


CSS/SASS/LESS

I have never read before something about SASS and LESS? Could you enlighten us what those abbreviations stand for and post links to websites explaining them? Syntax highlighting support with code folding, auto-correction and auto-indent can be added to everything more or less perfect.


CSS to HTML to CSS

As UltraEdit is not designed specific for web page editing, it does not have such an extended support as Dreamweaver and other editors designed for for web page editing have. But it is possible to define smart templates. I use smart templates for my 3 HTML projects which of course are tailor made for the projects and the definitions in the used CSS files.

Smart templates can be the UltraEdit users best friend and improve coding efficiency a lot. But some time must be spent on defining them. I analyzed which code blocks and CSS classes I used most in my projects and defined next the appropriate smart templates for inserting them quickly. I have used the auto-completion feature, the tags list and a macro collection for this task before smart templates existed. But smart templates are nowadays better for inserting a code snippet quickly into a file because of various reasons like automatic indentation on inserting the code block or support for parameters.
Best regards from Austria
I've used LESS in the past, though I'm pretty much retired from coding now. Had a wordfile for it somewhere that enabled syntax highlighting for it. It was rather handy. I'm fairly certain I had sent it to IDM to be included with the downloadable wordfiles, but am unsure if that ever happened. I used a combination of this wordfile, and another utility that I had picked up for Windows that let me define "where" I kept my LESS files. As long as this utility was open, it would monitor all my LESS files for changes, and do a compile from LESS to CSS every time I clicked save in UE. I had a user tool defined for a while that would compile the LESS directly from within UE, but I found it worked much more smoothly to use this other 3rd party utility, and have it auto-compile for me.

For the utility, try http://winless.org/

You'll find a link for other LESS tools on that page as well.

Here's my wordfile, and I hope it helps somewhat.
less.zip
LESS Wordfile
(6.21 KiB) Downloaded 112 times


While I had looked into SASS, I never really used it before, so can't really help any there.
“Don’t document the problem, fix it.” – Atli Björgvin Oddsson
Hi and thanks for the response!

Mofi wrote: JavaScript code indentation

The command ReIndent Selection does exactly what the name states - it reindents the lines of a selection. It does not reformat the block. ReIndent Selection works for any file syntax highlighted by a wordfile which contains /Indent Strings =, /Unindent Strings =, /Ignore Strings SOL =. This command has no language intellisense required for reformatting a block.

So are you saying that I can control how "ReIndent Selection" re-indents my javascript, CSS, JSON, etc., at least to some degree, by defining indentation rules in the word files for the appropriate languages? While it is not going to be perfect, that is good to know/understand!

Mofi wrote: Artistic Style reformats a block or an entire file. It inserts line breaks or removes them. It inserts spaces around brackets or removes them. There are lots of options to control this reformatting. But Artistic Style supports only C/C++, C# and Java. JavaScript is not supported. It can be used also for JavaScript, but only if nothing JavaScript specific is used in the block.

Yeah - I think I am going to submit a feature request for the Artistic Style tool to be customizable for more languages... it is actually very surprising to me that it only supports three languages and ... that's it. No other option really. Like someone added it for fun and then they just let it be.

Mofi wrote: It is of course possible to use installed third-party tools to reformat a JavaScript block.

A multi-line selection cannot be passed to a tool as this is not possible via command line on Windows.

I have looked into some of the downloadable tools a little but most are for Windows and I'm on Mac. Is there any simple way to incorporate web services for this sort of stuff via the Tools menu? I.e., the tool sends the current file to a web service API and brings the result from the web service API call back into UltraEdit? I'm guessing the only way to do that is to write a script.

Mofi wrote: JSON code folding and validation

UltraEdit can be customized in many ways. There is a user-contributed wordfile for JSON at Downloads - Extras - Wordfiles. I don't know how good this wordfile is as I'm not editing JSON code. The wordfile is very small.

Thanks! I missed this. JSON is a tiny subset of JavaScript, syntax-wise, so the word file would be small.

Mofi wrote: Further, there is an UltraEdit script to reformat JSON code to human readable code at Downloads - Extras - Macros & Scripts. Again, I don't know how good this user-contributed script is as I have never used it myself.

Great! I'll check that out!

Mofi wrote: As I don't know anything at all about JSON, I don't know if XML manager designed for XML files according to XML standard can be used also for JSON files. Are JSON files XML files according to XML standard?

JSON is very hierarchical. It is not extensible, however. It is in no way based on XML to my knowledge. The JSON syntax describes hierarchical structures of key-value pairs. I personally appreciate its simplicity and compactness over XML, as long as it is not too hard to describe my data in only key-value pairs.

Mofi wrote: UltraEdit supports also a hierarchical function list based on regular expression searches in a file. This is a very powerful and highly customizable feature. With the right Perl regular expressions it is very often possible to get a function list which is more a structural overview of a file than a simple list of functions.

What is the name of this feature so I can read the help for it?

Mofi wrote: Code library/Framework hinting

It is possible to add *.hlp or *.chm files to help system of UltraEdit...

I think here that what I was really looking for is auto-completion and code-hinting. If IDMComp would add a base framework for modifying this like they did with the word files, the community could fill in the blanks.

Mofi wrote: CSS/SASS/LESS

The reply following your own seems to address the LESS syntax and tooling a bit.

The basic idea is that SASS and LESS are meta-languages for handling complex CSS files. They allow you to write pseudo-CSS that has additional, much needed functionality. Then you compile your finished SASS or LESS file into CSS and the compiler creates the usually much more lengthy and complex CSS files for you from your SASS or LESS files. In other words this is how the community has responded to the shortcomings in CSS' syntax and code structure.

Mofi wrote: CSS to HTML to CSS

As UltraEdit is not designed specific for web page editing, it does not have such an extended support as Dreamweaver and other editors designed for for web page editing have. But it is possible to define smart templates.

I will have to investigate the smart templates and see if they can help. I know nothing about them yet.

Thanks for such a lengthy reply! Take care!

Nick
If you are looking for a source formatting tool that can handle more languages than Artistic Style have a look at SourceFormatX, which handles 19 different languages including JavaScript. I've used it to clean up poorly formatted code (C in my case) and the results have been very good. You can find out more about it at http://www.sourceformat.com/

Cheers...

Frank
NFlourish wrote: So are you saying that I can control how "ReIndent Selection" re-indents my javascript, CSS, JSON, etc., at least to some degree, by defining indentation rules in the word files for the appropriate languages?

That's right.

NFlourish wrote: Yeah - I think I am going to submit a feature request for the Artistic Style tool to be customizable for more languages...

Artistic Style is an open source project, see its homepage. Or you try SourceFormatX as suggested by Frank.

NFlourish wrote: Is there any simple way to incorporate web services for this sort of stuff via the Tools menu?

I don't know as I have never needed to do it. And I am using only Windows, so I cannot help on this question.

NFlourish wrote: What is the name of this feature so I can read the help for it?

Read in help of UltraEdit the page about Syntax Highlighting.

Open the wordfile for JSON in %APPDATA%\IDMComp\UltraEdit\wordfiles, and add above the line with /Delimiters = a line with

Code: Select all
/Regexp Type = Perl

Save the wordfile and close it. UltraEdit uses now the Perl regular expression engine for function string searches. With a JSON file opened and highlighted by the JSON wordfile, open function list view via View - Views/Lists - Function List, right click into the view and left click on Configure. A dialog opens which lets you add Perl regular expression search strings, create groups and subgroups.

It is of course also possible to define all directly in the JSON wordfile. See c_cplusplus.uew installed with UE or Xbase++ wordfile for a template. After making a change on the JSON wordfile, switch to the JSON file and update the function list using key assigned to Search - Function List.

NFlourish wrote: I think here that what I was really looking for is auto-completion and code-hinting.

Well, it is possible to assign an auto-completion file at Advanced - Configuration - Word Wrap/Tab Settings. Please note that everything below the list box at top is specific for the files with an extension listed in the list box. See file extension based word wrap, tab and indent settings for details.

Or even better nowadays is the usage of smart templates as they support parameters during inserting. Smart templates defined for (syntax highlighting) language JSON would be best in this case.
Best regards from Austria
In today's day and age, not providing builtin support for formatting and highlighting JavaScript and JSON in a PAID FOR product is silly when so many other "free" editors provide that feature. :roll:

-jim
Jim, in my experience open source text editors have one big advantage against text editors which must be paid for usage: the users don't expect that everything is done by employees of a software producing company because there is no such company.

So on open source text editors there is nearly always a user which configures or develops an extension and contributes it to the user community of this editor. When this extension is downloaded and used by many other users of that editor, it is added to the installation package of the editor to be "built-in".

UltraEdit is a shareware text editor. It can be widely customized by user for the own needs. An UltraEdit/UEStudio user wants a better syntax highlighting, auto-completion, code folding, re-indent and automatic indent/unindent for JavaScript and for JSON as done with pre-installed javascript.uew, the user has the possibility to customize and extend the wordfile. An UltraEdit/UEStudio user wants a feature to reformat existing JavaScript or JSON code, the user has the possibility to code an UltraEdit script which uses JavaScript as core language to reformat the JavaScript / JSON file.

But the difference between a text editor being free and one for which a license must be paid is in my experience: the users paying for the text editor are thinking that everything must be done by the company developing and selling licenses and the paying user just have to use it. That is of course a legitimate demand. But when several hundred users extend the capabilities of a free application in spare time, a small software producing company with just a few developers must focus on what most users purchasing licenses request most.

However, also UltraEdit has users which offer their spare time to extend capabilities. I'm one of those users. Another one is Einars "elfz" Lielmanis who contributed the UltraEdit script Javascript Deminifier / Reformatter. Or an anonymous user who contributed the very small UltraEdit script JSON Reformat. Both user contributed scripts can be found together with other scripts and macros on Macros & Scripts download page.

Jim, what exactly do you want improved on syntax highlighting of JavaScript and JSON files?
Best regards from Austria
9 posts Page 1 of 1
cron