Auto-completing HTML/XML tags

HTML editors have many different methods for handling the auto-completion of tags, that is, when an opening tag is entered in the editing buffer (i.e., “<div>”), the closing tag is inserted immediately after by the editor, saving the user time and keystrokes. Various editors use different strategies for detecting when/how to auto-complete:

  1. When the opening tag is completed (with the closing “>” character).
  2. When the start of the closing tag (the “</” characters) is entered and then use some inference logic to insert the correct closing tag.
  3. Do nothing at all.

Each of these solutions have their pros and cons. For example, solution #1 generally performs quickly since it is relatively easy to get the just entered tag name; however, if the user only wants to insert a starting tag at the current insertion point, the editor is inserting text that the user will now have to spend time removing, saving no time and perhaps taking a bit more time to edit. Solution #2 doesn’t have the downside of #1 since the editor only inserts the closing tag when/where the user chooses; however, it can have a bit of a performance impact since the editor needs to infer which closing bracket to insert. Solution #3 has the most flexibility, but obviously doesn’t attempt to help the user in the more common cases.

For HTML/XML tags, TKE takes a slightly different approach to tag auto-completion, relying on its built-in Emmet support. To insert a tag with Emmet, simply enter the name of the tag without the angled tag brackets and enter the Control-E shortcut. This will replace the tag name with both the starting and closing tags as shown in the animated GIF below.

img-alternative-text

If you need to wrap a block of text with a given tag, select the text to wrap, and select the Edit / Emmet / Wrap With Abbreviation menu option. An entry field will be displayed at the bottom of the window, allowing you to enter the tag name to wrap. After entering the tag name, hit the RETURN key to cause the opening/closing tag to be inserted around the selected text. What is even cooler is that TKE will adjust the indentation so that the code looks good after the insertion occurs.

Using Emmet for tag auto-completion has all of the upsides without the downsides since it gives the user all of the control and then some.

To see more information and download your copy of the TKE code editor, visit http://tke.sourceforge.net.

Auto-completing HTML/XML tags

Vim Modelines

Everyone seems to have their own favorite editing preferences regarding things like:

  1. Should tabs be converted to spaces?
  2. How many spaces should be used if I hit the tab key?
  3. How many spaces should be for an indentation?

And so on and so forth.

Most editors, including TKE, allow you to specify these various editing preferences to your individual liking, but how should these settings be handled if you are sharing a file with a wider audience? If everyone uses different values and makes edits to the file, the structure of the file is going to look really bad, making the code harder to read and understand.

In smaller circles, you could make a “rule” that everyone must never use tab characters, but this rule is hard to enforce, especially in a larger audience.

Fortunately, for most editors that support Vim, which includes TKE, there is the concept of the Vim modeline. This is a line towards the top or bottom of a file which tells the editor how to handle formatting for the given file. These formatting options are specific to the file and will not mess up your preference values.

To create a Vim modeline to your file, it is best to put it inside a comment block in either the first or second line of the file or at the very bottom of the file. TKE allows you to specify how many lines at the top or bottom of the file to look for a modeline.

The following graphic shows an example of what a modeline might look like:

img-alternative-text

This example modeline sets the file format (endline character) to use the unix format, sets the shiftwidth value to 4 spaces and forces the editing buffer to treat the file as Tcl syntax.

You can learn more about modelines in the official Vim documentation at vimdoc.sourceforge.net.

To see more information and download your copy of the TKE code editor, visit tke.sourceforge.net.

Vim Modelines

Find/Replace Transmogrification

Do you ever find yourself with the editing situation where you need to transform a text pattern to a string that contains information in that pattern? For example, suppose you want to convert all Tcl style assignments to C-style assignments.

Tcl:
set foo “some value”

C:
foo = “some value”;

This may seem like a time-consuming task until you know that TKE supports this type editing with the “Find / Find and Replace” capability. Because “Find and Replace” supports regular expression syntax, you can place any text that you would like to use in the “Replace” field by surrounding them with parenthesis in the “Find” field. You can then reference these matched text values in the “Replace” field by specifying a backslash () character followed by a number with corresponds to the left parenthesis order (starting at a value of 1).

So to implement a solution to the problem above, we could search the text for the pattern:

(s+)sets+(w+)s+(.*)$

This will place the preceding whitespace into variable “1”, the variable name of the Tcl “set” command into variable “2” and the value being assigned to the variable in variable “3”. We can then perform the text transformation in the replace entry field with the value:

12 = 3;

Once the text has been input, all Tcl set commands found in the editing buffer will be transformed into the C equivalents.

Pretty slick right? Use this powerful editing feature to make quick work of complex, repetitive editing tasks.

To see more information and download your copy of the TKE code editor, visit tke.sourceforge.net

Find/Replace Transmogrification

Indentation Formatting

If you have ever looked at someone’s code that seems to have no regard for proper (or even consistent) indentation in their code, you will immediately appreciate TKE’s indentation formatting feature.

To adjust the indentation formatting for an entire file, open the file in an editing buffer and, while the editing buffer is the current buffer, select the “Edit / Indentation / Format Text” menu option. After a few moments, like magic, TKE will automatically adjust the indentation of the entire file.

Hard to read code
Easy to read code (and that’s why the function failed to compile)

 

 

To adjust a portion of the file, simply highlight the text to adjust, select the same “Edit / Indentation / Format Text” menu option and only the selected text will have its indentation adjusted.

If you want to guarantee that none of your indentation adjustments are accidentally saved to the file (i.e., if you are simply attempting to better understand a piece of code rather than take ownership of said code), simply lock the editing buffer using either the “File / Lock” menu option or right-click on the editing buffer’s tab and select the “Lock” option there. As long as the file is locked, you may make all of the file adjustments that you like without worrying about saving those changes to the file.

Now go and tell that individual that he/she needs to start using TKE with its awesome auto-indentation capabilities so they can start writing some code that everyone can feel better about!

To see more information and download your copy of the TKE code editor, visit http://tke.sourceforge.net

Indentation Formatting