Sublime Text on cloud

Sublime Text on cloud

June 2, 2016

1-click AWS Deployment    1-click Azure Deployment

Overview

Sublime Text is a shareware cross-platform source code editor with a Python application programming interface. It natively supports many programming languages and markup languages, and functions can be added by users with plugins, typically community-built and maintained under free-software licenses. 

Sublime Text 3 is the current version of Sublime Text 

Sublime Text may be downloaded and evaluated for free, however a license must be purchased for continued use. There is no enforced time limit for the evaluation. 

Sublime Text is the fastest text editor that you can use for writing code. … It makes the editor very extendable, but using an entire instance of Chromium for a text editor makes the app start up slow and use more memory. Sublime Text is a native app written in C++, so its footprint is much lower. 

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:

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:

  • Mac OS X: Sublime Text 2 > Preferences > Settings – User
  • Windows: Preferences > Settings – User
  • Linux: Preferences > Settings – User

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!

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.

  • Tag Indent: Fix your nesting by pressing Ctrl-Alt-F
  • Tag Remove: Remove all or selected tags by using the Edit > Tag menu
  • Insert as Tag: Convert the current word to an HTML element by pressing Ctrl-Shift-.
  • Tag Remove Attributes: Remove all or selected attributes by using the Edit > Tag menu
  • Tag Close: Close the current element by pressing Alt-. (Windows & Linux) or Alt-Command-. (Mac OS X)
  • Tag Lint: Check the correctness of your HTML, looking for unclosed elements, by using the Edit > Tag menu

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!

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.

Quickly Insert Text & Code with Sublime Text Snippets

Getting tired of cutting & pasting an HTML5 template? Or typing out the same code all the time? Fortunately, Sublime Text makes it easy to quickly insert code snippets that you define.

As you probably know, when you type a p in an HTML document in Sublime Text & press Tab, it automatically expands to <p></p>. But what if you don’t like that (I don’t), & instead want it to expand to this (with the cursor appearing where the pipe is)?

<p>
  |
</p>

Let’s create a snippet to do just that.

Create

To create your first snippet in Sublime Text, do the following:

Go to Tools > New Snippet. A new untitled file will open that contains the following:

<snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <!-- <tabTrigger>hello</tabTrigger> -->
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

The content goes between <content><![CDATA[ & ]]></content>, resulting in this:

<content><![CDATA[
<p>
  $1
</p>
]]></content>

See that $1? That tells Sublime Text to put your cursor there when it’s done expanding your snippet. Sublime Text calls that a field marker.

Next is the tabTrigger, the text you type, followed by a Tab, that expands to create the content. In our case, we want to use the letter p. Get rid of the comment describing the tabTrigger, & then change the actual line for the tabTrigger to this:

<tabTrigger>p</tabTrigger>

Finally, the scope, which determines the kinds of files (HTML, CSS, PHP, shell script, etc.) in which the expansion takes place. Again, get rid of the commented line describing the scope, & change the line for the scope to this:

<scope>text.html</scope>

At this point, the file should look like this:

<snippet>
<content><![CDATA[
<p>
  $1
</p>
]]></content>
<tabTrigger>p</tabTrigger>
<scope>text.html</scope>
</snippet>

Save

Save the file. When you do, you’ll need to determine two things: its file name & where to save it.

File name: The file must end with .sublime-snippet, like this: foo.sublime-snippet. What goes in front of .sublime-snippet is up to you. I like to use the tabTrigger if at all possible, along with the main part of the scope in front of the tabTrigger, giving me this: html-p.sublime-snippet.

Where to save it: When you press Save, Sublime Text should automatically try to save the file in the right folder.

  • Mac OS X: /Users/yourname/Library/Application Support/Sublime Text 2/Packages/User
  • Windows:
  • Windows Portable (USB Drive):
  • Linux:

You shouldn’t have to worry about the location, as Sublime Text should take care of it for you, but if for some weird reason you’re not in the right place, then you’ll need to navigate to the right location.

Test

Now let’s test our new snippet. Open an HTML document (or open a new tab in Sublime Text & click in the bottom right to change the document type from Plain Text to HTML), click in it, & type p, followed by a Tab. You should see the following appear, with the cursor in place of the pipe symbol (|):

<p>
  |
</p>

Type the content you want between the <p> & </p>, & then press Tab again, & Sublime Text automatically moves your cursor just after the </p>, so you press Enter & continue typing. Our snippet worked. Excellent!

Other Examples

Here are a few other examples that also illustrate some of the other things you can do with Sublime Text snippets.

HTML5 Template

If you’re creating HTML5-based websites, you’re probably using the same template over & over again. That’s exactly the sort of thing you should turn into a Sublime Text snippet!

Go to Tools > New Snippet & put the following in:

<snippet>
<content><![CDATA[<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>$1</title>
</head>
<body>
<h1>$2</h1>
<p>
  $3
</p>
</body>
</html>]]></content>
<tabTrigger>html5skel</tabTrigger>
<scope>text.html</scope>
</snippet>

Save it as html-html5skel.sublime-snippet

This is the same as the other one we did, with one big difference. Previously, we used $1 to indicate where we wanted the cursor to sit after expansion. In our HTML5 template, you instead see $1, $2, & $3. What’s going on?

Use $1 if you want to place your cursor in a particular location & be done with it. In my example above with <p> & </p>, there really is only one place for the cursor to go, so that’s all I need.

But when creating a longer, more complex template, you want your cursor to actually go in several spots.

  • $1 tells Sublime Text to put the cursor there when the expansion completes, so you can enter an appropriate title for the webpage.
  • When you’re done in that spot, press Tab & your cursor will jump to $2 so you can enter text for the page title that appears in the browser’s viewport.
  • After that, press Tab yet again & the cursor makes a final jump to $3, inside the first paragraph.

You can add as many of these as you want, with as many jumps as you’d like or would be appropriate. Oh, & if you want to jump back instead of forward, press Shift-Tab.

3 Paragraphs

I use this all the time. I often find myself wanting not one paragraph, but three.

<snippet>
<content><![CDATA[<p>
  $1
</p>
<p>
  $2
</p>
<p>
  $3
</p>]]></content>
<tabTrigger>p3</tabTrigger>
<scope>text.html</scope>
</snippet>

I saved this as, cleverly enough, html-p3.sublime-snippet. Note my use again of the field markers so that I can jump between paragraphs after they’ve been created.

CSS

What about CSS? You can use snippets for CSS as well as HTML (actually, you can use snippets with any language or text that works inside Sublime Text).

This is one that is pretty handy & also illustrates some additional things you need to know about Sublime Text snippets. I saved it as css-font.sublime-snippet:

<snippet>
    <content><![CDATA[font: ${1:normal|italic|oblique} ${2:normal|small-caps} ${3:normal|bold|bolder|lighter} ${4:1em}/${5:1.5} ${6:sans-serif|serif|monospace};
]]></content>
    <tabTrigger>font</tabTrigger>
    <description>font: 1em/1.5 sans-serif;</description>
    <scope>source.css</scope>
</snippet>

The first thing to notice is that there is a <description>…</description> line. You can put anything in there, as it’s entirely for your eyes only. As you start to type the tabTrigger, you’ll see the description appear as a little tooltip to remind you what the snippet does. You can use <description> with any snippet, not just CSS, so feel free to put them wherever it would help you.

The next thing to discuss is that the scope is different. For an HTML snippet, we had to use text.html, but for CSS, we instead use source.css. Why the difference? According to Syntax Definitions in the Sublime Text Docs:

The top level scope for this syntax definition. It takes the form source.<lang_name> or text.<lang_name>. For programming languages, use source. For markup and everything else, text.

So, if you’re creating a snippet for HTML or other markup languages (like XML, YAML, LaTeX, Textile, & Markdown), use text.<lang_name>. For everything else—the programming languages like C, C++, Erlang, Python, Perl, Java, JavaScript, PHP, Ruby on Rails, & bash shell scripts—use source.<lang_name>2. CSS isn’t normally what I’d think of as a programming language, but it sure isn’t a markup language, so it gets source.css.

Finally, focus on the content of the snippet:

font: ${1:normal|italic|oblique} ${2:normal|small-caps} ${3:normal|bold|bolder|lighter} ${4:1em}/${5:1.5} ${6:sans-serif|serif|monospace};

To understand what this means, let’s see the results. When you type font & press Tab, you’ll see the following:

font: normal|italic|oblique normal|small-caps normal|bold|bolder|lighter 1em/1.5 sans-serif|serif|monospace;

Your cursor isn’t apparent in there; instead, the following is selected: normal|italic|oblique, which corresponds to this code in your snippet: ${1:normal|italic|oblique}. To Sublime Text, ${1:normal|italic|oblique} is a field marker that also contains a place holder. The ${1} is just like $1: it’s a field marker. The normal|italic|oblique produces place holder text that is selected when the snippet is expanded. The idea is that you’ll see your three choices as a reminder, & you can then type out the one you want.

When you’ve finished typing, press Tab & the next place holder—normal|small-caps—is selected because it corresponds to ${2}. Type normal or small-caps (or anything, really—the place holder is just a suggestion that you’re free to ignore), press Tab, & the third field marker’s place holder text is selected: normal|bold|bolder|lighter. And so on.

One more thing about place holders: if you instead use something like ${1:foo}, then when you expand your snippet, foo will be selected. You can then change foo to something else, or you can just press Tab & leave foo there while jumping ahead to the next field marker. The point is, place holder text can be just one item, or it can be several. It’s your choice. Either way, field markers with place holders are a powerful, useful tool that make Sublime Text great.

How to Install Sublime Text 3 on Ubuntu 18.04:

Installing Sublime Text on Ubuntu

To install Sublime Text 3 on your Ubuntu system, follow these steps:

  1. Update the apt package list and install the dependencies necessary to fetch packages from https sources: 
    sudo apt updatesudo apt install apt-transport-https ca-certificates curl software-properties-common
  2. Import the repository’s GPG key using the following curl command: 
    curl -fsSL https://download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key add -

    Add the Sublime Text APT repository to your system’s software repository list by typing:

    sudo add-apt-repository "deb https://download.sublimetext.com/ apt/stable/"
  3. Once the repository is enabled, update apt sources and install Sublime Text 3 with the following commands: 
    sudo apt updatesudo apt install sublime-text

That’s it. Sublime Text has been installed on your Ubuntu desktop.

Starting Sublime Text

You can start the Sublime Text editor either from the terminal by typing subl or by clicking on the Sublime icon (Activities -> Sublime):When you start Sublime Text for the first time, a window like the following one will appear:

You have successfully installed Sublime Text on your Ubuntu 18.04 machine. Your next step should be to install the Sublime Text Package Control and start customizing your new editor according to your needs.

Sublime Text is a cross-platform source code editor with a Python application programming interface (API). It natively supports many programming languages and markup languages, and its functionality can be extended by users with plugins, typically community-built and maintained under free-software licenses.Sublime Text 2 is a super fast and feature packed text and development editor. If you are going to be coding regularly you want to try this amazing editor (IDE).

Sublime Text contains 22 different visual themes, with the option to download additional themes and configure custom themes via third-party plugins.

The minimap feature shows a reduced overview of the entire file in the top-right corner of the screen. The portion of the file visible in the main editor pane is highlighted and clicking or dragging in this view scrolls the editor through the file.

Pros and Cons :

 Sublime Text is a serious text editor and does come with a learning curve. While it’s still great for basic text editing needs, it’s more geared towards developers. Because Sublime Text is so customizable, some user-friendliness is lost in the process. 

Sublime Text, while being a lightweight text editor, provides powerful IDE-like features, Python scripting, and the ability to customize every aspect of the editor itself, letting users code and refactor with speed and efficiency. 

Features

Major Features of  Sublime Text

  • “Goto Anything,” quick navigation to files, symbols, or lines
  • “Command palette” uses adaptive matching for quick keyboard invocation of arbitrary commands
  • Simultaneous editing: simultaneously make the same interactive changes to multiple selected areas
  • Python-based plugin API
  • Project-specific preferences
  • Extensive customizability via JSON settings files, including project-specific and platform-specific settings
  • Cross platform (Windows, OS X, Linux)
  • Compatible with many language grammars from TextMate.
  • Multiple cursors: Once you have discovered multiple cursors you won’t want to work without them anymore. As the name suggests they let you write or edit in multiple places in a document at the same time.
  • Vintage mode: Vim keyboard shortcuts will work just like in the original Vim editor. To use them, all you need to do is to enable vintage mode.
  • Lightning fast: This is the fastest code editor you will find right now.
  • Command pallet: A great feature that allows you to reach about all functions of the editor via the keyboard. You will hardly use your mouse and thus code more efficiently.
  • Plugin collection: A hugely active community creates plugins for almost any task in Sublime Text 2. This includes syntax highlighting and code snippets for a large number of languages, for example Javascript, PHP, CSS, HTML, Python, LESS, XML and C++ to name just a few.
  • Package control: This add-on let’s you install plugins within seconds directly from the editor.

 

Videos

Getting Started with SublimeText

Sublime Text Power User Talk

Sublime Text on cloud

Related Posts