Scott Granneman

panorama-043.jpg

Auto-Completion in Sublime Text

On this page…

    Sublime Text auto-completes text; in other words, it figures out what you're typing & completes it for you. This can save time & typing, as well as making your work more accurate. It's a great feature for any text editor, & Sublime Text does it really well. In addition, you can also install various packages that will enable additional kinds of auto-completion.

    Built-in auto-completion

    From the Sublime Text docs:

    Auto complete shows the completion popup as you type, so you can fill in long words by typing only a few characters. It's enabled by default for source code and HTML (but only after entering a < character).

    Two things are discussed in the excerpt: words & code.

    Words

    Sublime Text pays attention to the words you've already typed on your page & will auto-complete them if you press tab. Try it to see in action. Type (or paste in) the following into a document in Sublime Text (bonus points if you can identify the source!):

    The most merciful thing in the world, I think, is the inability of the human mind to correlate all its contents.

    Press Enter twice so you start a new paragraph, and then type the following, press Tab where it says to do so:

    H. P. Lovecraft loves big words like mer[Tab], ina[Tab], & cor[Tab].

    In each case, pressing Tab should have auto-completed those words. Now try this:

    Words that begin with t include: t[Ctrl-Space].

    That time, a little menu appears with a list of possible auto-completions, including code & any words you've entered so far that start with a t. Use your Up & Down arrow keys to navigate through the list, or keep tying a letter or two to narrow down the list until you see what you want, then press Tab.

    Code

    In addition to words, Sublime Text also makes it very easy to type your HTML quickly & accurately. In a document, type a < & you'll see a menu instantly appear, with a list of HTML elements. Keep typing to narrow down that list until you see the element you want & press Tab. When you do so, Sublime Text not only completes the first element, but also enters in the closing element in as well, like this: <abbr></abbr>.

    To top it all off, Sublime Text puts your cursor right where you'd want it, between the <abbr> & the </abbr>.

    If you instead use auto-complete to generate an anchor element (or any element that requires an attribute/value pair), Sublime Text enters the element AND the attribute/value pair for you: <a href=""></a>. Even better, your cursor goes inside the empty value (between the quotation marks) so you can type or paste in the URL. But wait! Once you've entered in the URL, press Tab, & Sublime Text jumps your cursor between the <a href=""> & the </a> so you can enter in the hyperlink text. Press Tab a third time, & your cursor is now after the </a> so you can continue typing.

    Now that's smart!

    But how do I insert a real Tab?!

    Press Shift-Tab. Alt-Tab works on Macs too.

    Making sure auto-completion is turned on

    If auto-completion is not turned on for you1, open your personal settings like this:

    A file named Preferences.sublime-settings should open. If you followed my instructions at Configuring Sublime Text, that file will not be empty; otherwise, it may not have anything in it. I'd first go to Configuring Sublime Text & do what it says there before continuing.

    Then, make sure the following goes in your Preferences.sublime-settings file:

    // Enable auto complete to be triggered automatically when typing.
"auto_complete": true,

// The maximum file size where auto complete will be automatically triggered.
"auto_complete_size_limit": 4194304,

// The delay, in ms, before the auto complete window is shown after typing
"auto_complete_delay": 50,

// Controls what scopes auto complete will be triggered in
"auto_complete_selector": "source - comment",

// Additional situations to trigger auto complete
"auto_complete_triggers": [ {"selector": "text.html", "characters": "<"} ],

// By default, auto complete will commit the current completion on enter.
// This setting can be used to make it complete on tab instead.
// Completing on tab is generally a superior option, as it removes
// ambiguity between committing the completion and inserting a newline.
"auto_complete_commit_on_tab": true,

// Controls if auto complete is shown when snippet fields are active.
// Only relevant if auto_complete_commit_on_tab is true.
"auto_complete_with_fields": false,

    The Tag package

    Sublime Text's built-in auto-completion is fantastic, but what if you already have text that you want to surround with HTML? For instance, say you type the words Scott Granneman's Blog & you then want to surround them with the strong element? If you place your cursor in front of Scott & type <str & then press Tab, you will get the following:

    <strong></strong>Scott Granneman's Blog

    Not exactly what you wanted. I mean, at this point you could select the </strong> & move it after Blog, or copy Scott Granneman's Blog & put it after <strong>, but that kind of defeats the purpose of automation.

    In my case, after I type Scott Granneman's Blog & then realize I want those words to be bold, I put my cursor in front of Scott & type out <strong>. I then put my cursor after Blog & type </ … & immediately it's completed for me & strong> appears!

    Thank you, Tag package! (Oh, & it also does a bunch of other cool stuff too.)

    What is it?

    According to its GitHub page:

    "Tag" plugin is a collection of packages about tags, mixed together in an effort to provide a single package with utilities to work with tags.

    Currently provides: "Close tag on slash", "Tag indent or AutoFormat Tags", "Tag Remove", "Insert as Tag", "Tag Remove Attributes", "Tag Close", "Tag Lint".

    The Tag package does a lot of very cool stuff, especially for those writing HTML.

    Installing the Tag package

    Follow these steps:

    1. Command-Shift-P (Mac) or Ctrl-Shift-P (Windows) to open the Command Palette.
    2. Type Install until you see Package Control: Install Package.
    3. When the list of packages appears, type Tag until you find it.
    4. Press Enter to install the Tag package.
    5. Restart Sublime Text.

    Using the Tag package

    If all you want the Tag package for is auto-complete closing elements (what Tag calls "Close Tag on Slash"), you're set. Tag is very smart about recognizing what elements should be auto-completed (even if they're nested) when you press </. But Tag does more than that. For more info, take a look at Tag's GitHub page, where you can find out about:

    The TagWrapper package

    In my discussion of the Tag package above, I mentioned that you couldn't select text, enter some HTML, & have it automatically wrap around your selection. With the TagWrapper package, you can!

    What is it?

    According to its GitHub page:

    This plugin allows you to wrap selected text in given HTML tags or to strip HTML tags from selection.

    Select text, type the first tag (<p>, say), invoke TagWrapper, & boom! The selected text now has <p> and </p> around it. On the other hand, you can also highlight code (<p>Lorem ipsum</p>, for instance), invoke TagWrapper, & boom! you're left with just code-less text.

    Installing the TagWrapper package

    Follow these steps:

    1. Command-Shift-P (Mac) or Ctrl-Shift-P (Windows) to open the Command Palette.
    2. Type Install until you see Package Control: Install Package.
    3. When the list of packages appears, type TagWrapper until you find it.
    4. Press Enter to install the TagWrapper package.
    5. Restart Sublime Text.

    Using the TagWrapper package

    You can do 2 things with TagWrapper: add tags & strip tags.

    Add Tags

    Pretty easy:

    1. Highlight the words you want to wrap with HTML.
    2. Press Alt-Shift-T. A prompt will open at the bottom of your Sublime Text window.
    3. Type in the beginning tag (<p>or <strong> or even <p><strong> or <a href="http://www.chainsawonatireswing.com>) & press Enter. Your initial tag will entered with the closing tag automatically appearing.

    The one thing you should know: if you wrap multiple lines & then try to use the TagWrapper package to wrap every line with tags, it won't work. For example, say you select the following lines:

    Lorem ipsum
Lorem ipsum
Lorem ipsum

    When you press Alt-Shift-T, you get this, which is probably not what you expect:

    <li>Lorem ipsum
Lorem ipsum
Lorem ipsum</li>

    Bummer. I hope this is fixed some time.

    Strip Tags

    You can also remove tags from HTML:

    1. Highlight the code from which you want to strip the HTML.
    2. Press Alt-Shift-S. HTML-b-gone!

    1. Or if, for some weird reason, you want to turn it off, just set "auto_complete" to false. ↩

    WebSanity Top Secret