Sublime Text 2 is a simple looking yet it is a very powerful editor, with the package system and keyboard shortcut, it mades writing codes fast and simpler. Here are some tips and tricks to improve our daily workflow a bit, I’m using Sublime Text 2 here because I found some plugin is not working properly on Sublime Text 3.
Install Package Control
First thing first when using Sublime Text is, install the package control. Head over to https://sublime.wbond.net/installation#st2, copy the long string and paste it into the Sublime Text console.
To open console, use the shortcut Ctrl + `, and then paste the long string in to the box and hit enter.
After finish, restart Sublime Text to take effects, on OS X, I think Ctrl + Q to quit works better than clicking the close button.
After restarted Sublime Text, press Cmd + Shift + P (for OS X) or go to menu Tools -> Command Palette to open the Command Palette, then type in *install and you can see this option.
Means we installed the package control, and now we can use this command to install additional packages. When we select this command, we’ll then presented with a long list of packages available, we then can select from there or type in the package name for filtering.
You might also notice that Sublime Text uses search to filter the command, so we can type in command very fast.
Snippet
When starting a new HTML page, it’s kind of troublesome or lazy to type in the <html> till </html> tags, there is a snippet built in to help us with that. Using command Snippet: html, and we’ll have our most basic HTML tags. There are other snippets other than HTML, of course.
Set Syntax
One thing I noticed I used a lots is set syntax function, Sublime Text built-in function, allow us to set the color coding for our code depends on language. This is particularly handy when we paste some code in there and want some syntax highlight.
By using the command palette, type set <language> to set the syntax.
CDNJS
In web development we frequently required to use library or framework like jQuery, instead of keep one on local or go saving the CDN url somewhere and paste it here, we can utilize this CDNJS package, to quickly include those libraries file.
After selected the install package command, we can select from a list of packages, here we need CDNJS.
Once we selected the cdnjs command, it will retrieve a huge list of available libraries I suppose, because it takes a while for me (check the status bar for status, and don’t lose focus of Sublime Text as it would cancel the command). We’ll have 2 options for this command, one is import, which is the one with script tag, another one is URL only.
jQuery for instance, once we selected jQuery, we’ll then choose version, then we’ll choose minified or debug file, etc etc. It’s a convenient way to include scripts albeit its slow loading time.
HtmlTidy
Sometimes we’ll copy and paste some HTML to a new document, and it’s difficult to see the proper structure of the DOM when the HTML text is not formatted properly, despite we changed the syntax. HtmlTidy to the rescue, with this command, Sublime Text can turn a single line HTML into proper format and indented HTML code, it might take some times if the HTML code is complex.
Indent XML
Install the package indent xml from the command palette. With this package, we’re able to format and indent our XML code, it work similar to the HtmlTidy, but for XML code, so if you use this to format an empty HTML tag such as <p></p>, it will format it to <p />. And it seems like have problem to format XML that having declaration that have encoding other than UTF-8 (from what I experienced), and it will not format invalid XML document. Command will only available if syntax was set to XML.
Indent JSON
The chances we came across with JSON are quite high these days, this little command which came with Sublime Text allow us to do..yes, similar to Indent XML. But the command will only available if syntax is set to JSON.
These are just a tiny set of function Sublime Text are capable of, hopefully I can came across more that can further improve the workflow.