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

Snippets (Part 1)

If you ever find yourself repeately typing the same bits of text over and over again (and let’s face it programmers… some days that’s all it feels like, am I right?) then you will appreciate the functionality that snippets will provide. Snippets are essentially bits of text that are automatically inserted into an editing buffer when a keyword is entered in the editing buffer (the keyword is erased and replaced with the associated text). Using snippets to enter code will save you lots of time and typing and will also generate text that is free of errors.

Though there are several applications that exist to handle snippets in a general fashion, TKE has snippet support that has more functionality for programmers as well as better control over what snippets are active depending on the programming language being used in the current editing buffer. In this and the following articles, we will explore TKE snippets in much greater detail so that you can take full advantage of their functionality.

Continue reading “Snippets (Part 1)”

Snippets (Part 1)